meet it

A responsive card layout is many small rules working together.

A card is a : a reusable piece of a page, styled the same wherever it appears. Build one card first, then the layout that holds many of them.

Lay the cards out with a grid, one column on phones. Add a media query or auto-fit for more columns on wide screens. Then give photos object-fit, badges absolute and buttons a transition.

Check every piece on a narrow screen and a wide one. Most layout bugs only show up at one size.

<div class="cards">
  <div class="card">Lemon cake</div>
  <div class="card">Garden salad</div>
  <div class="card">Meatballs</div>
</div>

.cards {
  display: grid;
  gap: 16px;
}
@media (min-width: 600px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}
.card {
  position: relative;
  padding: 16px;
  background-color: snow;
}

Press show my page to see it here.

position: relative gets each card ready to hold a badge of its own.

guess first

Grid, badge and pseudo-element at once. What do you see?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<div class="cards">
  <div class="card">Swimming</div>
  <div class="card">Tennis</div>
  <div class="card">Archery</div>
</div>

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.card {
  position: relative;
  background-color: azure;
}
.card::after {
  content: "New";
  position: absolute;
  top: 4px;
  right: 4px;
}

your turn

Your turn. Make the shop responsive.

Give the shop two equal columns from 600px wide, and give the button a 0.2s transition on background-color.

the page you’re styling

<div class="shop">
  <div class="item">
    <h3>Teapot</h3>
    <button class="buy">Add to basket</button>
  </div>
  <div class="item">
    <h3>Mugs</h3>
    <button class="buy">Add to basket</button>
  </div>
</div>

your css

Your code

Press show my page to see it here.

two equal columns from 600px widenot checked yet
the button's colour change is smoothnot checked yet
the change takes 0.2snot checked yet

fix it

Phones get two columns and big screens get one. Fix it!

the page you’re styling

<div class="cards">
  <div class="card">Monday</div>
  <div class="card">Tuesday</div>
  <div class="card">Wednesday</div>
  <div class="card">Thursday</div>
</div>

your css

Broken code to fix

Press show my page to see it here.

two columns from 600px widenot checked yet
no query is left for phones onlynot checked yet

Which screens does max-width: 600px let in?
max-width means up to 600px wide: phones, not big screens.
Change max-width to min-width, then press run.

nailed it

you built a layout for every screen. :D

Build the component first, then the layout around it.
Start with phones, then add rules for wider screens.
Check every layout on a narrow and a wide screen.

new words in your collection

component

This lesson isn’t saved. A free account remembers every lesson you finish.