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.fmThis 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
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))
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)
(overrides justify-items on a single element)
1
2
3
4
5
6
align-content
remember algin-* is for vertical
align-content: stretch;
(default)
(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!