그리드는 수평선과 수직선으로 이루어진 웹페이지 레이아웃 시스템으로, 여러 요소들을 편리하게 정렬할 수 있게 해주는 도구이다. 자주 사용되는 flex
와 비교했을 때 flex
는 1차원적인 레이아웃 시스템, grid
는 웹페이지의 행과 열을 모두 관여할 수 있는 2차원 레이아웃 시스템이라는 점이 가장 큰 차별점이다.
이미지 출처: 1분 코딩
flex
는 한 방향 레이아웃 시스템 (1차원)grid
는 행-열 동시 설정 가능한 2차원 레이아웃 시스템컨테이너(container) 요소를 만들고 3개의 <div>
를 안에 넣어준다. (잘 보이게 하기 위해서 가벼운 css 스타일링 포함). 이후 별도의 레이아웃 시스템을 사용하지 않으면 default 값으로 아래 이미지처럼 배치된다.
HTML:
<div class="container">
<div class="one">item 1</div>
<div class="two">item 2</div>
<div class="three">item 3</div>
</div>
결과:
이때 flex
레이아웃 시스템을 사용할 때와 같이, container 요소에 display: grid
를 주게 되면 아무 일도 일어나지 않는다. grid
를 사용할 때는 행과 열의 기준을 잡아줘야 한다.
CSS:
.container {
display: grid;
border: 5px solid black;
width: 600px;
}
그리드 형태는 grid-template-rows
를 통해 행(rows)의 크기와 배치를 정의하고, grid-template-columns
을 통해 columns(열)의 크기와 배치를 정의한다. 크기를 표현하기 위해 여러가지 단위를 사용할 수 있다.
Example:
.container {
display: grid;
grid-template-columns: 400px 100px 100px;
}
1fr
로 지정 fr
은 fraction의 약자로 숫자 비율대로 트랙을 나눈다.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.container {
display: grid;
grid-template-columns: 100px 2fr 1fr;
}
repeat
함수를 사용해서 작성한 케이스. 1fr 1fr 1fr과 똑같이 컨테이너를 3개의 열로 나누고 각 열의 크기를 1fr로 지정한다. repeat(3, 1fr)
= 1fr 1fr 1fr
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container {
display: grid;
grid-template-rows: 50px 100px 50px;
}
3 x 2
행열로 만들고 각 열의 크기는 1fr, 각 해의 크기는 50px로 지정한다..container {
display: grid;
grid-template-rows: 50px 50px 50px;
}
item
요소 수보다 많은 경우, 행-열 순으로 item
을 배치하고 남은 칸은 비워둔다.item
요소를 더 만들면 남은 칸을 다 채운다.grid area
에 이름을 붙이고, 그 이름을 이용해서 레이아웃을 잡을 수 있는 아주 직관적인 방법이다.item
요소에 grid-area
값을 선언해주어야 한다. .one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px 50px 50px;
grid-template-areas:
"one one"
"two three"
"four four";
}
3 x 2
행열인 컨테이너에 각 grid-area
를 사용해서 자유롭게 배치 가능하다 item 1
이 차지하게 하기 위해 "one" 을 두 번 작성한다. 두 번째 행은 item 2
와 item 3
가 나눠서 들어가게 하기 위해서 "two"와 "three"를 원하는 순서대로 작성해준다.four
를 두 번 작성해주어 첫 번째 행에서 item 1
이 모든 열으 차지한 것처럼 extra item 4
이 마지막 행의 모든 열을 차지할 수 있도록 한다.item 1
이 다시 가장 밑 행에 들어가는 것이 아니라 오류가 나게 된다. 즉 서로 맞대고 있는 area가 아닌 곳에 같은 item
을 넣을 수는 없다. row-gap
: 행(row) area 간격을 지정column-gap
: 열(column) area 간격을 지정gap
: 컨테이너 안에 포함되어 있는 모든 area의 행열 간격 지정.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px 50px 50px;
row-gap: 10px;
grid-template-areas:
"one one"
"two three"
"four four";
}
.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px 50px 50px;
column-gap: 10px;
grid-template-areas:
"one one"
"two three"
"four four";
}
.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px 50px 50px;
gap: 10px;
grid-template-areas:
"one one"
"two three"
"four four";
}