Grid 속기형 속성

사용법

하나의 속성에 다음 속성들을 모두 일괄 설정할 수 있는 grid 속기형 속성입니다.

• grid-template-rows

• grid-template-columns

• grid-template-areas

• grid-auto-rows

• grid-auto-columns

• grid-auto-flow

속성	값
grid	none
	<grid-template-rows> / <grid-template-columns>
	<grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]]

값

값	설명
none	모든 속성을 초기 값으로 적용
<grid-template-rows> / <grid-template-columns>	grid-tempate-rows grid-template-columns 속성 설정
<grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]]	grid-auto-flow grid-auto-rows grid-auto-columns 속성 설정

예시

2행 3열 그리드 설정입니다.

.grid-container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

위 설정을 grid 속기형 속성으로 작성하면 다음과 같습니다.

.grid-container {
  grid: 200px auto / 1fr auto 1fr;
}

column 자동 배치 알고리즘 설정에 암시적인 행/열 크기 설정입니다.

.grid-container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

위 설정을 속기형으로 작성하면 다음과 같습니다.

.grid-container {
  grid: column 1fr / auto;
}

좀 더 복잡하지만 다음 속성을 모두 포함하는 속기형 작성을 사용하면 보다 편리합니다.

• grid-template-rows

• grid-template-columns

• grid-template-areas

설정되지 않은 다른 속성은 기본 값으로 설정됩니다.

.grid-container {
  grid:
    [row-1-start] "header header header" 1fr [row-1-end]
    [row-2-start] "footer footer footer" 60px [row-2-end]
    / auto 100px auto;
}

.grid-container {
  grid-template-rows: [row-1-start] 1fr [row-1-end row-2-start] 60px [row-2-end];
  grid-template-columns: auto 100px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

레퍼런스

CSS Grid Layout Module Level 1www.w3.org

w3.org/TR/css-grid-1/#propdef-grid