grid-template-columns

시도해 보기

grid-template-columns: 60px 60px;

grid-template-columns: 1fr 60px;

grid-template-columns: 1fr 2fr;

grid-template-columns: 8ch auto;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 200px;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

구문

/* 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 속성에 의해 결정됩니다.

• [linename]

  • 해당 위치의 각 열에 대한 이름을 명시하는 <custom-ident> 입니다. ident는 예약어인 span 이나 auto를 제외한 어떤 문자열이든 올 수 있습니다. 행에는 [line-name-a line-name-b]와 같이 대괄호 안에 공백으로 구분된 여러 이름을 가질 수 있습니다.
• <length>
  • 음수가 아닌 길이, 열의 너비를 나타냅니다.
• <percentage>

  • 음수가 아닌 그리드 컨테이너의 내부 크기에 상대적인 <percentage> 값입니다. 만약 그리드 컨테이너의 크기가 트랙의 크기에 따라 달라지는 경우, 백분율을 auto로 처리해야 합니다.

    트랙의 본질적인 크기 기여는 그리드 컨테이너의 크기로 조정될 수 있으며, 트랙의 최종 크기를 백분율에 맞는 최소 크기 만큼 증가시킬 수 있습니다.

• <flex>

  • 트랙의 Flex 요소를 지정하는 fr 단위를 가지는 음이 아닌 치수입니다. 각각의 <flex>에 크기가 정해진 트랙은 flex 요소에 비례하여 나머지 공간을 차지합니다.

    minmax() 외부에서 사용하면, 이는 자동 최소값 즉 minmax(auto, <flex>)를 의미합니다.

• 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 요소를 설정합니다. <flex> 값은 최소값으로는 유효하지 않습니다.

• auto

  • 최대값으로 트랙 내 모든 아이템 중 가장 큰 max-content 를 나타냅니다.

    최소값으로 트랙 내 모든 아이템 중 최대 최소 크기를 나타냅니다. (아이템들의 min-width/min-height로 명시되어있습니다.) 이것은 항상은 아니지만 주로 min-content 크기 값입니다.

    만약 minmax() notation 외부에서 사용된다면, auto는 위에 명시된것과 같이 최소, 최대값 사이의 범위를 나타냅니다. 이것은 대부분 minmax(min-content,max-content)와 유사하게 동작합니다.

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

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

  • max(minimum, min(limit, max-content)) 공식을 의미합니다. minimum이 auto 최소값(항상은 아니지만 주로 min-content의 최소값과 동일한), limit은 fit-content()의 인자로 전달되는 트랙 크기를 결정하는 함수입니다. 이 값은 주로 minmax(auto, max-content) 와 minmax(auto, limit)에서 작은 값으로 계산됩니다.
• repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
  • 트랙 목록에서 반복되는 조각을 의미합니다. 반복 패턴을 나타내는 많은 수의 열을 보다 간결한 형태로 작성할 수 있습니다.

• masonry

  • masonry 값은 이 축이 masonry 알고리즘에 따라 배치되어야 함을 나타냅니다.

• subgrid

  • subgrid 값은 그리드가 해당 축에서 부모 그리드의 spanned 부분을 채택함을 나타냅니다. 그리드 행/열의 크기는 명시적으로 지정되지 않고 상위 그리드의 정의에서 가져옵니다.

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

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

형식 정의

형식 구문

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>* ']'  

<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>? <track-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>  

<integer> = 
  <number-token>  

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

예시

그리드 열 크기 지정하기

HTML

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

CSS

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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

ê²°ê³¼

명세서

브라우저 호환성

같이 보기

• 연관 CSS 속성: grid-template-rows, grid-template-areas, grid-template
• 그리드 레이아웃 안내서: Basic concepts of grid layout - Grid Tracks
• 영상 설명서: Defining a Grid
• Subgrid