Dig in on Grid
Modern CSS Layouts
2022 Update
Jordan Levine
@mJordanCodes
@mJordanCodes
Hello!
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:
- Block and Inline Layout in Normal Flow - mdn
- In and Out of Flow - mdn
- Responsive Design - mdn
- Multiple Column Layout - mdn
Flexbox
- Flexbox - mdn
- Complete Guide to Flexbox - css tricks
- Use Cases for Flexbox - smashing magazine
- Flexbox Froggy
- Flexplorer
- Flexbox Playground - codepen
Links:
CSS Grid
- Grids - mdn
- Grid Layout - mdn
- Guide to Grids - css tricks
- Grid Garden
-
CSS Functions - css tricks
-
Auto-Sizing Columns with auto-fit and auto-fill - css tricks
@mJordanCodes
Find me online:
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.
