Introduction to Grid

Instructions: Click on the "CSS" button in each example to see the wonderful code behind the example.

Can I even use Grid?

Can I Use grid? Data on support for the grid feature across the major browsers from caniuse.com.

Why tho? - Some History

CSS has always been used to layout web pages, but was never very good at it. Flexbox helped out, but it's intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together).

Grid examples

Let's open up these pages in Firefox

• Grid Masterclass
• Piet Mongrid
• Marvel Grid

Normal Block Elements

See the Pen Grid Lab 1 by David Whitaker (@damwhit) on CodePen.

What happens if we turn on Grid?

See the Pen Grid Lab 2 by David Whitaker (@damwhit) on CodePen.

Nothing yet. We need to specify our grid-template

The grid-template-columns Property

See the Pen Grid Lab 3 by David Whitaker (@damwhit) on CodePen.

We can give each column fixed units

The fr Unit

See the Pen Grid Lab 4 by David Whitaker (@damwhit) on CodePen.

We can also use a new unit that will take up a fraction of the grid.

Your turn - check out the grid in the 'Inspector' area of your firefox devtools

Dry it up using repeat() Notation

See the Pen Grid Lab 5 by David Whitaker (@damwhit) on CodePen.

The grid-template-rows Property

See the Pen Grid Lab 6 by David Whitaker (@damwhit) on CodePen.

Thus far, our grid rows have been implicity set. But you can also explicitly set them using this property.

The grid-gap Properties

See the Pen Grid Lab 7 by David Whitaker (@damwhit) on CodePen.

Your turn - How do you add space between only rows? What about between only columns?

Changing the size and position of elements

See the Pen Grid Lab 8 by David Whitaker (@damwhit) on CodePen.

Changing the size and position of elements ...continued

See the Pen Grid Lab 9 by David Whitaker (@damwhit) on CodePen.

Fill in the gaps using grid-auto-flow: dense

See the Pen Grid Lab 10 by David Whitaker (@damwhit) on CodePen.

Note that this will change the position of elements and therefore may not be great for accessibility.

Utilizing auto-fit

See the Pen Grid Lab 11 by David Whitaker (@damwhit) on CodePen.

auto-fit allows us to make our grid adaptive

Adding minmax

See the Pen Grid Lab 8 by David Whitaker (@damwhit) on CodePen.

The addition of minmax() makes things responsive

Using grid-template-areas

See the Pen Grid Lab 8 by David Whitaker (@damwhit) on CodePen.

Use grid-template-areas in conjunction with the grid-area to name your areas

Additional Resources