Grid는 CSS 레이아웃의 끝판왕이라고 할 수 있다. flex와 grid는 둘 다 레이아웃 배치에 사용되는데, 이 둘의 큰 차이점은 Flex는 한 방향 레이아웃 시스템(1차원)인 반면, grid는 두 방향(가로-세로) 레이아웃 시스템(2차원)이라는 점이다.
위와 같이 flex는 한 덩어리 안에서 가로, 세로 방향 중 한 방식을 결정하여 레이아웃을 짜는 반면 그리드는 한 덩어리 안에서 가로, 세로 방향을 모두 적용할 수 있어 활용할 수 있는 범위가 더 넓다.
그럼 grid가 flex를 대신할 수 있을까? 완전히 그렇진 않다. Flex 가 편한 방법이 있고, grid가 편한 방법이 있음. 따라서 둘 다 잘 알아야 한다! 보통 큰 골격 레이아웃은 grid로 세부 레이아웃은 Flex로 구현한다.
<aside> ✅ Grid는 IE에서 지원하지 않으므로 한국에서는 그림의 떡이다? NoNo! IE 10, 11에서도 구버전 스펙(새 창)을 지원하기 때문에 귀찮지만 방법이 없는 것은 아님. 한계는 있지만 뭐가 다른지를 알아두고 대응하면 충분히 사용할 수 있다.
</aside>
그리드는 파이어폭스 개발자 도구에서 레이아웃을 명확하게 보여주는 기능을 가지므로, 해당 실습은 파이어폭스에서 진행한다.
Grid 레이아웃을 만들기 위한 기본적인 HTML 구조는 Flex와 마찬가지로 컨테이너와 아이템만 있으면 된다.
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
</div>
.container {
display: grid;
}
