Fluid and responsive layouts

Your Figma frames are 375, 768 and 1440 px wide, but real screens come in every width in between. A layout built with fixed pixel widths only fits the exact sizes you designed. A fluid layout fits all of them.

From Figma to fluid CSS

Turn each fixed measurement from your design into a flexible rule:

This is the same thinking as Auto Layout in Figma: you describe how things should behave, and the layout works out the sizes.

The fluid gallery grid

/* ===== 7. GALLERY PAGES ===== */
.gallery-page {
  display: grid;
  gap: 24px;
  padding-block: 32px;        /* top and bottom only, so the side gutter stays */
}

.gallery-page .intro {
  padding: 0;                 /* the gallery-page already adds the space */
}

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Fluid grid: as many columns as fit, each at least 160px wide.
     The browser adds or removes columns as the screen changes size. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;        /* keeps every thumbnail square */
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery a:hover img,
.gallery a:focus-visible img {
  transform: scale(1.04);
}

.gallery a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

Read repeat(auto-fit, minmax(160px, 1fr)) from the inside out:

• minmax(160px, 1fr): each column is at least 160 px wide and at most one equal share of the space.
• auto-fit: fit as many of those columns as the row has room for.
• repeat(…): repeat that column across the row.

On a phone that makes 2 columns. On a tablet or desktop, 4. Drag the browser window wider and narrower and watch the columns appear and disappear.

1. Tune the minimum. Change 160px to match your Figma thumbnails. A larger number gives fewer, bigger thumbnails; a smaller number gives more, smaller ones.

Media queries for what the grid can't decide

Fluid grids handle the columns. Use media queries only for changes that depend on screen size, such as wider gutters, bigger headings or moving the gallery beside the text.

Media queries only list what changes. Everything else carries over from the phone styles. Desktop screens match both queries, so the desktop rules build on the tablet rules.

1. Find the tablet changes in section 10 at the bottom of styles.css. The starter already has them; read them and adjust the values to match your Figma tablet frame:

   site/css/styles.css · section 10Copy

   /* ===== 10. TABLET: 600px and wider ===== */
   @media (min-width: 600px) {
     :root { --space: 24px; }
   
     h1 { font-size: 2.5rem; }
   }

   The side gutter widens to 24 px and the main heading grows.

2. Find the desktop changes in section 11, below the tablet ones:

   site/css/styles.css · section 11Copy

   /* ===== 11. DESKTOP: 1000px and wider ===== */
   @media (min-width: 1000px) {
     :root { --space: 40px; }
   
     .gallery-page {
       /* Text column + gallery. In Figma the text column is 280px of 1080px;
          2fr 5fr keeps that proportion but lets both columns flex. */
       grid-template-columns: 2fr 5fr;
       gap: 40px;
       align-items: start;
     }
   }

   On gallery pages, the text and gallery sit side by side. 2fr 5fr splits the width into 7 shares: 2 for the text and 5 for the gallery. That is roughly the 280 px column in your 1080 px design (about 300 px once the gap is taken out), and both columns still flex.

3. Match your Figma frames. Add any other changes your tablet and desktop designs need, such as a different header layout.

4. Test every width. Drag the browser window from 320 px to very wide. The layout should look intentional at every width, not just at 375, 768 and 1440. Then check in DevTools device mode and on your own phone.

© Created by Sara Rosenstock, Marietta College Graphic Design.