Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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 “
  2. 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.
  3. 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)); }
  4. 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
  5. 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; }
  6. 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; } }
  7. Resources Just some of my bookmarks in Raindrop.io about CSS

    Grid. Links to articles posted on EastBayWP.com
  8. 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