Start Here

• Nick Salloum. Easy Responsive CSS Grid Layouts: 4 Methods. Sitepoint. – Provides an overview of four different methods of creating CSS responsive grid layouts: (1) negative margins, (2) box-sizing: border-box, (3) table display, (4) flexbox.

Box-Sizing

All major browsers support this functionality.

Flexible Box Layout Module (Flexbox)

Support across browsers is good, though IE is lacking a little bit.

CSS Grid Specification

This specification is still in-process, a polyfill is available, but only IE and Edge fully supports currently.

Basic Terminology

• Rows – Run horizontally.
• Columns – Run vertically.
• Cells – A specific location defined by the combination of row and column.
• Tracks – An entire row or column.
• Lines – Area and cell walls (think table borders).
• Areas – Layout sections (header, sidebar, content, footer).
• Item – The content placed inside the grid; a child grid layout is considered a grid item.
• Proportional Grid – One in which the grid expands proportionally.
• Fixed-Gutter Grid – A grid in which the gutters do not expand proportionally.

Bibliography / Further Reading

• CSS3 Grid Specification:
  • Jenni McKinnon. Understanding CSS Grids for Modern WordPress Design. wpmudev, 11/20/15.
  • Lenny Witman. 4 Different HTML/CSS Layout Techniques to Create a Site. codementor, 6/2/15. – A good companion to Nick Salloum’s article under Start Here above.
  • Patrick Brosset. The Future of Layout with CSS: Grid Layouts. Mozilla Hacks, 9/9/15.
  • Zell Liew. Website Layout Tools Compared: Flexbox Vs. Susy. Smashing Magazine, 12/14/15. – Lots of helpful example code using both Flexbox and Susy and working with five different grid layouts.