grid-template-columns

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

grid-template-columns CSS 속성은 grid columns의 열 이름과 트랙 크기 조정 함수들을 정의합니다.

시도해보기

구문

css
/* Keyword value */
grid-template-columns: none;

/* <track-list> values */
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> values */
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];

/* Global values */
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 (en-US) 속성에 의해 결정됩니다.
  • [linename]
    • 해당 위치의 각 열에 대한 이름을 명시하는 <custom-ident> (en-US) 입니다. ident는 예약어인 span 이나 auto를 제외한 어떤 문자열이든 올 수 있습니다. 행에는 [line-name-a line-name-b]와 같이 대괄호 안에 공백으로 구분된 여러 이름을 가질 수 있습니다.
  • <length>
    • 음수가 아닌 길이, 열의 너비를 나타냅니다.
  • <percentage>
    • 음수가 아닌 그리드 컨테이너의 내부 크기에 상대적인 <percentage> 값입니다. 만약 그리드 컨테이너의 크기가 트랙의 크기에 따라 달라지는 경우, 백분율을 auto로 처리해야 합니다. 트랙의 본질적인 크기 기여는 그리드 컨테이너의 크기로 조정될 수 있으며, 트랙의 최종 크기를 백분율에 맞는 최소 크기 만큼 증가시킬 수 있습니다.
  • <flex> (en-US)
    • 트랙의 Flex 요소를 지정하는 fr 단위를 가지는 음이 아닌 치수입니다. 각각의 <flex>에 크기가 정해진 트랙은 flex 요소에 비례하여 나머지 공간을 차지합니다. minmax() 외부에서 사용하면, 이는 자동 최소값 즉 minmax(auto, <flex>)를 의미합니다.
  • max-content (en-US)
    • 그리드 트랙을 차지하는 그리드 항목의 가장 큰 최대 콘텐츠 기여도를 의미합니다. 예를 들어, 만약 그리드 트랙의 첫번째 요소가 "Repetitio est mater studiorum"라는 문장을 포함하고, 두번째 요소가 "Dum spiro, spero"라는 문장을 포함한다면, 최대 콘텐츠 기여는 모든 그리드 요소 중에서 가장 긴 "Repetitio est mater studiorum"의 크기로 지정됩니다.
  • min-content (en-US)
    • 그리드 트랙을 차지하는 그리드 항목의 가장 큰 최소 콘텐츠 기여도 를 나타냅니다. 예를 들어 그리드 트랙의 첫번째 요소가 "Repetitio est mater studiorum"라는 문장을 포함하고, 두번째 요소가 "Dum spiro, spero"라는 문장을 포함한다면, 최소 콘텐츠 기여는 모든 그리드 요소 중에서 가장 긴 단어인 "studiorum"의 크기로 지정됩니다.
  • minmax(min, max) (en-US)
    • min 이상 max 이하의 사이즈 범위를 정의하는 함수 표기입니다. max가 min보다 작다면, max는 무시되고 이 함수는 min으로 처리됩니다. 최대값으로서 <flex> 값은 트랙의 flex 요소를 설정합니다. <flex> 값은 최소값으로는 유효하지 않습니다.
  • auto
    • 최대값으로 트랙 내 모든 아이템 중 가장 큰 max-content (en-US) 를 나타냅니다. 최소값으로 트랙 내 모든 아이템 중 최대 최소 크기를 나타냅니다. (아이템들의 min-width/min-height로 명시되어있습니다.) 이것은 항상은 아니지만 주로 min-content (en-US) 크기 값입니다. 만약 minmax() (en-US) notation 외부에서 사용된다면, auto는 위에 명시된것과 같이 최소, 최대값 사이의 범위를 나타냅니다. 이것은 대부분 minmax(min-content,max-content)와 유사하게 동작합니다.

      참고: auto 트랙 크기는 (그리고 오직 auto 트랙 크기만) align-contentjustify-content 요소에 의해 확장될 수 있습니다. 그러므로 기본적으로 auto에 크기가 지정된 트랙은 그리드 컨테이너의 나머지 공간을 차지합니다.

  • fit-content( [ <length> | <percentage> ] ) (en-US)
    • max(minimum, min(limit, max-content)) 공식을 의미합니다. minimum이 auto 최소값(항상은 아니지만 주로 min-content (en-US)의 최소값과 동일한), limit은 fit-content()의 인자로 전달되는 트랙 크기를 결정하는 함수입니다. 이 값은 주로 minmax(auto, max-content)minmax(auto, limit)에서 작은 값으로 계산됩니다.
  • repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) (en-US)
    • 트랙 목록에서 반복되는 조각을 의미합니다. 반복 패턴을 나타내는 많은 수의 열을 보다 간결한 형태로 작성할 수 있습니다.
  • masonry (en-US) Experimental
    • masonry 값은 이 축이 masonry 알고리즘에 따라 배치되어야 함을 나타냅니다.
  • subgrid (en-US)
    • subgrid 값은 그리드가 해당 축에서 부모 그리드의 spanned 부분을 채택함을 나타냅니다. 그리드 행/열의 크기는 명시적으로 지정되지 않고 상위 그리드의 정의에서 가져옵니다.

경고 masonry 값은 그리드 명세서의 3 단계에 있으며 현재 파이어 폭스의 flag에는 실험적인 기능만 구현되어 있습니다.

subgrid 값은 그리드 명세서의 2 단계에 있으며 현재 Firefox 71 이상에서만 구현되어 있습니다.

형식 정의

초기값none
적용대상grid containers
상속no
Percentagesrefer to corresponding dimension of the content area
계산 값as specified, but with relative lengths converted into absolute lengths
Animation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list

형식 구문

grid-template-columns = 
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?

<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

<line-name-list> =
[ <line-names> | <name-repeat> ]+

<line-names> =
'[' <custom-ident> (en-US)* ']'

<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )

<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto

<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto

<length-percentage> =
<length> |
<percentage>

<fixed-breadth> =
<length-percentage [0,∞]>

예시

그리드 열 크기 지정하기

HTML

html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

css
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

결과

명세서

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

브라우저 호환성

BCD tables only load in the browser

같이 보기