Hi, I'm Wes Bos


JS Guy Giving a CSS Talk at a PHP Conf

wat

Who invited this guy?

Who invited all these Canadians?!

Sorry..

How to slap together a WordPress theme

Top 10 Code Igniter Tips

Editing files straight from the server

yolo updates

Laravel.js

CSS Grid

These slides will be available shortly after this talk
I'll tweet the link out.

@wesbos

I make Web Development Courses

ES6.io
ReactForBeginners.com
LearnNode.com
JavaScript30.com
CSSGrid.io
Syntax.fm

This talktorial is about CSS Grid

You'll leave with a good idea of what CSS Grid is, when to use it and all of the different pieces.

CSS Grid

CSS Grid is a brand new layout system in CSS! It's not a framework or library - it's an addition to the language that allows us to quickly create flexible, two dimensional layouts.

Core Ideas

ya grids and ya items

Define a grid

Take an Element and slice it up

Put some items in your grid

The Code

1
2
3
4
5
6
7
8
9

Let's Break It Down

Tracks

Columns and Rows

Your define a grid with display: grid;

Slice it up with Columns

1
2
3

And Rows

1
2
3
4
5
6

By Default items will span to fit 1 grid spot

more on this soon

Grid Items can be Anything

divs, p, img...

But will overflow

2
3

with a rigid grid size

5
6

Implicit vs Explicit Grids

What Happens when we have more items then slots?

1
2
3
4
5
6
💩

👆🏻

Once you run out of defined grid spots, the explicit grid ends and the implicit grid starts.

I only defined 2 rows here

It's Extended 1 more implicit row

The Height of the row is defined by content

Unless you set the height of implicitly created rows.

1
2
3
4
5
6
💩

👆🏻

You can even have a 100% implicit grid!

1
2
3
4

Axis

or grid-auto-flow

With Flexbox, you can change the Axis from left-to-right (row) to top-to-bottom (column)

CSS Grid doesn't have the ability to change the axis

buttt...

Once explicit spots are used up, additional rows are created.

I know Wes, you just showed us

We can change this from additional rows to columns

By default, this grid is 1 columns, additional elements are added as rows.

1
2
3
4

We can switch that so additional elements are added as columns

1
2
3
4
1
2
3
4

1 and 2 are explicit
3 and 4 are implicit
This can cause horizontal scrolling

Sizing Tracks

A Few ways

We can specify the width of columns and the height of rows with any existing CSS Unit

1
2
3
4
5
6

Percentages

Fine when used in combination or auto

1
2
3
4
5
6

Not for adding up to 100%

80% + 20% + 20px = ???

Remember the days before border-box?

1
2
3
4
5
6

Solution: Fractional Units

I like to think of them as "Free Space" units

1
2
3
4
5
6

The Browser will first dedicate space towards the things that need a specific amount room - existing content, fixed sized tracks and grid-gap. Then, the remaining space will be divided up in proportion - much like flex-grow.

1
2
3
4
5
6
1
I have a fixed width
3
4
5
6

The repeat() Function

repeat() allows us to, well, repeat CSS Grid Tracks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Can be used multiple times

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

And Mixed With Other Units

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Sizing Items

So far everything has been just about the containing Grid

Sizing an item expands that track

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Or Spills out in rigid tracks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

In most cases, the best way to size grid items is to span multiple grid spots.

At it's simplest you just take up more than one spot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

If an item is too large, it will go onto the next track, leaving spaces behind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

grid-auto-flow: dense; fixes this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Line Numbers

Quick Aside

Tracks are numbered by their gutters, not the tracks

We can also tell an item where to start and/or stop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

-1 spans to the end of the explicit grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Handy to span the entire top of a grid

Header!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Specify where an item ends

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

auto-fit and auto-fill

Let's say we have a grid with a flexible width and 20px of gap. How many 100px tracks can we fit?

We can fit 6 and have a bit of extra space. Now resize it!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

auto-fit won't create tracks out of empty space

auto-fill does

Why?

enter minmax()

minmax()

guess what it does

minmax()

takes 2 arguments, a min and a max.

minmax()

Works with auto-fit and auto-fill

grid-template-columns:
repeat(auto-fill, minmax(350px, 1fr))

1
2
3
4
5

Responsive without media queries

Container Aware - not based on viewport

Handy as Heck

One of my most used parts of grid

Grid Template Areas

Another way to define where items go is the create areas on your grid and name them.

Header
Ads!
Main Content
Sidebar
Footer!
Header
Ads!
Main Content
Sidebar
Footer!
Header
Ads!
Main Content
Sidebar
Footer!

Named Lines

When you name areas, you get named lines for free

01
02
03

You can also create your own names

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Alignment and Centering

I bet you have a funny joke about centering things in CSS

CSS Grid is amazing for just aligning elements

Six Alignment Properties

justify-*
for rows axis — Horizontal

align-*
for column axis — Vertical

1
2
3
4
5
6

justify-content

How to align the tracks

justify-content: center;

1
2
3
4
5
6

justify-content: start;

1
2
3
4
5
6

justify-content: end;

1
2
3
4
5
6

justify-content: space-between;

1
2
3
4
5
6

justify-content: space-around;

1
2
3
4
5
6

justify-items

How to align the elements inside the tracks

justify-items: stretch; (default)

1
2
3
4
5
6

justify-items: center;

1
2
3
4
5
6

justify-items: start;

1
2
3
4
5
6

justify-items: end;

1
2
3
4
5
6

justify-self: end;
(overrides justify-items on a single element)

1
2
3
4
5
6

align-content

remember algin-* is for vertical

align-content: stretch;
(default)

1
2
3
4
5
6

align-content: center;

1
2
3
4
5
6

align-content: start;

1
2
3
4
5
6

align-content: end;

1
2
3
4
5
6

align-content: space-around;

1
2
3
4
5
6

align-content: space-between;

1
2
3
4
5
6

align-items

For aligning content inside of the tracks

align-items: stretch;

1
2
3
4
5
6

align-items: center;

1
2
3
4
5
6

align-items: start;

1
2
3
4
5
6

align-items: end;

1
2
3
4
5
6

align-items: baseline;

1
2
3
4
5
6

align-self: end;

1
2
3
4
5
6

Whew!

That is a lot!

Still So much more

I cover it in my free course at CSSGrid.io

CSS Grid
VS
Flexbox

Real Website use cases

Component Examples

Dev Tools

Mobile / MQ

Re-ordering Elements

Overlapping Elements

Dealing with Unkown Number of items

Dense block-fitting Grid

Full Bleed Page Layout

CSS Grid is huge

CSS Grid is the future!

It's well worth learning

Get at it!

Thanks!

I have stickers!