CSS grid-template-columns: 그리드 열 정의 및 분할선 명명

CSS grid-template-columns 속성은 그리드 열의 선 이름과 트랙 크기 함수를 정의합니다.

.grid {
  grid-template-columns: 1fr 60px;
  /* grid-template-columns: 60px 60px; */
  /* grid-template-columns: 1fr 2fr; */
  /* grid-template-columns: 8ch auto; */
}

.grid {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  color: #fff;
  display: grid;
  gap: 8px;
  padding: 8px;
}
.item {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}
.item:nth-child(1) {
  background: #24c0a5;
}
.item:nth-child(2) {
  background: #0043ff;
}
.item:nth-child(3) {
  background: #b42809;
}
.item:nth-child(4) {
  background: #ffb800;
}
.item:nth-child(5) {
  background: #f0f0f0;
  color: #000;
}

<div class="grid">
  <div class="item">1번</div>
  <div class="item">2번</div>
  <div class="item">3번</div>
  <div class="item">4번</div>
  <div class="item">5번</div>
</div>

구문

/* 키워드 값 */
grid-template-columns: none;

/* <track-list> 값 */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/* <auto-track-list> 값 */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/* 전역 값 */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: revert;
grid-template-columns: revert-layer;
grid-template-columns: unset;

값

none

명시적 그리드가 없음을 나타냅니다. 모든 열은 암시적으로 생성되고, 그 크기는 grid-auto-columns에 의해 결정됩니다.

[linename]

이 위치의 열 분할선에 이름을 붙입니다. span과 auto 두 개의 예약어를 제외하면 아무 유효한 문자열(<custom-ident>)이나 사용 가능합니다. 선에 여러 이름을 붙일 수도 있는데, [line-name-a line-name-b]처럼 대괄호 안에 공백으로 구분된 이름을 나열하면 됩니다.

<length>

열의 너비를 지정하는 양의 길이입니다.

<percentage>

그리드 컨테이너의 인라인 크기에 상대적인 크기를 나타내는 양의 <percentage> 값입니다. 그리드 컨테이너의 크기가 트랙들의 크기에 의해 결정되는 경우라면 <percentage>는 auto로 취급됩니다.

<flex>

fr 단위를 붙인 양의 크기입니다. 트랙의 플렉스 계수를 지정합니다. 각각의 <flex> 크기 트랙들은 그리드 컨테이너의 남은 크기를 계수에 비례해 나눠가집니다.

minmax()의 매개변수가 아닌 단독 사용 시 minmax(auto, <flex>)로 해석됩니다. 즉 2fr은 minmax(auto, 2fr)과 같습니다.

max-content

그리드 트랙을 차지하는 그리드 아이템들의 최대 내용 기여 중 가장 큰 값을 나타내는 키워드입니다. 예를 들어 그리드 트랙의 첫 요소에는 텍스트 “Repetitio est mater studiorum”이 들어있고 두 번째 요소에는 “Dum spiro, spero”가 들어있다면, 최대 내용 기여는 그리드 트랙 요소의 문장들 중 가장 긴 것인 “Repetitio est mater studiorum”의 크기로 정의됩니다.

min-content

그리드 트랙을 차지하는 그리드 아이템들의 최소 내용 기여 중 가장 큰 값을 나타내는 키워드입니다. 예를 들어 그리드 트랙의 첫 요소에는 텍스트 “Repetitio est mater studiorum”이 들어있고 두 번째 요소에는 “Dum spiro, spero”가 들어있다면, 최소 내용 기여는 그리드 트랙 요소의 문장들에서 가장 긴 단어인 “studiorum”의 크기로 정의됩니다.

minmax(min, max)

트랙의 크기를 min 이상 max 이하로 정의하는 함수입니다. max가 min보다 작으면 max는 무시되고 함수는 min과 같은 것으로 처리합니다. 최대 값으로 <flex>를 지정하면 트랙의 플렉스 계수를 설정합니다. 최소 값에는 <flex>를 지정할 수 없습니다.

auto

최대 크기로서 사용 시, 트랙 내 아이템들의 max-content 중 제일 큰 것을 나타냅니다.

최소 크기로서 사용 시, 트랙 내 아이템들의 최소 크기 (min-width, min-height) 중 제일 큰 것을 나타냅니다. 언제나 그런 건 아니지만 대개 min-content 크기와 같습니다.

minmax()의 매개변수가 아닌 단독 사용 시, 최대 크기로서 사용했을 때와 최소 크기로서 사용했을 때의 사이를 나타냅니다. 대부분의 경우 minmax(min-content, max-content)와 비슷하게 동작합니다.

auto 트랙 크기는 [align-content]와 [justify-content] 속성에 의해 늘어날 수 있습니다. 따라서 기본 설정에서 auto 크기의 트랙은 그리드 컨테이너의 남은 공간을 모두 차지합니다.

fit-content( [ <length> | <percentage> ] )

max(minimum, min(limit, max-content))와 같습니다. minimum은 auto 최소 값이고, limit은 fit-content()의 매개변수로 전달한 트랙 크기 함수와 같습니다. 결론적으로 minmax(auto, max-content)와 minmax(auto, limit) 중 작은 것으로 계산됩니다.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

트랙 정의를 반복합니다. 동일한 규칙의 그리드 열이 반복되는 경우 더 간결한 형태로 정의할 때 사용할 수 있습니다.

subgrid

이 그리드 컨테이너가 다른 그리드(부모 그리드)의 아이템일 때, 부모 그리드의 열에서 자신이 차지한 영역들의 열 정의를 상속합니다.

masonry

이 열을 벽돌 패턴 (masonry) 알고리즘에 따라 배치하도록 합니다.

명세

• CSS Grid Layout Module Level 2 #subgrids
• CSS Grid Layout Module Level 2 #track-sizing

브라우저 호환성

같이 보기

• 그리드 정의 단축 속성: grid-template
• 그리드 영역 정의: grid-template-areas
• 그리드 행 정의: grid-template-rows