Dig in on Grid

Modern CSS Layouts

2022 Update

Jordan Levine

@mJordanCodes

@mJordanCodes

Hello!

I'm Jordan,

a CSS Engineer at Universe.

Also a director for
WWCode Boulder/Denver

What is the problem we have?

The web was created for sharing documents. Basically 8.5x11 pages.

Now we have devices with all sorts of screens (or not).  And we are sharing more than documents.

How does Layout work?

Flow

Normal flow is the default way that elements are displayed on a page.

You can take things out of flow to make them work independently

Flow

Block elements are boxes that get laid out vertically.

They tend to take all available horizontal space.

Inline elements are boxes that get laid out horizontally.

They tend to take only needed horizontal space.

Flow

Display

The Display property dictates how an element and any contained elements will behave.

Multi-Column

Historically... this meant lots of <div>'s

  • Doesn't work without knowing length of content
  • Adds unneeded and non-semantic markup

Multi-Column - demo

Now we have the  multi-column spec, and it is as easy as adding a single CSS property to the parent container.

Multi-Column - limitations

  • Can't set width of columns separately.
  • Limitations around design

Multi-Column - support

Flexbox

Flexbox is designed to be:

  • one-dimensional layout model
  • offer space distribution between items
  • powerful alignment capabilities.

Flexbox

Flexbox

.container {
  display: flex;
  flex-direction: row | column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 1em;
}
.item {
  order: 1;
  flex-grow: 4;
  flex-shrink: 1;
  flex-basis: 5em;
  align-self: flex-end;
}
flex: 0 1 auto;

Flexbox - demo

One of the most common places I use flexbox is when creating navigation, or vertically centering items.

Flexbox Playground - codepen

Flexbox - support

CSS Grid

Grid is designed to be:

  • two-dimensional layout model
  • Dividing a page into major regions

CSS Grid - Length Unit: fr

Fraction Unit

  • Automatically adjusts for gaps
  • Don't have to recalculate if you add additional sections

CSS Grid - CSS Functions

  • minmax(<min>, <max>)
  • repeat(<times>, <what>)

CSS Grid - Sizing Keywords

  • min-content
  • max-content
.grid {
  display: grid;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 200px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 200px;
  column-gap: 10px;
  row-gap: 5px;
}

CSS Grid - demo: repeating cards

One way I frequently use Grid is to layout some number of repeating cards.

CSS Grid - Grid Lines

1

2

3

4

-4

-3

-2

-1

CSS Grid - Grid Lines

.grid-item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 2 / span 4;
}

CSS Grid - "Holy Grail" Layout

<nav>

<header>

<aside>

<main>

<footer>

CSS Grid - demo: Holy Grail

Grid makes it crazy easy to create this page layout.

CSS Grid - support

Sub-Grid

Sub Grid is a way to:

  • Nest grids in a way that allows to children grids can match their tracks with the parent grid.
  • Basically keep things lined up nice and pretty

Sub Grid - demo: repeating cards

Going back to the repeating cards demo we did before, lets see how we can add sub-grid to improve the visuals.

CSS Sub Grid - support

So... clearly the support for this isn't here.... YET!

Interop 2022 gives us hope that it will be coming this year.

In the mean time, you can use it as a progressive enhancement!

Links:

Links:

@mJordanCodes

Thanks!

Modern CSS Layouts

By mjordancodes

Modern CSS Layouts

Understand how layouts are created in CSS and what tools we have to manipulate them. Learn where and how to use tools like Grid, Flexbox, Multi-columns, and more.

  • 45