@mJordanCodes
@mJordanCodes
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.
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
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.
The Display property dictates how an element and any contained elements will behave.
Historically... this meant lots of <div>'s
Now we have the multi-column spec, and it is as easy as adding a single CSS property to the parent container.
Flexbox is designed to be:
.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;
One of the most common places I use flexbox is when creating navigation, or vertically centering items.
Flexbox Playground - codepen
Grid is designed to be:
Fraction Unit
.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;
}
One way I frequently use Grid is to layout some number of repeating cards.
1
2
3
4
-4
-3
-2
-1
.grid-item {
grid-column-start: 1;
grid-column-end: 3;
grid-row: 2 / span 4;
}
<nav>
<header>
<aside>
<main>
<footer>
Grid makes it crazy easy to create this page layout.
Sub Grid is a way to:
Going back to the repeating cards demo we did before, lets see how we can add sub-grid to improve the visuals.
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!
Flexbox
CSS Grid
CSS Functions - css tricks
Auto-Sizing Columns with auto-fit and auto-fill - css tricks
@mJordanCodes
Find me online: