Skip to content

Instantly share code, notes, and snippets.

@Gameonn
Created July 16, 2022 15:23
Show Gist options
  • Save Gameonn/e993047b2cbbd46cf5bcbaca503f9062 to your computer and use it in GitHub Desktop.
Save Gameonn/e993047b2cbbd46cf5bcbaca503f9062 to your computer and use it in GitHub Desktop.
Implicit/Explicit Grids
<div class="container">
<div class="item item--1">Modern</div>
<div class="item item--2">CSS</div>
<div class="item item--3">with</div>
<div class="item item--4">flexbox</div>
<div class="item item--5">and</div>
<div class="item item--6">Grid</div>
<div class="item item--7">is</div>
<div class="item item--8">great</div>
</div>
.container {
width: 1000px;
margin: 30px auto;
background: #eee;
height: 1000px;
display: grid;
grid-gap: 20px;
grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(2,200px);
grid-auto-rows: 80px;
grid-auto-flow: row dense; //by default row
grid-auto-columns: .5fr;
// align grid items to grid areas
// align-items: center; // default stretch , other values - center, end. start
// justify-items: center; // default stretch, other values - center, end. start
// align grid tracks to grid container
justify-content: space-evenly;
align-content: center;
.item {
padding: 20px;
color: #fff;
font-family: sans-serif;
font-size: 24px;
background-color: orangered;
&--4 {
background: crimson;
grid-row: 2/ span 3;
}
&--6 {
background: lightcoral;
grid-row: 2/span 2;
}
&--7 {
background: palevioletred;
grid-column: 1/ -1;
align-self: start;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment