Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS4 Grid: True Layout Finally Arrives

1,268 views

Published on

For years, front-end developers fumbled with hacking floats for layouts, often as part of a grid system. Media queries made these float-based grids more responsive to different screen dimensions, but unfortunately, the behaviors weren't always granular enough to work well with complex layouts. Now with the new Grid specification in CSS4, we can easily define behaviors for each cell in our layouts in two dimensions. When combined with media queries, we can specify where each cell will be placed under a variety of conditions, in horizontal and vertical space. Similarities and differences with Flexbox will also be identified and discussed.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

CSS4 Grid: True Layout Finally Arrives

  1. 1. C S S 4 G R I D : T R U E L A Y O U T F I N A L L Y A R R I V E S J E N K R A M E R H A R V A R D U N I V E R S I T Y E X T E N S I O N S C H O O L www.github.com/jen4web/css4grid
  2. 2. R E S P O N S I V E D E S I G N P A R T 1
  3. 3. •  Defined by three characteristics •  Flexible grid-based layout •  Media queries (CSS3) •  Images that resize •  www.alistapart.com/articles/responsive-web-design/ •  I’ll focus on grids and media queries as others are handling images. R E S P O N S I V E D E S I G N
  4. 4. •  A hack from the start, right after table-based layout! •  Features rows and cells. •  Rows clear the floats on the cells. •  Source ordering determines display, though some (minor) rearrangement is possible. •  Major disadvantage: equal column heights F L O A T S
  5. 5. F L E X B O X N E X T U P
  6. 6. W H Y I S F L E X B O X A W E S O M E ? •  Excels at vertical centering and equal heights •  Flex property changes the container’s width/height to fill available space •  Expand to fill empty space •  Shrink to prevent overflow
  7. 7. A N Y D R A W B A C K S ? Layouts are driven by content and how it loads.
  8. 8. T H R E E V E R S I O N S O F F L E X B O X •  2009: display: box; •  2011: display: flexbox; (“tweener” syntax) •  2016: display: flex; •  Prefixing may still be required depending on browser support desired
  9. 9. C U R R E N T S U P P O R T •  Internet Explorer •  <= IE 9: not supported •  IE 10 supports “tweener” syntax (ms prefix) •  IE 11, Edge: Full support (though buggy in IE 11) •  Safari 7.1/8, iOS Safari 7/8 require webkit prefix •  Others support current syntax •  http://caniuse.com/#feat=flexbox
  10. 10. C S S 4 G R I D F I N A L L Y !
  11. 11. •  Built into CSS4 specification (in development). •  No “row” markup required. •  Grid is designed to work in 2 dimensions. •  Use Flexbox for UI elements, but use Grid for major layout. W H Y C S S 4 G R I D ?
  12. 12. •  Almost no browser support without flags: http://igalia.github.io/css-grid-layout/enable.html •  Spec isn’t fully implemented in some browsers, and/or there are bugs I S S U E S , W E ’ V E H A D A F E W
  13. 13. •  Need browser support? Can’t go wrong with floats. •  If you are OK with a few prefixes and learning something new, Flexbox may be a reasonable interim step. •  Keep waiting for CSS4 Grid! Coming to a browser near you Real Soon! C U R R E N T R E C O M M E N D A T I O N S
  14. 14. Q U E S T I O N S ? Jen Kramer Arlington, MA Phone: 802-257-2657 jen@jenkramer.org www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen

×