Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)
저는 이 튜토리얼에서 예제 시나리오를 이용하여 CSS 그리드 레이아웃의 기초를 다룰 것입니다. 현재 CSS 그리드는 거의 모든 브라우저에서 지원하고 있으며, 프로덕트를 제작하는 작업에서 사용하면 됩니다. 플랙스박스 같은 다른 레이아웃 방식과 달리 그리드 레이아웃은 두 가지 정도의 자유를 제공합니다. 이는 너무나도 자유로와서 엘리먼트를 위치시키는 일은 식은 죽 먹기입니다.
CSS 그리드 레이아웃 용도의 HTML 구조
CSS 그리드 레이아웃을 이용할 것이라면 HTML 요소들이 특정한 구조로 되어 있어야 합니다.
부모 컨테이너로 DIV를 이용해 제어하려는 요소들을 감싸주도록 하세요.
<div class="wrapper"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="div4">4</div> </div>
DIV들에 스타일을 추가해서 쉽게 서로 구분할 수 있게 해봅시다.
또한, 그리드 레이아웃이 적용되도록 wrapper가 있는 DIV에 display: grid을 적용하세요.
.wrapper > div{
background-color: orange;
border: 1px black solid;
}
.wrapper > div:nth-child(odd){
background-color: indianred;
}
.wrapper{
display: grid
}
이 시점부터 모든 스타일은 wrapper가 있는 DIV 안에서 적용될 것입니다. 자식 DIV를 어느 지점에서든 제어하고 싶다면, 해당 자식 DIV에 관해 grid에 맞춰진 스타일 규칙을 추가하겠습니다.
부모 DIV의 규칙
그리드 레이아웃에 관해 이해해야 하는 첫 번째는 grid-template-columns와 grid-template-rows입니다. 이 두 가지 규칙은 기본적으로 그리드의 형태를 조절합니다.
이러한 규칙에 적용될 값은 리드에서 사용 가능한 공간(free space)의 길이(length), 퍼센트나 비율이 될 수 있습니다. 값을 auto로 정할 수 있는데, 이는 잔여 공간을 채울 것입니다.
아래에 있는 몇 가지를 예를 봅시다.
Grid-template-columns과 Grid-template-rows
grid-template-columns
.wrapper{
display: grid;
grid-template-columns: 100px 100px 100px
}
.wrapper{
display: grid;
grid-template-columns: 100px auto 100px
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
grid-template-columns과 grid-template-rows
여러분이 행(columns)과 열(rows)를 직접 제어하도록 그리드를 실제로 작업해 보지요.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 20px 250px;
grid-template-rows: 150px 40px;
}
저는 여기에 CSS가 똑같은 자식 DIV 두 개를 HTML에 추가했습니다.
grid-template 패턴 반복하기
만약 grid-template에 관해 반복되는 패턴이 있다면, 그냥 repeat을 사용하고 동일한 패턴을 몇 차례 반복할지 얘기해 주면 됩니다.
가령, 요소가 12개 있다고 칩시다. 그리고 여러분은 그 요소들이 동일한 너비를 갖고 수평으로 정렬되어지게 하고 싶습니다. grid-template-columns 안에 1fr을 12번 적을 수 있지만, 그렇게 하면 효율적이지 않습니다. 그대신 repeat(12, 1fr)을 사용할 수 있습니다.
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr)
}
이와 같이 패턴을 반복시킵니다.
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr 5fr 10fr);
}
Grid-auto-columns와 Grid-auto-rows
이 규칙은 그리드 셀의 너비와 높이를 잡는 데 유익합니다.
이 규칙을 정하지 않으면, 그리드 열과 행은 콘텐츠와 함께 늘어나지요.
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 20px 80px;
}
grid-auto 규칙과 함께 사용하는 좋은 특징(feature) 하나는 minmax 기능입니다.
단순히 첫 번째 매개 변수로 최소 크기 값을, 두 번째 매개 변수로 최대 크기 값을 설정합니다. 두 번째 매개 변숫값을 auto로 넣으면 셀 크기에 맞춰 변하게 됩니다.
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(50px, auto)
}
아래에는 동일한 CSS 규칙을 가진 두 개의 서로 다른 DIV 콘텐츠가 있습니다.
Grid-gap
명칭에서 의미하듯 이 규칙은 그리드 셀 간의 공백(gap)을 만듭니다.
grid-gap: 5px을 적용하면, 셀 사이에 5px의 공백이 생깁니다. 아니면, grid-row-gap: 5px과 grid-column-gap: 5px을 개별적으로 적용해서 열(row) 혹은 행(column) 사이에만 공백을 만들 수 있습니다.
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 5px;
}
자식 DIV의 규칙
여태껏 그리드 형태와 그리드에서 흘러가는 아이템(items)에만 초점을 맞추었습니다. 이제는 각각의 아이템을 어떻게 하나하나 제어하는지 알아보겠습니다.
아이템을 위치시키기 위해서는 그리드 라인을 참조(reference)로 사용합니다. 아래에는 행과 열이 각각 검정과 오랜지 선으로 그려진 2x4 그리드가 있습니다.
요소들을 배치하는 데 행 번호(line number)과 함께 grid-column과 grid-row 규칙을 사용하겠습니다.
예를 들어, 첫 번째 자식 div를 grid-column: 1/3으로 설정한다면 그리드에서 첫 두 개의 셀을 사용한다는 것입니다.
아래의 HTML과 CSS를 생각해 보세요.
<div class="wrapper"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="div4">4</div> <div class="div5">5</div> <div class="div6">6</div> <div class="div7">7</div> <div class="div8">8</div> </div>
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 5px;
}
wrapper DIV에 동일한 크기의 열(column) 네 개와 요소 여덟 개가 있습니다.
.div1{
grid-column: 1/3;
}
.div1{
grid-column: 1/3;
grid-row: 1/3;
}
여러분은 grid-area: rowStart/columnStart/rowEnd/columnEnd 식으로 이 두 개의 규칙을 단 하나의 규칙으로 합칠 수 있습니다.
.div1{
grid-area: 2/2/3/4;
}
위 예제에서 보여지듯이 요소들은 HTML 구조에 얽매어 있지 않습니다. grid-area 규칙을 이용해서 어떻게 첫 번째 요소를 재배치했는지 주목해 보세요.
Grid-area와 grid-template-areas
여러분은 각 요소에 이름을 짓고 그리드를 생성하는 데 그 이름을 사용할 수 있습니다. 이는 정말 강력하며, 좀 더 직관적인 레이아웃이 되지요.
그러므로 그리드 시스템에서 배치시킬 각 요소에 대한 DIV를 정의하겠습니다.
저는 header, leftColumn, rightColumn, middleTop, middleBottom 그리고 footer를 만들 생각입니다.
저의 HTML에서 다수의 자식 DIV가 있어야 합니다. class 이름은 무엇이든 될 수 있습니다.
<div class="wrapper"> <div class="header">Header</div> <div class="leftCol">LeftCol</div> <div class="rightCol">RightCol</div> <div class="midTop">midTop</div> <div class="midBottom">midBottom</div> <div class="footer">Footer</div> </div>
그런 후에 CSS 안에서 grid-area 명칭을 정합니다. 무슨 명칭이든 가능합니다만, class 이름과 일치하지 않아야 합니다.
.header{
grid-area: header;
background-color: LightSeaGreen ;
}
.leftCol{
grid-area: leftCol;
background-color: orange;
}
.rightCol{
grid-area: rightCol;
background-color: lightblue;
}
.midTop{
grid-area: midTop;
background-color: lightgrey;
}
.midBottom{
grid-area: midBottom;
background-color: pink;
}
.footer{
grid-area: footer;
background-color: lightgreen;
}
wrapper DIV 안에서는 앞서 정의한 명칭을 참조해서 그 요소들을 배치하도록 grid-template-areas를 사용합니다.
4x4 그리드가 생긴 것을 잘 보세요.
.wrapper {
display: grid;
grid-template-columns: 1fr 4fr 4fr 1fr;
grid-template-rows: 50px 100px 100px 30px;
grid-template-areas:
"header header header header"
"leftCol midTop midTop rightCol"
"leftCol midBottom midBottom rightCol"
"footer footer footer footer";
grid-gap: 5px;
}
가령 제가 두 개의 컬럼만 있는 footer를 중앙에 놓고 싶다면, grid-template-areas에서 footer의 첫 번째와 마지막 모양을 점(.)과 바꿀 것입니다.
.wrapper {
display: grid;
grid-template-columns: 1fr 4fr 4fr 1fr;
grid-template-rows: 50px 100px 100px 30px;
grid-template-areas:
"header header header header"
"leftCol midTop midTop rightCol"
"leftCol midBottom midBottom rightCol"
". footer footer .";
grid-gap: 5px;
}
결론
CSS 그리드에는 많은 규치기 있습니다. 저는 이 튜토리얼에서 가장 유용한 규칙들을 다루었을 뿐입니다. 여러분은 그리드 속성과 기능에 관한 전체 목록이 있는 MDN 웹 문서나 다른 자료들을 자세히 읽어 볼 수 있습니다.
