CSS grid-template: 그리드 레이아웃 정의 단축 속성

CSS grid-template 속성은 그리드 행, 그리드 열, 그리드 영역을 정의합니다.

.grid {
  grid-template:
    "a a a" 40px
    "b c c" 40px
    "b c c" 40px / 1fr 1fr 1fr;
  /* grid-template:
    "b b a" auto
    "b b c" 2ch
    "b b c" 1em / 20% 20px 1fr; */
  /* grid-template:
    "a a ." minmax(50px, auto)
    "a a ." 80px
    "b b c" auto / 2em 3em auto; */
}

.grid {
  width: 200px;
  height: 200px;
  background: #ddd;
  color: #fff;
  display: grid;
}
.a, .b, .c {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}
.a {
  background: #24c0a5;
  grid-area: a;
}
.b {
  background: #4011c5;
  grid-area: b;
}
.c {
  background: #b42809;
  grid-area: c;
}

<div class="grid">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

불러오는 중...

구성 속성

grid-template은 다음 세 속성의 단축 속성입니다.

구문

/* 키워드 값 */
grid-template: none;

/* grid-template-rows / grid-template-columns */
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [line-name] 100px / [column-name1] 30% [column-name2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/* grid-template-areas grid-template-rows / grid-template-column */
grid-template:
  "a a a"
  "b b b";
grid-template:
  "a a a" 20%
  "b b b" auto;
grid-template:
  [header-top] "a a a" [header-bottom]
  [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto;

/* 전역 값 */
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: revert-layer;
grid-template: unset;

값

none: 세 구성 속성 모두 none으로 설정합니다. 즉 명시적 그리드를 생성하지 않습니다. 유명 그리드 영역이 정의되지 않고, 행과 열은 암시적으로 생성되며 그 크기는 grid-auto-columns와 grid-auto-rows가 결정합니다.
<'grid-template-rows'> / <'grid-template-columns'>: grid-template-rows와 grid-template-columns를 각각 지정한 값으로 설정하고, grid-template-areas는 none으로 설정합니다.
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?: 지정한 문자열(<string>)을 grid-template-areas의 값으로 설정합니다. 각 문자열의 뒤에 이어지는 트랙 크기(<track-size>)를 grid-template-rows에 설정합니다. 문자열과 트랙 크기 앞과 뒤에서 행 분할선 이름(<line-names>)도 추가할 수 있습니다. 마지막으로 / 뒤의 값을 grid-template-columns에 설정합니다. 슬래시가 없으면 grid-template-columns를 none으로 설정합니다.
이 구문에서는 repeat()을 사용할 수 없습니다. grid-template-areas를 정의하는 “ASCII 아트”와 행/열이 1:1로 대응되어야 하기 때문입니다.

grid 단축 속성도 동일한 구문을 사용하지만, grid-template과 달리 암시적 그리드 속성들을 초기 값으로 재정의합니다. 암시적 그리드 속성들이 별개로 종속되는 상황을 피하려면 grid 속성을 사용하세요.

예제

레이아웃 구성하기

<article>
  <header>헤더</header>
  <nav>메뉴</nav>
  <main>본문</main>
  <footer>푸터</footer>
</article>

article {
  color: #fff;
  height: 300px;
  display: grid;
  grid-template:
    [header-left] "head head" 30px [header-right]
    [main-left] "nav main" 1fr [main-right]
    [footer-left] "nav foot" 30px [footer-right] / 120px 1fr;
}

header {
  background: #24c0a5;
  grid-area: header;
}

nav {
  background: #4011c5;
  grid-area: nav;
}

main {
  background: #b42809;
  grid-area: main;
}

footer {
  background: #24c0a5;
  grid-area: footer;
}

불러오는 중...

명세

CSS Grid Layout Module Level 2

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`grid-template`
`none`

같이 보기

그리드 영역 정의: grid-template-areas
그리드 열 정의: grid-template-columns
그리드 행 정의: grid-template-rows