Skip to content

Instantly share code, notes, and snippets.

@Gameonn
Created July 16, 2022 13:01
Show Gist options
  • Save Gameonn/668c417e038dea705b1685277f65b148 to your computer and use it in GitHub Desktop.
Save Gameonn/668c417e038dea705b1685277f65b148 to your computer and use it in GitHub Desktop.
Grid-css
<div class="container">
<div class="item item--1">1: Orange</div>
<div class="item item--2">2: Green</div>
<div class="item item--3">3: Violet</div>
<div class="item item--4">4: Pink</div>
<div class="item item--5">5: Blue</div>
<div class="item item--6">6: Brown</div>
</div>
.container {
background-color: #eee;
width: 1000px;
margin: 2rem auto;
display: grid;
// grid-template-rows: 150px 100px;
grid-template-rows: auto;
// grid-template-rows: repeat(2, 150px);
// grid-template-columns: repeat(2, 150px) 1fr;
// grid-template-columns: repeat(3, 1fr);
// grid-template-columns: 1.5fr 2fr 1fr;
grid-template-columns: 50% 2fr 1fr;
// grid-template-columns: 1fr 40px 2fr;
// grid-row-gap: 30px;
// grid-column-gap: 50px;
grid-gap: 30px;
}
.item {
padding: 20px;
font-size: 30px;
font-family: sans-serif;
color: #fff;
&--1 {
background-color: orangered;
// grid-row-start: 2;
// grid-row-end: 3;
// grid-column-start: 2;
// grid-column-end: 2;
grid-row: 2/3;
grid-column: 2/2;
z-index: 10;
}
&--2 {
background-color: yellowgreen;
// grid-column: 1/ span 2;
grid-column: 1/2;
}
&--3 {
background-color: blueviolet;
grid-column: 1/3;
grid-row: 2/3;
}
&--4 {
background-color: palevioletred;
}
&--5 {
background-color: royalblue;
grid-row: 1/3s;
grid-column: 3/4;
// grid-area: 1/3/2/4;
}
&--6 {
background-color: goldenrod;
grid-row: 2/3;
grid-column: 3/4;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment