10 Modern Layouts

Created on: Thu 3 Jun 21 Updated: Sun 29 Jan 23

There is also a website for this vid where you can edit the layouts. And Google has a page with a much bigger list of layouts on.

1. Super centred

2. The deconstruced pancake

The flex property is short for flex-grow, flex-shrink and flex-basis. When a box cannot grow, in the second line, it will go up to it’s 150px only.

A more useful alternative might be The Holy Albatross.

.parent {
    display: flex;
    flex-wrap: wrap;
}
.child {
    flex: 1 1 150px; /* stretching */
    flex: 0 1 150px; /* no stretching */
}

Useful layout for a semi-fixed width left sidebar.

In this example you could use auto instead of 1fr though they’re not same.

display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;

4. Pancake stack

Very useful vertical layout for the typical header, content, footer type of arrangement.

A min-height value of 100vh is best used on the containing element (here the body) if you want to force the footer to the bottom of the viewport.

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

5. Classic Holy Grail layout

The displays a 3 column content section with a header and footer spaning all conlumns.

Using grid-template to set both columns (the first bit) and rows (after the slash).

body {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}
header,
footer {
    grid-column: 1 / 4;
}

6. Self span grid

Very far from one line as you have to set each element’s grid column span.

However it’s still relatively succinct IF set up as here and you don’t need to set the grid-row property.

Overall something like this is probably easier using grid-template-areas instead.

body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.elem-1 {
    grid-column: 1 / span 12;
}
.elem-2 {
    grid-column: 1 / span 6;
}
.elem-1 {
    grid-column: 3 / span 4;
}
.elem-1 {
    grid-column: 4 / span 2;
}

7. Repeat, auto, minmax

The classic of adaptive design.

If auto-fill is used instead of auto-fit then the grid items won’t grow to beyond their min size.

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.5rem;
}

8. Line up

So this is used for laying out the internal content of a set of cards.

Personally I wasn’t keen on this solution. Text in th middle box is left vertically centred which just seems wrong for a card.

A better solution is to set the middle box to flex-grow: 1 so it fills any extra space.

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Clamping my style

This uses clamp to set the width of a card. Not really a layout but an interesting use of clamp.

.card {
    width: clamp(23ch, 50%, 48ch);
}

Respect the aspect

Hardly a layout but at the time of the video aspect-ratio wasn’t widely available. Very useful for flexible, embedded video content.

aspect-ratio: 16 / 9;

❮ Previous

Next ❯