[CSS] 그리드 레이아웃(Grid Layout)

 

Grid Layout

 

---

 

그리드 레이아웃이란

그리드 레이아웃(Grid Layout)이란 열과 행을 이용하여 인터페이스 요소들을 배치하는 2차원 레이아웃 모델입니다. (참고: Flexbox는 1차원 레이아웃 모델)

Grid Layout은 기본적으로 그리드 컨테이너(grid container)와 컨테이너내에 배치되는 요소인 그리드 아이템(item)으로 이루어져있습니다. 외부 엘리먼트(부모 요소)에 display: grid; 또는 display: inline-grid;를 선언함으로써 grid container를 만들 수 있습니다. 내부 엘리먼트(자식 요소)는 자동적으로 grid item이 됩니다.

• display: grid; : Block 특성의 grid container를 정의
• display: inline-grid; : Inline 특성의 grid container를 정의

 

 

기본 용어 이해

트랙(track) : 하나의 열(row) 또는 하나의 행(column)

라인(line) : 트랙과 트랙 사이의 간격

셀(cell) : grid item이 배치되는 최소 단위의 영역

영역(area) : (grid item이 배치되는) 하나 이상의 셀로 이루어진 영역

 

 

그리드에서 자주 사용되는 함수 및 키워드

repeat()

repeat(반복되는 횟수, 행 또는 열의 크기 정의) 함수를 이용하여 grid item의 트랙 크기를 반복하여 정의할 수 있습니다.

/* 5x12컬럼 그리드 */
.container {
  grid-template-rows: 1fr 3fr 3fr 3fr 2fr
  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
}

/* 5x12컬럼 그리드를 repeat()함수로 정의 */
.container {
  grid-template-rows: 1fr repeat(3, 3fr) 2fr;
  grid-template-columns: repeat(6, 1fr 2fr);
}

 

 

minmax()

minmax(최소값, 최대값) 함수를 이용하여 grid container의 크기 변화에 따른 grid item의 최소/최대 크기를 정의할 수 있습니다. 일반 요소에서 min-width나 max-width를 지정해주는 것과 유사합니다.

/* 가로와 세로 길이가 최소 100px, 최대 1fr인 3x4 그리드 */
.container {
  grid-template-rows: repeat(3, minmax(100px, 1fr));
  grid-template-columns: repeat(4, minmax(100px, 1fr));
}

 

 

auto-fill

repeat() 함수와 함께 사용하며, 행/열의 개수를 grid container 크기에 맞게 자동적으로 조정합니다. grid container 크기가 증가할 경우, 증가한 공간만큼 채울(fill) 수 있도록 cell의 개수가 증가합니다. grid item의 수가 상대적으로 적을 경우 증가한 공간은 빈 트랙으로 남겨집니다. 

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

 

 

auto-fit

repeat() 함수와 함께 사용하며, 행/열의 크기를 grid container 크기에 맞게 자동적으로 조정합니다. grid container 크기가 증가할 경우, 증가한 공간에 맞을(fit) 수 있도록 트랙의 크기(열/행)가 증가합니다. 따라서 grid item의 갯수에 따라 빈 공간이 만들어지기도 하는 auto-fill과 달리 항상 트랙이 채워져 있습니다.

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

 

 

min-content()

grid item이 포함하는 컨텐츠(contents)의 최소 크기를 지정합니다.

/* 4행 그리드에서 첫번째 행을 (컨텐츠를 고려한)최소 크기로 축소 */
.container {
  grid-template-columns: min-content 1fr 2fr 1fr;
}

 

 

max-content()

grid item이 포함하는 컨텐츠(contents)의 최대 크기를 지정합니다.

/* 4행 그리드에서 첫번째 행을 (컨텐츠를 고려한)최대 크기로 지정 */
.container {
  grid-template-columns: max-content 1fr 2fr 1fr;
}

 

 

 

 

 

※ 참고자료

1. MDN web docs : https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

2. 노마드코더/바닐라JS로 그림 앱 만들기 : https://nomadcoders.co/javascript-for-beginners-2

3. HEROPY Tech : https://heropy.blog/2019/08/17/css-grid/