scrimba
Frontend Career Path
Responsive design
Build a Responsive Layout with CSS Grid
Aside: grid-auto-flow: dense and MinMax
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

Aside: grid-auto-flow: dense and MinMax
AboutCommentsNotes
Aside: grid-auto-flow: dense and MinMax
Expand for more info
index.css
run
preview
console
html, body {
background-color: lightgray;
margin: 10px;
}

.card {
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 3px;
}

.grid-container {
display: grid;
grid-gap: .5em;
grid-template-columns: repeat(auto-fit, 100px);
grid-auto-rows: 75px;
}

.wide {
}

.tall {
}

.big {
}
Console
/index.html
-5:18