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.