CSS Grid: A How-To Guide

CSS GRID: A How-To Guide

Who? Me? - Jemima Abu Front end developer. Nerd. Aspiring cat lady.

What’s CSS Grid?

HEADER CONTENT SIDEBAR FOOTER Basically this.

Okay but really, what is CSS Grid?

● ● ● A 2-dimensional layout system I’m you, but better. Created specifically for layouts Allows both rows and columns Who are you? Grid ● Basically, flexbox but better Flexbox

Sounds good, how does it work?

Grid is applied to parent element: .parent { display: grid; }

Rows and columns are specified using the following properties: .parent { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px; }

The repeat property is used to simplify repetitive layout: .parent { display: grid; grid-template-columns: repeat( 3, 100px ); grid-template-rows: repeat( 2, 100px ); }

The gap property is used to space out elements in the grid: .parent { display: grid; grid-template-columns: repeat( 3, 100px ); grid-template-rows: repeat( 2, 100px ); grid-gap: 10px; }

Oh okay cool… is that all?

The awesomeness of CSS Grid

Grid-template-areas .parent { display: grid; grid-template-areas: “a a a” “b c c” “b c c”; grid-gap: 10px; } .a { grid-area: a; } .b { grid-area: b; } .c { grid-area: c; } Allows you to literally specify content placement

Grid-template-areas .parent { display: grid; Evenly spaces out elements and fits to specified width grid-template-areas: “a a a” “b c c” a a a b c c b c c “b c c”; grid-gap: 10px; } .a { grid-area: a; } .b { grid-area: b; } .c { grid-area: c; }

Grid-template-areas Also allows for blank placement .parent { a display: grid; grid-template-areas: “. a .” “. . c” c “b . .”; } Use the full-stop character “.” to specify an empty cell b

‘fr’ unit Fractional unit that fills up part of available space .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; }

‘fr’ unit Works with grid-gap .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; }

minmax() Specifies range for minimum and maximum sizes of elements in a div .parent { display: grid; grid-template-columns: minmax(25px, 50px) minmax(50px, 100px) minmax(10px, 1fr); }

minmax() With a parent width of 600px

minmax() With a parent width of 600px

minmax() With a parent width of 600px

minmax() With a parent width of 50px

minmax() With a parent width of 50px

minmax() With a parent width of 50px

auto-fill auto-fit Fills row with as many columns as can fill the row, including empty columns (?) Fills row with existing columns and expands them to take up available space (?) .parent { .parent { display: grid; display: grid; grid-template-columns: grid-template-columns: repeat(auto-fill, repeat(auto-fit, minmax(50px,1fr)); minmax(50px,1fr)); } }

Wow, that’s amazing. So how can it be used?

Regular layouts

Irregular Layouts

“That’s CSS?!” Layout

Okay I’m convinced, CSS Grid is awesome. Now let’s see some code!

Demo Time! Yay, I was out of slide content

Demo Page: https://jemimaabu.github.io/css-grid Open Source: https://github.com/jemimaabu/css-grid

Resources ● ● ● ● ● ● ● https://css-tricks.com/snippets/css/complete-guide-grid/ https://learncssgrid.com/ https://tympanus.net/codrops/css_reference/grid/ https://gridbyexample.com/examples/ https://www.awwwards.com/30-grid-based-websites.html https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-wi nners/ https://speckyboy.com/creative-examples-css-grid-layouts/

www.jemimaabu.com (Website) @jemimaabu (Everywhere else)