CSS Grids

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