CodePen Embed - CSS 'grid-area' property. 'auto' value.

<div class="root">
  <div class="container container--1">
    <div class="item item--1">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="container container--2">
    <div class="item item--1">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="container container--3">
    <div class="item item--1">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="container container--4">
    <div class="item item--1">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</div>

/* -------- Skip this base code -------- */
* { box-sizing: border-box; } .root { display: grid; grid: '. .'; gap: 8px; counter-reset: order 0; } .container { position: relative; display: grid; grid: '. .'; gap: 1px; padding: 1px; border: 16px solid silver; color: white; } .container::after { counter-increment: order; content: '.container--' counter(order); position: absolute; font-weight: 700; top: -16px ; white-space: nowrap; text-shadow: 0 0 2px black; } .item { padding: 8px; background: coral; } .item--1 { background: royalblue; }

.container--1 .item--1 { grid-area: 2 / 2 / 3 / 3; }
.container--2 .item--1 { grid-area: 2 / 2 / auto / auto; }
.container--3 .item--1 { grid-area: 2 / 2; }
.container--4 .item--1 { grid-area: auto / auto / 3 / 3; }

This Pen is owned by Jeong, ChanMyeong on CodePen.

See more by @naradesign on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.