<div class="container container--1">
<div class="item item--1">1 { grid-area: a }</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<br>
<div class="container container--2">
<div class="item item--1">1 { grid-area: 1/-3/span 2/span 2 }</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>/* -------- Skip this base code -------- */
* { box-sizing: border-box; } .container { display: grid; gap: 1px; padding: 1px; border: 16px solid silver; } .item { padding: 8px; line-height: 1; color: white; background: coral; } .item--1 { background: royalblue; }
/* 셀 이름으로 격자를 생성, 셀 이름으로 아이템을 배치. */
.container--1 { grid: 'a a b' 'a a c' 'd e f'; }
.container--1 .item--1 { grid-area: a; }
/*
셀 이름(<string>)을 반복하여 행/열을 생성할 수 있다. 공백으로 분리한 문자 3개로 3개의 열을 생성. 문자 세트를 3회 반복하여 3개의 행을 생성했다. 셀 이름(a, b, c, d, e, f)을 사용하여 아이템을 배치할 수 있다.
*/
/* 격자의 수량과 크기를 설정, 줄 번호를 이용하여 아이템을 배치. */
.container--2 { grid: repeat(3, 1fr) / repeat(3, 1fr); }
.container--2 .item--1 { grid-area: 1 / -3 / span 2 / span 2; }
/* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end */
/*
repeat() 함수의 첫 번째 인자는 반복 수량 <positive-integer>. 두 번째 인자는 격자의 크기 <track-size>. 줄 번호를 사용하여 아이템을 배치할 수 있다. 줄 번호 음수는 역순으로 샘한다.
*/
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.