A presentation at Fenders Perth in in Perth WA, Australia by Anton Ball
Anton Ball Fenders, January 2018
Anton Ball Senior UI Integrator at Velpic
What’s Grid? CSS Grid Layout is a CSS layout method designed for the two-dimensional layout of items on a webpage or application. Rachel Andrew
Basic grid
What’s this?
What’s this?
What’s this?
What’s this?
Example HTML
So what’s new? • display: grid • grid-template-columns/grid-template-rows • grid-gap Where the magic happens. All children to grid items The number and size of the columns/rows. There’s shorthand syntax…but I wont use it Essentially the margin between cells. You’ll know gutter if you have used a grid framework before.
That’s interesting… if you’re making a static gallery Lets look at new units and CSS functions and make our grid fluid
New unit on the block, fraction (fr)
Setting up rows and columns is repetitive If we had a lot more columns than we are currently making, this will get painful. Enter repeat.
repeat()
Cells could get tiny, so minmax() Sets the sizes no smaller than the min and no greater than the max. You can get a long way with this without needing media queries!
minmax()
All together now You aren’t limited to just one of the units we have discussed. You can mix them all together.
All together now
Row/Column further reading • grid-column: span • grid-template-column: auto/auto-fit • grid-auto-rows/columns You can define how many columns to span Enables a lot of responsiveness without media queries Create implicit grid tracks
Positioning areas
Positioning areas
Grid column/row
Overlap 1 2 3 4 2 3 4 5
The holy grail at least it was.
The holy grail
We can do better the numbering can be tricky, naming is a nicer option
The named holy grail
Responsive
Named lines You can name each line in a row or column
Named lines
Named lines
Named lines
Support It’s not bad
Use in production • There’s no Polyfill • @supports(display: grid) • JS load a fallback Grid is too complex Fallback will likely be Flex - depends on your project There’s efficiency to be gained Stripe does this, but…
Further Reading • Rachel Andrew • gridbyexample.com/ • Wes Bos is releasing a grid course • mozilladevelopers.github.io/playground/ anything - book, talks, blogs, but especially:
Thank you Examples on CodePen: https://codepen.io/collection/nLxmgY/
CSS Grid, the new layout system of the web. Lets start from the start and see how to build a grid and what is possible with new display properties, units and a new approach to laying out projects. Previously designs that would make you sigh become a breeze to develop. Leaving room for brand new approaches to layout.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.