<h1> CSS Grid Play - positioning with template rows/columns</h1>
<div class="wrapper">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<div>div 5</div>
<div>div 6</div>
<div>div 7</div>
</div>
<ul>
<li>The striped squares are made by div 3 (with an transparent background pattern) overlaping other divs.</li>
<li>Div 4 is out of order because it was placed in row 3. Div 5 is not positioned and takes the next available spot after Div 3. </li>
<li>There is an empty spot in the center of the grid</li>
<li>Seriously? How cool is this?</li>
</ul>
.wrapper{
display:grid;
grid-template-columns: repeat(4, [col] 1fr);
grid-template-rows: repeat(3, [row] auto);
grid-gap: 1em;
background: grey;
}
.wrapper > div {
min-height: 100px;
padding: 5px;
border: 1px solid black;
background-color: white;
}
.wrapper > div:nth-child(1){
grid-column: col 1 / span 2;
grid-row: row;
background-color: yellow;
}
.wrapper > div:nth-child(2){
grid-column: col 3/ span 2;
grid-row: row;
background-color: purple;
}
.wrapper > div:nth-child(3){
grid-column: col 2/ span 2;
grid-row: row /span 3;
background: repeating-linear-gradient(
45deg,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 10px,
rgba(0, 0, 0, 0.3) 10px,
rgba(0, 0, 0, 0.3) 20px
);
z-index:10;
}
.wrapper > div:nth-child(4){
grid-column: col 1/ span 2;
grid-row: row 3;
}
.wrapper > div:nth-child(6){
grid-column: col 4/ span 1;
grid-row: row 2;
}
.wrapper > div:nth-child(7){
grid-column: col 3/ span 2;
grid-row: row 3;
}
Also see: Tab Triggers