Dominic Magnifico
Senior Front End Engineer @10up
Layout methods of the past
Tables ๐
| Tables | Kind | of |
|---|---|---|
| suck | for | layout |
Tables aren't easily made responsive
Layout methods of the past
Tables ๐
Layout methods of the past
Tables ๐
When tables were used for layout, accessibility was not top of mind.
Box Model ย ยฏ\_(ใ)_/ยฏ
Layout methods of the past
Where the box model excels
- With floats we get (limited) control over the layout of single columns.
- And we get the fancy ability to add space around these items.
Box Model ย ยฏ\_(ใ)_/ยฏ
Layout methods of the past
Where the box model collapses
- Starts to become a pain when we want granular control over items in a column
- Equal spacing between divs
- Same goes for row control
- Vertical centering
Box Model ย ยฏ\_(ใ)_/ยฏ
Layout methods of the past
Layout methods of the present
๐ Flexbox ๐
Where flexbox excels
Layout methods of the present
๐ Flexbox ๐
- Much more granular control over how flex items behave in a column orย row.
- Can grow, shrink, order, justify and align flex items. Lots of options.
- Vertical andย horizontal centering. ๐คค
Where flexbox may lack a bit
Layout methods of the present
๐ Flexbox ๐
- Flexbox is not necessarily ideal for full page layouts https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
- Though until grid, it worked better than a lot of the options we had at the time, so we overused it.
Layout methods of the present
๐ Flexbox ๐
Slow Connections
- Flexbox has a tendency to shift on page load.
- Content shifting during page load is super annoying for folks on slower connections.
Layout methods of the present
๐ Flexbox ๐
Get down to the nitty grid-dy
Let's start with terminology
Get to know the properties
Grid Displayย
display: grid;
display: inline-grid;
display: subgrid;
Defining the Grid
Tracks
.grid {
display: grid;
grid-template-columns: [rinzler] 100px [flynn] 100px [quorra] 200px [sam] 150px
}Line Names
Track Sizes
A NEW UNIT HAS ENTERED THE ARENA
What's the fr...iggen deal
The fr unit
- The fr unit represents a fraction of the available space within a grid container.
.grid {
display: grid;
grid-template-columns: [rinzler] 1fr [flynn] 1fr [quorra] 1fr [sam] 1fr
}Enter, repeat()
Ughghchk So much typing
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
Grid track start and end
minmax()
- Defines a size range greater than or equal to min and less than or equal to max
Auto-placement to the rescue!
More auto-placement
- grid-auto-flow: sparse
More auto-placement
- grid-auto-flow: dense
Ugh, ya right, what about browser support?
https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
Further grid exploration
- Absolutely follow Rachel Andrew (
@rachelandrew) and Jen Simmons (@
jensimmons)
- They're the CSS Grid champions, and are doing amazing work to teach folks all about it.
- Chris House (@ chrishouse83) put together a compendium of all the CSS Grid properties and values with great explanations
- http://cssgridgarden.com/ย - fun little game to learn grid
Dominic Magnifico
Senior Front End Engineer @10up