Practical CSS Grid

Live Grid Demos:

Bryan Robinson

Founder, Code Contemporary

Formerly:

VP, Design and Development

UX Strategist

Front-end Developer

https://codecontemporary.com

https://bryanlrobinson.com

@brob

 kcdc.codecontemporary.com

 

What IS Grid, though?

Grid Container

When you define display: grid on an item, it becomes a Grid Container.

Grid Item

When an element is the child of a Grid Container, it is a Grid Item.

Grid Line

Grid Track

Images from the excellent Primer on CSS-Tricks:

https://css-tricks.com/snippets/css/complete-guide-grid/

Grid Cell

Grid Area

Thinking in Grids

Don't think about Containers

...

...

Think about the Layout

BryanLRobinson.com

CodeContemporary.com

Promo Code: KCDC for 50% off

Demos!

Questions?

Don't like asking in front of people? Hit me up on Twitter (@brob) or after

Practical Grid: Live CSS Grid Demos

By Bryan Robinson

Practical Grid: Live CSS Grid Demos

  • 424