$30 off During Our Annual Pro Sale. View Details »

Getting to Grips with CSS Grid

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.

Sallie Goetsch

May 06, 2017

More Decks by Sallie Goetsch

Other Decks in Technology


  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