Properties

Properties

Editing
  • account_tree
  • bug_report

grid-template-columns

그리드 레이아웃에서 열의 수와 너비를 명시적으로 지정한다.

설명

값은 공백으로 구분된 목록이며 각 값은 각 열의 크기로 지정된다.

사용 가능한 값 타입

〈'grid-template-columns'〉

  • none | <track-list> | <auto-track-list> | subgrid <line-name-list>?
    CSS Grid Layout Module Level 2

사용되는 키워드

  • none

    명시적 그리드 트랙이 이 속성에 의해 생성되지 않음을 나타낸다. 그러나 명시적 그리드 트랙은 여전히 grid-template-areas에 의해 생성될 수 있다.

  • subgrid

    하위 그리드는 grid-template-rows 또는 grid-template-columnssubgrid 키워드에 의해 설정되며 축 중 하나 또는 둘 모두에서 하위 그리드로 구성될 수 있다. 하위 그리드 축이 없는 그리드는 독립 실행형 그리드이다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈auto-track-list〉

    • [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
      CSS Grid Layout Module Level 2
  • 〈line-name-list〉

    • [ <line-names> | <name-repeat> ]+
      CSS Grid Layout Module Level 2
  • 〈track-list〉

    • [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
      CSS Grid Layout Module Level 2

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

구문

  • none | 〈track-list〉 | 〈auto-track-list〉 | subgrid 〈line-name-list〉?CSS Grid Layout Module Level 2
    3개의 열을 각각 auto, auto, min-content 로 설정

    minmax() 함수로 최소와 최대 값 지정하여 열의 크기를 지정

    repeat() 함수로 주어진 인수에 따라 반복적으로 그리드 생성

지원 웹브라우저