scrimba
CSS Grid
Use CSS Grid units to Change the Size of Columns and Rows
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Use CSS Grid units to Change the Size of Columns and Rows
AboutCommentsNotes
Use CSS Grid units to Change the Size of Columns and Rows
Expand for more info
index.html
run
preview
console
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}

.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/* modify the code below this line */

grid-template-columns: auto 50px 10% 2fr 1fr;

/* modify the code above this line */
grid-template-rows: 50px 50px;
}
</style>

<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
Console
index.html
-1:53