[CSS] grid 속성들 정리

📌 flex vs grid ?

아이템을 자유자재로 배치할 수 있는 CSS Layout 에는 flex 와 grid 가 있다.

• flex : 아이템을 1차원적으로 배치할 수 있음 (가로 or 세로)
• grid : 아이템을 2차원적으로 배치할 수 있음 (가로 and 세로)

 

📌 grid 사용법

1. 부모 컨테이너에 display: grid 를 지정한다.

2. grid 안에 들어 있는 자식들은 각각 grid cell 로 변환된다.

 

📌 grid 속성들 정리

부모 속성들

► grid-template-columns : 컨테이너 열(column)의 크기 지정

 

► grid-template-rows : 컨테이너 행(row)의 크기 지정

► grid-auto-rows : 컨테이너 행(row)이 몇 줄인지 모를 때, 전체적으로 자동으로 사이즈 지정

 

► grid-gap : cell 들 사이 사이의 간격 지정 (*전체 컨테이너의 간격을 지정하려면 padding 을 추가하면 됨)

 

.container {
  display: grid;
  
  /* grid-template-columns: 100px 100px 100px 100px 100px; */
  grid-template-columns: repeat(5, 100px);
  /* grid-template-columns: 1fr 2fr 1fr; */

  grid-auto-rows: minmax(150px, auto);

  grid-gap: 10px;
}

• repeat(반복횟수, 반복값) : 반복되는 값을 자동으로 처리할 수 있는 함수
• fr (= fraction) : 숫자 비율대로 크기를 나눔 (* grid 는 보통 반응형 레이아웃을 만들 때 사용하므로, px 보다는 fr 단위를 활용하자)
  위의 1fr 2fr 1fr 의 의미는 '사용 가능한 너비를 4개로 나눠서 각각의 배율로 보여준다' 이다.
• minmax() : 최솟값과 최댓값을 지정할 수 있는 함수
  위의 minmax(150px, auto) 의 의미는 '(아이템이 없어도) 최소 높이는 항상 150px 로 유지하되, 아이템이 많은 경우 자동적으로 늘어나게 함' 이다.

---

자식 (cell) 속성들

grid line 을 통해 각 cell 이 차지하는 범위를 정할 수 있다.

* grid line ?

- column/row 기준으로 제일 왼쪽부터 1, 2, 3, 4 ... 번호 값 증가

- 끝부터 지정하려면 제일 오른쪽부터 -1, -2, -3, -4 .. 번호 값 감소

 

► grid-column-start : 열(column)의 시작 번호 지정

► grid-column-end : 열(column)의 끝 번호 지정

► grid-column : 위 두 개 속성의 축약형

 

► grid-row-start : 행(row)의 시작 번호 지정

► grid-row-end : 행(row)의 끝 번호 지정

► grid-row : 위 두 개 속성의 축약형

 

.item2 {
  /* grid-column-start: 2; */
  /* grid-column-end: 4; */
  /* grid-column: 2 / 4; */
  grid-column: 2 / span 2;

  /* grid-row-start: 1; */
  /* grid-row-end: 3; */
  grid-row: 1 / 3;
}

• span + 몇 개의 cell 을 차지하게 할 것인지 : grid line count 가 귀찮을 때 사용하는 방법

---

grid line 을 통해 범위를 정하지 않고, grid area 에 이름을 붙이고 그 이름으로 범위를 정하는 방식이 있다. (편리)

 

► grid-template-areas : (부모 컨테이너에) 각자 차지하는 셀의 개수만큼 해당 위치에 이름을 붙임

► grid-area : (자식 요소에) 이름을 지정해줌

 

/* 부모 컨테이너 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  grid-gap: 1rem;
  grid-template-areas:
    'a a a'
    'b c c'
    'b d g'
    'e f g';
}

/* 자식 요소 */
.image1 {
  grid-area: a;
}

.image2 {
  grid-area: b;
}

.image3 {
  grid-area: c;
}

.image4 {
  grid-area: d;
}

.image5 {
  grid-area: e;
}

.image6 {
  grid-area: f;
}

.image7 {
  grid-area: g;
}