flex로 좌우상하배치 및 크기조절은 쉽지만 grid형태로 구현하는 것이
어렵기 때문에 나온 속성이다.
grid-template-columns
는 column(열) box의 너비(width)
를 설정한다.
grid-template-rows
는 row(행) box의 높이(height)
를 설정한다.
밑에 예시는 100*100의 box를 200px씩 3개로 grid형태로 출력한 모습이다.
grid-template-rows
는 그 반대이다.
.father {
height: 100vh;
display: grid;
grid-template-columns: 200px 200px 200px;
}
.child {
width: 100px;
height: 100px;
background-color: black;
}
.child:nth-child(2) {
background-color: red;
}
<div class="father">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
밑 사진처럼 보라색부분이 column-gap
이다.
grid-template-column
값으로 분할하고,
각각의 요소에 gap
값을 margin
으로 주는 것이다.
.father {
height: 100vh;
display: grid;
grid-template-columns: 200px 200px 200px;
column-gap: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 150px); /* width */
grid-template-rows: repeat(4, 100px); /* height */
grid-template-areas:
"header header header header"
"nav content content content"
"nav content content content"
"footer footer footer footer";
}
.header {
grid-area: header;
background-color: red;
}
.nav {
grid-area: nav;
background-color: black;
}
.content {
grid-area: content;
background-color: blue;
}
.footer {
grid-area: footer;
background-color: cadetblue;
}
<div class="grid">
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, 100px); /* width */
grid-template-rows: repeat(4, 150px); /* height */
}
<div class="grid">
<div class="header">HEADER</div>
<div class="nav">NAV</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
노란색은 grid-column-start
의 값이고, 1부터 시작한다.
빨간색은 grid-column-end
의 값이고, 2부터 시작한다.
위와 같이 HEADER
로 row 한 줄 전체를 하고 싶다면 ?
.header {
background-color: red;
grid-column-start: 1; /* 시작 (line) */
grid-column-end: 5; /* 끝 (line) */
}
이번엔 위와 같이 column을 합치는 경우도 생겼을 경우에는 어떻게 할까?
일단 grid-column-start/end
를 설정해보자.
<div class="grid">
<div class="header">HEADER</div>
<div class="nav">NAV</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
.header {
background-color: red;
grid-column-start: 1; /* 1열부터*/
grid-column-end: 5; /* 4열까지 */
}
.nav {
background-color: black;
grid-column-start: 1; /* 1열부터 */
grid-column-end: 2; /* 1열까지 */
}
.content {
background-color: blue;
grid-column-start: 2;
grid-column-end: 5;
}
.footer {
background-color: yellowgreen;
}
header
는 1행의 1열부터 4열까지로 설정하고,
nav
는 2행의 1열, 3행의 1열을 설정해야 하며
content
는 2행의 2열-4열, 3행의 2열-4열까지를 설정해야한다.
여기서 우리는 grid-row-start/end
를 사용할 수 있다.
빨간색은 grid-row-start
의 값이고, 1부터 시작한다.
형광색은 grid-row-end
의 값이고, 2부터 시작한다.
따라서 nav, content
는 grid-row-start/end: 2, 4
가 되어야 한다.
.header {
background-color: red;
grid-column-start: 1; /* 1열부터*/
grid-column-end: 5; /* 4열까지 */
}
.nav {
background-color: black;
grid-row-start: 2; /* 2행부터 */
grid-row-end: 4; /* 3행까지 */
grid-column-start: 1; /* 1열부터 */
grid-column-end: 2; /* 1열까지 */
}
.content {
background-color: blue;
grid-row-start: 2; /* 2행부터 */
grid-row-end: 4; /* 3행까지 */
grid-column-start: 2; /* 2열부터 */
grid-column-end: 5; /* 4열까지 */
}
.footer {
background-color: yellowgreen;
grid-column-start: 1;
grid-column-end: 5;
}
짠!
header
는 1행 전체
nav
는 2행 1열, 2행 2열
content
는 2행2열 - 2행 4열, 3행2열 - 3행4열
footer
는 4행 전체로 구성되었다.
grid-row/column-start/end
는 복잡해서 사용하기 쉽지않다.
그래서 사용할 수 있는게 바로 grid-row/column
ㅋㅋ..
위에 코드를 그대로 수정해보면 좀 나아진거 같기도? ㅎㅎ..
.header {
background-color: red;
grid-column: 1 / 5;
}
.nav {
background-color: black;
grid-row: 2 / 4;
grid-column: 1 / 2;
}
.content {
background-color: blue;
grid-row: 2 / 4;
grid-column: 2 / 5;
}
.footer {
background-color: yellowgreen;
grid-column: 1 / 5;
}
조금 더 수정해보자.
-1
는 끝을 나타낸다. 따라서 라인이 몇개인지 셀 필요가 없다.
span
은 몇개의 cell(box)
공간을 차지하는지를 뜻한다.
만약 span 4
면 4개의 cell 공간을 차지한다는 뜻이다.
.header {
background-color: red;
grid-column: span 4; /* 열 4cell */
}
.nav {
background-color: black;
grid-row: span 2; /* 행 2cell */
grid-column: span 1; /* 열 1cell*/
}
.content {
background-color: blue;
grid-row: span 2; /* 행 2cell */
grid-column: span 3; /* 열 3cell */
}
.footer {
background-color: yellowgreen;
grid-column: span 4; /* 열 4cell*/
}
grid Container
에서 사용 가능한 공간을 뜻한다.
만약 grid-template-columns: repeat(4, 1fr)
이고
width: 500px
이면, 1개의 cell은 125px을 갖는다.
<div class="grid">
<div class="header">HEADER</div>
<div class="nav">NAV</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
.grid {
display: grid;
width: 500px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
}
.header {
background-color: red;
}
.nav {
background-color: black;
}
.content {
background-color: blue;
}
.footer {
background-color: yellowgreen;
}
두 속성 모두 기본값은 stretch
로, 각 cell
을 양옆으로 최대한 늘어난다.
cell
들의 너비/높이 설정이 없다면 양옆으로 최대한 늘어난다.
두개를 한꺼번에 설정할 수 있는 속성이다.
place-items: align(수직) justify(수평)
으로 설정할 수 있다.
두 속성의 기본값은 start
이다. grid 전체를 설정한다.
place-content: align(수직) justify(수펑)
을 설정한다.
두 속성은 각 cell
클래스에서 적용할 수 있다.
place-self: align(수직) justify(수평)
으로 설정할 수 있다.
.grid {
display: grid;
height: 100vh;
gap: 5px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(4, 100px);
}
.item {
background-color: yellowgreen;
}
브라우저 크기를 줄이면 어떻게 될까? 당연히 각 cell
의 너비도 줄어든다.
이 때, 최소 너비값을 설정하고 싶을 때 minmax
를 사용할 수 있다.
grid-template-colums: repeat(10, minmax(100px, 1fr));
로 설정해보자.
옆으로 스크롤이 생기고, 최소 너비값이 100px
이 된 것을 확인할 수 있다.
auto-fill
은 주어진 공간에 빈cell
이라도 생성하여 꽉 채운다.
auto-fit
은 주어진 공간에 cell
을 딱 맞춘다.
<!-- index.html -->
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
✅ auto-fill
.grid { display: grid; height: 100vh; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-template-rows: repeat(4, 100px); }
최소너비
100px
, 최대너비1fr
을auto-fill
로 설정
높이100px
에 4행 생성
div
가 5개밖에 없기 때문에 5개를 생성한다.
파란색박스처럼 빈 공간에도cell
을 생성하여 채운다.
✅ auto-fit
.grid { display: grid; height: 100vh; gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(4, 100px); }
최소너비
100px
, 최대너비1fr
을auto-fit
으로 설정
높이100px
에 4행 생성똑같이 주어진 크기에
div
5개를 생성한다.
최소너비100px
보다는 큰 너비로 생성되었다.
작은화면에서 두 속성은 동일하게 적용되지만
화면이 커지면 커질수록 다르게 적용되어 사용자에게 보여진다-!
min-context
content가 작아질 수 있는 만큼 작아지는 속성
max-content
content가 필요한 만큼 크게 만드는 속성
<div class="grid">
<div class="item">Text Text Text Text Text Text</div>
<div class="item">Text Text Text Text Text Text</div>
</div>
.grid {
display: grid;
height: 100vh;
gap: 5px;
grid-template-columns: max-content min-content;
grid-auto-rows: 100px; /* 각 cell height 100px */
}
.item {
background-color: yellowgreen;
}
div
안에 들어있는 내용을 토대로 스타일이 입혀졌다.
띄어쓰기를 안할 경우, 두 속성 모두 동일하게 보여진다.