Properties

Properties

Draft
  • account_tree
  • bug_report

grid-template-columnsCSS3

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

설명

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

설정 가능한 속성 값

  • auto기본값키워드CSS3

    암시적으로 열 크기를 지정한다.

  • length숫자단위허용CSS3

    명시적으로 열의 크기를 지정한다. fr은 flex 값으로 사용된 단위이며 비례를 지정한다.

    • 사용 가능한 단위: px, %, fr
  • max-content키워드CSS3

    열을 차지하는 최대 콘텐츠의 영향력을 설정

  • min-content키워드CSS3

    열을 차지하는 최소 콘텐츠의 영향력을 설정

  • minmax(min-length,max-length)함수CSS3

    min-length 이상 max-length 이하의 범위를 갖는 열의 크기를 설정

  • fit-content(argument)함수CSS3

    열의 크기가 자동 최소 크기보다 클 경우 인수에서 고정된다는 점을 제외하고는 auto와 유사하게 계산되어 나타낸다.

  • repeat(count,method)함수CSS3

    repeat() 함수를 이용하여 반복적인 그리드를 생성할 수 있다. 자세한 내용은 repeat() 함수를 참고하기 바란다.

구문

  • grid-template-columns auto or max-content or min-content or length;기본형식CSS3
    3개의 열을 각각 auto, auto, min-content 로 설정
  • grid-template-columns minmax(min-length, max-length) or fit-content(argument);기본형식CSS3
    minmax() 함수로 최소와 최대 값 지정하여 열의 크기를 지정
  • grid-template-columns repeat(repeatCount, method);기본형식CSS3
    repeat() 함수로 주어진 인수에 따라 반복적으로 그리드 생성

버전 명세

Version NameDescriptionFlags
CSS3

지원 웹브라우저