<main class="vh-100 flex items-center justify-center code">
<article class="my-grid layout vh-75 w-75">
<div class="f6 f4-l x y1 bt b--purple">
<span class="nl4 nt2 absolute">1</span>
</div>
<div class="f6 f4-l x y2 bt b--purple">
<span class="nl4 nt2 absolute">2</span>
</div>
<div class="f6 f4-l x y3 bt b--purple">
<span class="nl4 nt2 absolute">3</span>
</div>
<div class="f6 f4-l x y4 bt b--purple">
<span class="nl4 nt2 absolute">4</span>
</div>
<div class="f6 f4-l x y5 bt b--purple">
<span class="nl4 nt2 absolute">5</span>
</div>
<div class="f6 f4-l x y6 bt b--purple">
<span class="nl4 nt2 absolute">6</span>
</div>
<div class="f6 f4-l y x1 bl b--pink">
<span class="nt4 nl1 absolute">1</span>
</div>
<div class="f6 f4-l y x2 bl b--pink">
<span class="nt4 nl1 absolute">2</span>
</div>
<div class="f6 f4-l y x3 bl b--pink">
<span class="nt4 nl1 absolute">3</span>
</div>
<div class="f6 f4-l y x4 bl b--pink">
<span class="nt4 nl1 absolute">4</span>
</div>
<div class="f6 f4-l y x5 bl b--pink">
<span class="nt4 nl1 absolute">5</span>
</div>
<div class="ba b--green bg-light-green purple
bw2 flex items-center justify-center lh-copy f6 f3-l green-item">
col: 1 ➡️ 4<br/>
row: 2 ➡️ 5
</div>
<div class="ba b--light-red bg-washed-red purple
bw2 flex items-center justify-center lh-copy f6 f4-l red-item">
col: -1 ➡️ -4<br/>
row: 1 ➡️ 2
</div>
<div class="ba b--blue bg-washed-blue purple
bw2 flex items-center justify-center lh-copy f6 f4-l blue-item">
col: 1 span 3<br/>
row: 5 ➡️ 6
</div>
<div class="ba b--gold bg-washed-yellow purple
bw2 flex items-center justify-center lh-copy f6 f3-l yellow-item">
col: 3 ➡️ 5<br/>
row: 4 ➡️ 5
</div>
</article>
</main>
.my-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.red-item {
grid-column-start: -1;
grid-column-end: -4;
grid-row-start: 1;
grid-row-end: 2;
}
.green-item {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 5;
}
.blue-item {
grid-column-start: 1;
grid-column-end: span 3;
grid-row-start: 5;
grid-row-end: 6;
}
.yellow-item {
grid-area: 4 / 3 / 5 / 5;
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 5;
}
/**
* These are all for showing debugging
* They show the grid lines and numbers
*/
.x { grid-column: 1 / -1; }
.y { grid-row: 1 / -1; }
.y1 { grid-row: 1 / 2; }
.y2 { grid-row: 2 / 3; }
.y3 { grid-row: 3 / 4; }
.y4 { grid-row: 4 / 5; }
.y5 { grid-row: 5 / 6; }
.y6 { grid-row: 6 / 7; }
.x1 { grid-column: 1 / 2; }
.x2 { grid-column: 2 / 3; }
.x3 { grid-column: 3 / 4; }
.x4 { grid-column: 4 / 5; }
.x5 { grid-column: 5 / 6; }
.right--1 { right: -0.5rem; }
This Pen doesn't use any external JavaScript resources.