scrimba
Frontend Career Path
Responsive design
Build a Responsive Layout with CSS Grid
Aside: A responsive image grid
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: A responsive image grid
AboutCommentsNotes
Aside: A responsive image grid
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(5, 1fr);
}

.wide {
}

.tall {
}

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