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/