[CSS] Grid

Grid

- display의 속성값 중 하나인 이차원 레이아웃

- columns, rows로 구성되며, 공백은 gutters라고 부름

- 상품 페이지에 주로 쓰임

 

Creating your grid in CSS

1. 그리드 정의하기

- .container의 직계 자식들은 item이 됨

.container {
  display: grid;
}

 

2. 그리드 열 추가하기

- 하나의 인자가 1 column이 되어, 총 200px column이 3개가 됨

- 길이와 백분율을 사용하여 그리드를 생성할 수 있음

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

 

- fr 단위를 사용하여 그리드의 행, 열을 가변적으로 조정가능 함

- 각 인자마다 공간의 비율을 나눠가짐 (1fr 2fr 1fr 이라면, 1:2:1로 공간이 나눠짐)

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

- fr이 반복된다면, repeat()를 통해 간소화

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}


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

 

3. 트랙 사이의 간격

- columns-gap, rows-gap, gap을 통해 간격을 만듦

- 간격은 길이, 백분율로 설정 가능 (fr은 x)

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
}

 

4. 암시적 그리드와 명시적 그리드

1. 명시적 그리드: grid-template-columns 또는 grid-template-rows을 사용하여 생성

2. 암시적 그리드:  콘텐츠가(즉, item이) 추가되면, 추가 그리드 선을 그려 정의된 명시적 그리드를 확장

- grid-auto-rows, grid-auto- columns 사용

- grid-auto-rows이 100px이면, 행의 높이가 100픽셀인 트랙이 추가됨

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

 

5. minmax()

- 트랙의 최소, 최대 크기를 설정

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

 

6. 들어맞을 때까지 열 생성

- 컨테이너에 들어갈 수 있을 만큼의 열을 생성

- auto-fit 키워드를 통해 열의 개수를 자동으로 설정

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
}

 

7. 라인 기반 배치

- 그리드에 있는 라인을 통해 트랙 생성

- 요소들이 겹칠때 사용하며, 잘 쓰이지 않음 (주로 span 사용)

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

 

8. gird-auto-flow

- 트랙들이 흐르듯이 차례대로 각 행 or 열에 자동 배치되며, 배치하면서 공간이 부족하면 행 or 열이 추가됨

- row dense처럼 dense를 사용하면, 빈 자투리 공간을 순서 상관없이 사이즈 맞는 트랙을 가져와 빽빽히 채움

- row가 기본값이기 때문에 row dense 대신 dense으로 사용 가능

.wrap {
  background-color: bisque;
  padding: 1rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, 1fr);
  grid-auto-flow: dense;
}

 

 

+ 

라인 기반 위치 외에 grid-template-areas로도 위치를 잡을 수도 있다.

자세한 내용은 참고 자료를 참고하자

 

 

auto에 대해서 글쓰자

 

 

 

+

grid-template-rows을 사용하기 보다 grid-auto-rows 사용을 추천함

나중에 단이 추가라도 자동으로 맞춰지기 때문임

 

---

[참고 자료] https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

grid-template-areas - CSS: Cascading Style Sheets | MDN

 

[출처] https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids

그리드 - Web 개발 학습하기 | MDN