CSS Grid를 통한 정렬의 장점

Question

안녕하세요 😃 신선한 그리드를 이용한 정렬 을 재미있게 잘 보았습니다. 몇가지 궁금한 점이 있어서 질문 드려요~ Q1. 보통 이러한 정렬은 자바스크립트를 이용하여 정렬하는 것이 일반적이라고 생각됩니다.(리액트나 기타 프레임워크를 보았을때..) 그럼에도, 이와 같이 CSS를 이용하여 정렬한다고 했을때, 어떠한 장점을 얻을 수 있을까요?? 🤔 Q2. 1분코딩님의 샘플 코드를 보면 큰 그리드 컨테이너 안에서 header, footer, 각각의 cards(section), 상단 버튼들이 위치하고 있습니다. 저 같은 경우는 큰 그리드 컨테이너를 잡고 그 안에 button-container, header, card-section, footer 이런 식으로 분류한후 card-section 안에서 다시 그리드를 잡아서 사용하게되었습니다. 이렇게 구조를 잡게되니, CSS만을 이용한 체크박스 이벤트를 활용할 수 없게 되었습니다.😅 제가 궁금한 점은, 그리드 레이아웃을 활용할 때는 (저처럼) 그리드 안에 섹션별로 컨테이너를 잡고 사용하지는 않고 바로 각각을 그리드 아이템으로서 위치를 잡아서 사용하게 되나요? 혹은 어느 방식을 많이 사용하게 되는지 궁금하네요. ( 질문드리고 나서 생각해보니, 캐바캐일거라는 생각이 들긴하네여. 😅)

studiomeal · Answer

말씀대로 정말 케바케랍니다 ㅎㅎ 레이아웃 구성 자체가 개발자의 손에 의존하는 정적 방식이냐, 아니면 툴에 의존하는 동적 방식이냐에 따라서도 달라질 수 있을 것이고요. 스크립트를 이용하지 않고 CSS만으로 정렬하는 것의 장점은, 아무래도 브라우저가 레이아웃을 조정할 때 스크립트를 사용하면 CSS만 사용하는 것 보다는 연산 비용이 더 발생하기 때문에 최적화의 측면에서 가능하다면 CSS로 해결하는 것이 낫습니다. 근데 사실 육안으로 성능이 더 좋다고 느낄 수 있는 경우는 많지 않기는 합니다 ㅎㅎ