CSS Grid

CSS Grid 레이아웃은 요소를 격자형태로 만들 수 있는 레이아웃이다.

<div class="grid-container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
  <div class="box box4">Box 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}

부모 요소인 div.container는 그리드 컨테이너 라고 하며 자식 요소인 div는 그리드 아이템 이다. 부모 div에게 display : grid를 주게 되면 자식 div는 모두 격자처럼 진열된다.

• grid-template-columns : 격자의 열 너비와 갯수.
• grid-template-rows : 격자의 행 높이와 갯수를 설정

그리드 배치

.grid-container {
 ... 중략
  grid-template-areas:
    "header header header header"
    "main main sidebar sidebar"
    "footer footer footer footer";
}

.box1 {
  grid-area: header;
}
.box2 {
  grid-area: main;
}
.box3 {
  grid-area: sidebar;
}
.box4 {
  grid-area: footer;
}

grid-template-areas 속성의 값은 격자 레이아웃을 표현하는 문자열로 이루어진다. 각 줄은 하나의 행, 따옴표 안에 작성된 문자열은 하나의 열을 나타낸다. 마침표(.)는 해당 셀이 비어있음을 나타내며, 다른 문자열은 셀 안에 들어갈 HTML 요소의 이름을 나타낸다.

위의 코드에서는 grid-template-areas 속성을 사용하여 헤더(header), 메인(main), 사이드바(sidebar), 푸터(footer)라는 셀 이름을 지정하고 grid-area 속성을 사용하여 각각의 HTML 요소를 지정된 셀에 배치한다.

grid-column-start grid-column-end 속성을 사용해도 배치 가능한데 직관적이지가 않아서 나는 주로 grid-template-areas 속성을 쓰는 편이다.