Slide 1
Slide 1 text
East Bay WordPress Meetup Presentation
April 16, 2017
Slide 2
Slide 2 text
Getting to Grips
with CSS Grid
Sallie Goetsch
Slide 3
Slide 3 text
What Is CSS Grid?
CSS Grid layout brings a two-dimensional layout tool to
the web, with the ability to lay out items in rows and
columns. CSS Grid can be used to achieve many different
layouts. It excels at dividing a page into major regions, or
defining the relationship in terms of size, position, and
layer, between parts of a control built from HTML
primitives.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
“
Slide 4
Slide 4 text
How is Grid different from Flexbox?
Flexbox is designed to position items along one axis, either
vertical or horizontal. Flex rows can wrap and simulate a grid,
but Flexbox calculates item width separately on each row, so
not all items in the flex container will be the same size.
CSS Grid is designed to position items on two axes, vertical
and horizontal. Not only can it create multiple rows and
columns of aligned cells, you can use it to specify grid areas of
multiple cells.
Slide 5
Slide 5 text
Grid Terminology
• Grid Lines
• Grid Tracks and Cells
• Grid Areas
Slide 6
Slide 6 text
Grid Syntax (Eek!)
Slide 7
Slide 7 text
Best Way to Learn Grid Syntax
http://cssgridgarden.com/
Slide 8
Slide 8 text
Automatic Responsive Grid
https://tympanus.net/codrops/css_reference/grid/#section_eg1
With Grid, we can simply specify the minimum width of
each grid item, then let the browser generate enough
columns to fit the width of the container.
.container {
display: grid;
grid-template-columns: repeat(auto-fit,
minmax(15ch, 1fr));
}
Slide 9
Slide 9 text
Automatic Grid, Visualized
A
…
M
Slide 10
Slide 10 text
Automatic Grid in Action on
EastBayWP.com Home Page
Slide 11
Slide 11 text
The Bad News
So far Grid only
works in the
newest browsers.
Slide 12
Slide 12 text
Create a Fallback with Feature Queries
@supports (css-property: value) {}
Note that older browsers don’t support feature
queries. That’s why we’re using @supports
instead of @supports not
Slide 13
Slide 13 text
Fall Back to Flexbox
/* For browsers that don't support CSS Grid */
.home-row2 .tribe-list-widget {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.home-row2 .tribe-list-widget li {
flex: 1 1 240px;
}
Slide 14
Slide 14 text
Feature Query for Grid
/* For browsers that do support CSS Grid */
@supports (display: grid) {
.home-row2 .tribe-list-widget {
display: grid;
grid-template-columns:
repeat(auto-fill, 300px);
grid-gap: 10px;
}
.home-row2 .tribe-list-widget li {
flex: 0;
}
}
Slide 15
Slide 15 text
As Seen in MSIE (no Grid)
Slide 16
Slide 16 text
As Seen in Chrome (with Grid)
Slide 17
Slide 17 text
Grid Adjusts to Screen Automatically
Tablet Phone
Slide 18
Slide 18 text
Resources
Just some of my
bookmarks in
Raindrop.io about
CSS Grid. Links to
articles posted on
EastBayWP.com
Slide 19
Slide 19 text
About Your Presenter
Sallie Goetsch (rhymes with ‘sketch’) built
her first HTML website in 1994. Since
discovering WordPress in 2005, she
hasn’t looked back.
Sallie became the organizer of the East
Bay WordPress Meetup in Oakland,
California, in 2009. She runs her WP
Fangirl consulting and development
business from her home in Oakley and
appears regularly on the WP-Tonic Live
panel—with her cats.
Twitter @salliegoetsch
Email [email protected]
Phone (510) 969-9947