Getting to Grips with CSS Grid

An introduction to CSS Grid and a real-life example of the use of an automatic responsive grid with flexbox fallback on the new EastBayWP.com website.

Transcript

1. East Bay WordPress Meetup Presentation April 16, 2017
2. Getting to Grips with CSS Grid Sallie Goetsch
3. 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 “
4. 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.
5. Grid Terminology • Grid Lines • Grid Tracks and Cells • Grid Areas
6. Grid Syntax (Eek!)
7. Best Way to Learn Grid Syntax http://cssgridgarden.com/
8. 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)); }
9. Automatic Grid, Visualized <div class="container"> <div class="grid__item a">A</div> … <div class="grid__item m">M</div> </div>
10. Automatic Grid in Action on EastBayWP.com Home Page
11. The Bad News So far Grid only works in the newest browsers.
12. 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
13. 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; }
14. 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; } }
15. As Seen in MSIE (no Grid)
16. As Seen in Chrome (with Grid)
17. Grid Adjusts to Screen Automatically Tablet Phone
18. Resources Just some of my bookmarks in Raindrop.io about CSS Grid. Links to articles posted on EastBayWP.com
19. 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 sallie@wpfangirl.com Phone (510) 969-9947