A presentation at Frontstack in in Lagos, Nigeria by Jemima Abu
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)
CSS Grid is literally the best thing to happen to CSS. I mean manipulative layout, easy responsiveness and vertical centering. What’s not to love. In this talk, we’re going to get down into the nitty gritty of the Grid and see just how much awesomeness can be achieved with it.
Here’s what was said about this presentation on social media.
for free. You
can too.