HTML, CSS (3)

CSS grid

display

grid : Block 특성을 가진 그리드 컨테이너를 정의한다.

inline-grid : Inline 특성을 가진 그리드 컨테이너를 정의한다.

 

grid-template-rows

.container {
  display: grid;
  grid-template-rows: 1행크기 2행크기 ...;
}

명시적으로 행의 크기를 정의한다.

fr(fraction, 공간 비율) 단위와 repeat() 함수를 사용할 수 있다.

 

grid-template-columns

.container {
  display: grid;
  grid-template-columns: 1열크기 2열크기 ...;
}

 

명시적으로 열의 크기를 정의한다.

fr(fraction, 공간 비율) 단위와 repeat() 함수를 사용할 수 있다.

 

repeat()

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: repeat(4, 1fr 2fr);
  gap: 10px;
}

.item {
  background-color: pink;
  font-size: 36px;
}

grid-template-rows 와 grid-template-columns 속성에서 repeat() 함수를 통해 행과 열을 반복할 수 있다.

repeat() 함수는 반복 횟수와 크기를 인수로 사용한다.

repeat(4, 1fr 2fr) 은 1fr 2fr 을 4번 반복한다는 의미이다.

 

row-gap

각 행 사이의 간격을 지정한다. (각각의 행 사이에 있는 그리드 선의 크기를 지정한다.)

 

column-gap

각 열 사이의 간격을 지정한다. (각각의 열 사이에 있는 그리드 선의 크기를 지정한다.)

 

grid-auto-flow

배치하지 않은 아이템을 어떤 방식의 자동 배치 알고리즘으로 처리할지 정의한다.

배치한 아이템은 grid-area 를 사용한 아이템을 의미한다.

 

row : 각 행 축을 따라 차례대로 배치한다.

column : 각 열 축을 따라 차례대로 배치한다.

row dense 각 행 축을 따라 차례대로 배치하고 빈 영역을 메운다.

column dense : 각 열 축을 따라 차례대로 배치하고 빈 영역을 메운다.

 

[ row ]

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
  gap: 10px;
}

.item {
  background-color: lightpink;
  border: 6px solid;
  font-size: 36px;
}

.item:nth-child(2) {
  grid-column: span 3;
}

 

[ row dense ]

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  gap: 10px;
}

.item {
  background-color: lightpink;
  border: 6px solid;
  font-size: 36px;
}

.item:nth-child(2) {
  grid-column: span 3;
}

 

[ column ]

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
  gap: 10px;
}

.item {
  background-color: lightpink;
  border: 6px solid;
  font-size: 36px;
}

.item:nth-child(1) {
  grid-column: 2 / span 2;
}

.item:nth-child(2) {
  grid-column: span 2;
}

 

[ column dense ]

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column dense;
  gap: 10px;
}

.item {
  background-color: lightpink;
  border: 6px solid;
  font-size: 36px;
}

.item:nth-child(1) {
  grid-column: 2 / span 2;
}

.item:nth-child(2) {
  grid-column: span 2;
}

 

align-content

그리드 콘텐츠를 수직 정렬한다.

여러 줄을 수직 정렬할 경우 사용한다.

 

normal : stretch 와 같음 (기본값)

start : 시작점 정렬 (위)

center : 수직 가운데 정렬

end : 끝점 정렬 (아래)

space-around : 각 행 위아래에 여백을 동일하게 정렬

space-between : 첫 행은 시작점에, 끝 행은  끝점에 정렬되고 나머지 여백으로 동일하게 정렬

space-evenly : 모든 여백을 동일하게 정렬

stretch : 열 축을 채우기 위해 그리드 콘텐츠를 늘림

 

justify-content

그리드 콘텐츠를 수평 정렬한다.

그리드 콘텐츠의 가로 너비가 그리드 컨테이너보다 작아야 한다.

 

normal : stretch 와 같음 (기본값)

start : 시작점 정렬 (왼쪽)

center : 수평 가운데 정렬

end : 끝점 정렬 (오른쪽)

space-around : 각 열 좌우에 여백을 동일하게 정렬

space-between : 첫 행은 시작점에, 끝 행은  끝점에 정렬되고 나머지 여백으로 동일하게 정렬

space-evenly : 모든 여백을 동일하게 정렬

stretch : 행 축을 채우기 위해 그리드 콘텐츠를 늘림

 

align-items

그리드 아이템들을 수직 정렬한다.

한 줄을 수직 정렬할 경우 사용한다.

 

normal : stretch 와 같음 (기본값)

start : 시작점 정렬 (위)

center : 수직 가운데 정렬

end : 끝점 정렬 (아래)

stretch : 열 축을 채우기 위해 그리드 아이템을 늘림

 

justify-items

그리드 아이템들을 수평 정렬한다.

한 줄을 수평 정렬할 경우 사용한다.

 

normal : stretch 와 같음 (기본값)

start : 시작점 정렬 (왼쪽)

center : 수평 가운데 정렬

end : 끝점 정렬 (오른쪽)

stretch : 행 축을 채우기 위해 그리드 아이템을 늘림

 

align-self

각각의 그리드 아이템을 수직 정렬한다.

grid item 에서 사용하는 속성이다.

 

justify-self

각각의 그리드 아이템을 수평 정렬한다.

grid item 에서 사용하는 속성이다.

 

order

그리드 아이템이 자동 배치되는 순서를 변경할 수 있다.

숫자가 작을 수록 먼저 배치된다.

grid item 에서 사용하는 속성이다.

---

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  border: 6px solid;
  background-color: pink;
  font-size: 36px;
}

.item:nth-child(1) {
  grid-column: span 2;
}

grid-column: span 2; 는 열을 2개의 셀로 확장한다는 것을 의미한다.

1번째인 item 클래스를 가진 요소는 두 개의 열 만큼 늘어난다.

---

.item:nth-child(1) {
  grid-column: span 2;
}

.item:nth-child(2) {
  grid-column: span 2;
}

두번째인 item 클래스를 가진 요소도 span 2 값을 주었다.

그리드는 grid-auto-flow 값을 따로 지정하지 않으면 기본적으로 아래로 지그재그인 방향으로 쌓인다.

1번 요소의 오른쪽에는 하나의 셀 자리밖에 없기 때문에 두 개의 셀을 차지하기 위해 아래 행으로 내려오게 된다.

---

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-flow: row dense;
}

 

1번 요소의 오른쪽을 빈 셀을 채우고 싶은 경우 그리드 컨테이너에서 grid-auto-flow 를 지정하면 된다.

grid-auto-flow: row dense; 를 지정하면 아래로 지그재그인 방향으로 쌓이면서 빈 공간을 메운다.

---

.item:nth-child(2) {
  grid-column: span 2;
}

4번째 item 클래스를 가진 요소에 grid-column: span 2; 를 지정하면 4번째 요소의 행이 두 셀로 확장된다.

---

.item:nth-child(4) {
  grid-column: 2 / 4;
}

grid-column 속성에 라인 이름(숫자)을 지정하여 2번 라인부터 4번 라인까지 열 방향으로 만들어진다.

첫번째 숫자는 grid-column-start 속성이고, 두번째 숫자는 grd-column-end 속성이다.

---

.item:nth-child(4) {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

2번 라인부터 4번 라인까지 열 방향으로 만들면서, 3번 라인부터 4번 라인까지 행 방향으로 만들어진다.

따라서 위의 결과와 동일하다.

 

.item:nth-child(4) {
  grid-column: 2 / -1;
  grid-row: 3 / -1;
}

각 행과 열의 가장 마지막 라인은 -1 으로 표현이 가능하다.

라인 1, 2, 3, 4는 각각 -4, -3, -2, -1 로 표현될 수 있다.

---

.item:nth-child(1) {
  grid-column: span 2;
}

.item:nth-child(2) {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.item:nth-child(4) {
  grid-column: 2 / -1;
  grid-row: 3 / -1;
}

span 을 사용하면 정렬하는 것이고, 라인을 사용하면 배치하는 것이다.

두번째와 네번째 아이템을 배치했기 때문에 겹치는 경우가 발생할 수 있다.

이런 경우 두 번째 아이템에 z-index: 1; 을 적용하면 해결된다.

---

minmax()

.container {
  grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
}

행/열의 최소/최대 크기를 정의한다.

첫 번째 인수는 최솟값, 두 번째 인수는 최댓값이다.

 

fit-content()

행/열의 크기를 그리드 아이템이 포함하는 내용의 크기에 맞춘다.

내용의 최대 크기를 인수로 사용한다.

fit-content(300px) 로 지정하면 내용의 최대 크기는 300px 이 된다.

.container {
  grid-template-columns: fit-content(300px) fit-content(300px);
}

 

fr (fractional unit)

.container {
  grid-template-columns: 1fr 2fr 100px 25%;
}

사용 가능한 공간에 대한 비율을 의미한다.

위 코드는 그리드 컨테이너의 3번째 컬럼에 100px, 4번째 컬럼에 25% 를 사용하고,

남은 공간을 1번째 컬럼에 1/3, 2번째 컬럼에 2/3 만큼 사용한다.

 

min-content / max-content

.container {
  grid-template-columns: min-content 1fr;
}

그리드 아이템이 포함하는 내용의 최소/최대 크기를 의미한다.

한글을 사용하는 경우에는 word-break: keep-all; 을 설정하면 정상적으로 동작한다.

 

auto-fill / auto-fit

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

행/열의 개수를 그리드 컨테이너 및 행/열 크기에 맞게 자동으로 조정한다.

repeat() 함수와 함께 사용하며, 행/열과 아이템 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용하다. (반응형 그리드)

 

auto-fill 은 그리드 컨테이너가 하나의 행/열에 모든 아이템을 수용하고 남는 공간을 그대로 유지한다.

 

auto-fit 은  그리드 컨테이너가 하나의 행/열에 모든 아이템을 수용하고 남는 공간을 축소하여 하나의 행/열을 모두 채운다.