CSS Grid
수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 그리드는 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다.
그리드은 columns, rows로 구성되며, 각 행과 열 사이에 공백이 있는데, 이를 일컬어 gutters라고 부른다.
grid-templates-columns / grid-templates-rows
.container {
display: grid;
grid-templates-columns: 그리드 요소 열 너비;
grid-templates-rows: 그리드 요소 행 높이;
grid-gap: 간격;
}.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: 20px;
}
1. grid-templates-Areas로 영역 잡기
그리드 템플릿 영역 규칙
1. grid 내부에 grid-area의 영역이 직사각형인가?
(ex. 'ㄱ' 또는 'ㄴ'의 모양은 지원하지 않음)
2. grid 내부에 grid-area의 영역이 전부 이어져 있는가?
(ex. 같은 영역이 둘로 쪼개져 있으면 안됨)
3. minmax() 함수
minmax는 트랙의 최소 및 최대 크기를 설정할 수 있게 해줍니다.
예를 들어 minmax(100px, auto). 최소 크기는 100 픽셀이지만 최대 크기는 auto로써 콘텐츠에 들어맞게 확장됩니다.
최소최대값을 사용하려면 grid-auto-rows를 변경하면 됩니다.
.grid{
display:grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: 100px repeat(2, 200px) 100px;
grid-template-areas:
"header header header header"
"content content . nav"
"content content . nav"
"footer footer footer footer"
}
.header{
background-color: green;
grid-area: header;
}
.content{
background-color: skyblue;
grid-area: content;
}
.nav{
background-color: violet;
grid-area: nav;
}
.footer{
background-color: orange;
grid-area: footer;
}<body>
<div class="grid">
<div class="header">1</div>
<div class="content">2</div>
<div class="nav">3</div>
<div class="footer">4</div>
</div>
</body>
2.rows and columns로 영역 잡기
숫자는 그리드 갭의 순서임!
작성하는 방법 short cut 알아두기!
그리드에 사물을 배치하는 경우, 그리드에는 항상 라인이 있으며, 이 라인은 1에서 시작한다. 따라서 영어에서는 열 라인 1은 그리드의 왼쪽에 위치하고 행 라인 1은 맨 위에 있습니다.
.grid{
display:grid;
gap: 10px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
.header{
background-color: green;
문법 1️⃣
grid-column-start: 1;
grid-column-end: 5;
문법 2️⃣
grid-column: 1 / 5;
문법 3️⃣
grid-column: span 4;
}
.content{
background-color: skyblue;
1️⃣ grid-column-start: 1;
grid-column-end: 4;
2️⃣ grid-column: 1 / 4;
3️⃣ grid-column: 1 / -2;
1️⃣ grid-row-start: 2;
grid-row-end: 4;
2️⃣ grid-row: 2 / 4 ;
3️⃣ grid-row: span 2;
}
.nav{
background-color: violet;
1️⃣ grid-column-start: 4;
grid-column-end: 5;
2️⃣ grid-column: 4 / 5;
1️⃣ grid-row-start: 2;
grid-row-end: 4;
2️⃣ grid-row: 2 / 4;
3️⃣ grid-row: span 2;
}
.footer{
background-color: orange;
1️⃣ grid-column-start: 1;
grid-column-end: 5;
2️⃣ grid-column: 1 / 5;
}Grid Template
block 요소는 width와 height이 주어져 있지 않을 경우, width는 최대값으로 heigthdms '0'으로 표현된다.
따라서, grid container에 height값을 지정해 줘야한다.
가변 그리드
fr 단위를 포함한 가변 그리드.
길이와 백분율을 사용하여 그리드를 생성하는 것 외에도 fr 단위를 사용하여 그리드 행과 열을 가변적으로 조정할 수 있다. 동 단위는 그리드 컨테이너 내부에 사용 가능한 공간에서 한 개의 분할 부분과 같습니다.
트랙 목록을 다음과 같이 정의로 변경하여, 세 개의 1fr 트랙을 생성합니다.
fr = fraction(부분)
gird에서 사용 가능한 공간을 뜻하며 fr값 비율로 공간을 나눈다.
grid-template:
"header header header header" 1fr <-높이값
"content content content nav" 1fr <-높이값
"footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;
row 높이 /Column 너비적용 예)
.grid{
display:grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: 100px repeat(2, 200px) 100px;
grid-template-areas:
"header header header header"
"content content . nav"
"content content . nav"
"footer footer footer footer"
}
.header{
background-color: green;
grid-area: header;
}
.content{
background-color: skyblue;
grid-area: content;
}
.nav{
background-color: violet;
grid-area: nav;
}
.footer{
background-color: orange;
grid-area: footer;
}
minmax()
The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS Grids.
최소값과 최대값을 정의하는 CSS 함수.
.grid{
display:grid;
grid-template-columns: repeat(5, minmax(100px, 1fr);
grid-template-rows: repeat(2, 200px);
}
=> columns의 너비는 100px이고 최대값은 1fr인 요소가 5개 반복된다.