Layout with CSS: Flexbox, Grid and responsive design¶

Exercise layout-css-annex.pdf · PDF

Open NoteBox on a big monitor. A 390 px strip sits in the middle of a 1920 px desert. Remove its max-width and you get the opposite: input boxes a metre wide. Which one is right? Neither.

The phone design is right for a phone. But how many screen widths will your app meet? All of them. So you do not design a page. You design a rule for how the page behaves at any width. In Figma you did this with auto layout, constraints and breakpoints. Today you write the same ideas by hand, and they turn out to be surprisingly few lines.

Shelf and bookcase¶

Put six books in a row on a desk. That is a shelf: one direction. You decide their order, the space between them, and whether they sit at the left, at the right or spread out.

Now picture a bookcase: shelves and columns, and every book has its own cell.

Flexbox lays out items in one direction, a row or a column. Grid lays them out in rows and columns at once.

Both start the same way. You put display: flex or display: grid on the parent, and its children line up. The parent is the shelf. The children are the books.

Before you start: tidy NoteBox¶

The page is about to change shape, so simplify it first.

• In src/routes/+layout.svelte, delete the whole <style> block. Its main rule was the 390 px column.
• In src/routes/+page.svelte, remove the <h1>, the hint, the Undo bar, select, remove, undo and onKey.
• Keep notes, query, visible, addNote and the two effects.

Deleting feels scary, but this is what Git is for. Run git log, pick a commit and look at it with git show: every deleted line is still there.

Flexbox: the bar¶

The top bar has the brand on the left and a counter on the right, on one line, 56 px high. Add it at the top of the page's markup:

<header class="bar">
    <span class="brand">NoteBox</span>
    <span class="count">{notes.length} notes</span>
</header>

And in the page's <style>:

.bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    padding: 0 16px;
    border-bottom: 1px solid var(--nb-line);
}

.brand { font-size: 20px; font-weight: 700; }
.count { font-size: 13px; color: var(--nb-muted); }

Four properties on the parent do almost everything:

You can play with these live. In DevTools, click the flex badge next to <header> and change the values. Predict each result before you click.

You have been using all four without a name: NoteRow and NoteForm are flex containers.

Grid: the page regions¶

Under the bar there are two regions: the form and the notes. Wrap them:

<div class="layout">
    <aside>
        <h2>New note</h2>
        <NoteForm onsave={addNote} />
    </aside>

    <section>
        <h2>Notes</h2>
        <input type="search" placeholder="Search notes" aria-label="Search notes"
            bind:value={query} />
        <!-- the list goes here -->
    </section>
</div>

.layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 16px;
}

h2 { margin: 0 0 16px; font-size: 18px; }

fr is a Grid unit: one share of the free space left after fixed sizes and gaps.

1fr is not one pixel and not one per cent. With a single column of 1fr, that column takes everything. One column is exactly what a phone needs, so this is already the phone layout.

Grid outside, Flexbox inside: the cards¶

A row was fine for a narrow list. With more room, a note is better as a card. Replace the <ul> and its NoteRows:

<ul class="cards">
    {#each visible as note (note.id)}
        <li class="card">
            <h3>{note.title}</h3>
            <p>{note.body}</p>
            <span class="tag">{note.tag}</span>
        </li>
    {/each}
</ul>

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    padding: 16px;
    border: 1px solid var(--nb-line);
    border-radius: var(--nb-radius);
}

.card h3, .card p { margin: 0; }
.card h3 { font-size: 16px; }
.card p { color: var(--nb-muted); }
.tag { margin-top: auto; font-size: 13px; }

The cards need text, so give each note in seed a body. Then, in DevTools → Application → Local Storage, delete the key notebox so the new seed is used.

Two details are worth stopping for:

• The card is a shelf standing up. Why not Grid for the card? Because its content goes in one direction only.
• margin-top: auto on the tag takes all the free space above it. The tag sticks to the bottom of the card, however short the text is. Try it with one long note and one short note.

Mobile-first and breakpoints¶

Press Ctrl+Shift+M with DevTools open. That is the device toolbar: it shows the page at an exact width you choose. Set it to Responsive and drag from 390 to 1280. Everything stretches. Now you have to say what should happen when there is room.

Mobile-first means the base CSS is for the narrowest screen, and you add only what changes as the screen gets wider.

A media query is CSS that applies only under a condition. A breakpoint is the width at which the layout changes.

NoteBox has two breakpoints: 768 and 1280.

flowchart LR
    B["<b>Base CSS</b><br>any width: one column,<br>padding 16"] -->|"at least 768 px"| M["<b>Add</b><br>two columns, padding 24,<br>as many card columns as fit"]
    M -->|"at least 1280 px"| L["<b>Add</b><br>stop at 1200 px, centred"]

At the end of the <style>:

@media (min-width: 768px) {
    .layout {
        grid-template-columns: 320px 1fr;
        padding: 24px;
    }

    .cards {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (min-width: 1280px) {
    .layout {
        max-width: 1200px;
        margin: 0 auto;
    }
}

Drag across 768: the form jumps to a 320 px column on the left, and the notes take the rest.

Now read the rule for the cards slowly, as a sentence: as many columns as fit, each at least 220 px, sharing the space equally. At 768 only one fits. Keep dragging: at about 850 a second column appears, and at about 1085 a third. You never said "two columns" or "three columns". You said what a card needs, and the grid counts.

The 1280 rule exists because lines of text a metre long are unreadable. Past that width, the content stops at 1200 px and centres itself.

Count the declarations inside the media queries: five. Everything else is shared by every screen.

Three frames, one page¶

Look at the same page at 390, 768 and 1280 px, and list what is different.

A responsive page is one page with a short list of exceptions.

From Figma to CSS¶

You already know these ideas under other names:

Test on a real phone¶

Your screen is one width. "It works on my screen" proves very little. Stop the server and start it like this:

npm run dev -- --host

Vite prints a Network address such as http://192.168.x.x:5173. Open it on a phone on the same Wi-Fi and add a note with your thumb. Is Save easy to hit? It is 44 px high, the touch target you met in Apple's guidelines.

Some networks stop devices from reaching each other. If your phone cannot connect, try a phone hotspot, or rely on the device toolbar.

Your turn: the toolbar¶

The exercise in the handout adds a toolbar between the "Notes" heading and the cards: the search input, a select "All tags" and a button "Sort A-Z".

• Under 480 px: the three controls stacked, each full width, gap 8.
• From 480 px: one row. The input takes what is left (flex: 1), the select is 140 wide, the button 110.
• All three are 44 high with the radius token, and 16 below the toolbar. They only have to look right; wiring them is optional.

If something fails, check these first:

Then try it in your own app: at least one flex bar, one grid and one breakpoint. To practise, play Flexbox Froggy and Grid Garden.

Key takeaways¶

• Flexbox is a shelf: one direction. Grid is a bookcase: rows and columns. Real pages use both.
• display goes on the parent; the children line up.
• gap is the space between items. fr is one share of the free space.
• repeat(auto-fill, minmax(220px, 1fr)) says what a card needs and lets the grid count the columns.
• Mobile-first: the base CSS is the narrowest screen, and each min-width media query adds only what changes.
• Breakpoints follow your content, not devices. Test with the device toolbar and a real phone.

Quick check¶

Your page now fits any screen, but it is still one page with one address. Next, every screen of NoteBox gets its own URL: Routing and navigation.