scrimba
CSS Grid
Auto-fit vs. auto-fill - CSS Grid tutorial
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

To see this lesson you need to be logged in. Joining Scrimba is free and gives you access to 20+ courses.Sign up
Auto-fit vs. auto-fill - CSS Grid tutorial
AboutCommentsNotes
Auto-fit vs. auto-fill - CSS Grid tutorial
Expand for more info
index.css
run
preview
console
.container {
border: 1px solid black;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: 100px 100px;
}

.container2 {
border: 1px solid black;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-template-rows: 100px 100px;
}


Console
index.html
-2:00