<div class="grid__container">
<div class="grid__item">A</div>
<div class="grid__item">B</div>
<div class="grid__item">C</div>
<div class="grid__item">D</div>
<div class="grid__item">E</div>
<div class="grid__item">F</div>
<div class="grid__item grid__container--subgrid">
<div class="grid__subitem grid__item">G1</div>
<div class="grid__subitem grid__item">G2</div>
<div class="grid__subitem grid__item">G3</div>
<div class="grid__subitem grid__item">G4</div>
<div class="grid__subitem grid__item">G5</div>
<div class="grid__subitem grid__item">G6</div>
<div class="grid__subitem grid__item">G7</div>
<div class="grid__subitem grid__item">G8</div>
<div class="grid__subitem grid__item">G9</div>
</div>
<div class="grid__item">H</div>
<div class="grid__item">I</div>
<div class="grid__item">J</div>
<div class="grid__item">K</div>
<div class="grid__item">L</div>
<div class="grid__item">M</div>
<div class="grid__item">N</div>
<div class="grid__item">O</div>
</div>
<div class="warning">
<p>Subgrid support required to get the most out of this pen</p>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
padding: 4rem 0;
}
.warning {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
background-color: #fed7d7;
border-top: 1px solid #f56565;
padding: 10px;
color: #f56565;
}
@supports (grid-template-rows: subgrid) {
.warning {
display: none;
}
}
.grid__container {
height: calc(100vh - 8rem);
max-width: 1024px;
margin: 0 auto;
outline: 3px solid #111;
background: #333;
padding: 1rem;
}
.grid__item {
outline: 4px solid #111;
background: #557;
position: relative;
}
.grid__item:not(.grid__container--subgrid) {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 1.5rem;
text-shadow: 1px 1px 0 rgb(0 0 0 / 0.8);
}
.grid__container--subgrid {
padding: 0.5rem;
width: 100%;
}
.grid__subitem {
outline: 3px solid #999;
background: #ccc;
position: relative;
color: #000 !important;
text-shadow: 1px 1px 0 rgb(255 255 255 / 0.8) !important;
}
.grid__container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, minmax(100px, auto));
gap: 1rem;
}
.grid__container--subgrid {
grid-column: 2 / 6;
grid-row: 2 / 4;
display: inherit;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
gap: inherit;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.