Grid by Example

This is a simple, non-responsive layout using the line-based placement properties. I have created a layout that is essentially an old school liquid layout with two fixed width columns and an auto stretching content area.

• Defining a Grid
• Line-based placement

This is a simple, responsive layout using the line-based placement properties and three breakpoints.

I am using the shorthand grid-row and grid-column properties in this example.

• Defining a Grid
• Line-based placement
• Line-based placement shorthand

A simple responsive layout with three breakpoints. This time I am using the grid-area to define the named areas of the grid and describing the grid with the grid-template-areas property within the Media Queries.

• Redefining Grid Areas
• Media Queries

• Defining a Grid
• Line-based placement
• Line-based placement shorthand

• Naming Grid Lines

• Defining Grid Areas
• Redefining Grid Areas with Media Queries

An example demonstrating how Grid can be used to create a flexible multiple column grid. This example uses the repeat keyword and named grid lines.

• Line-based placement
• Line-based placement named lines with span
• The Repeat Keyword

Creating a simple three column layout by placing items onto our 16 column grid, as an example of how this could be used in practice.

• Line-based placement
• Line-based placement named lines with span
• The Repeat Keyword

Taking the grid used by the Skeleton framework as an example. Demonstrating how CSS Grid Layout removes the need to describe layout in markup.

• Line-based placement
• Line-based placement named lines with span
• The Repeat Keyword

Taking the grid used in my Skeleton experiments and using that for a layout.

• Line-based placement
• Line-based placement named lines with span
• Repeat Keyword

I was interested in whether I could recreate the example used inthis blog post about the Susy Grid System. Susy is a very clever semantic Grid system that relies on pre-processing CSS to calculate your grid.

• I have fixed the row heights just to match the Susy example. In Grid Layout you actually have the benefit of being able to easily have full height columns if you want them.
• This is an example where the lack of subgrid became an issue. The layout is absolutely doable but you can see the problem of fraction widths in the gutters. I’d have liked the nested grids to conform to the main grid.
• It works! Other than the subgrid issue I could create this complex nested grid without any need for a preprocessor, complicated math, or clear fixes.

A simple example used in my presentation for the Responsive Web Design Summit, to demonstrate using Grid for the main layout and Flexbox for UI items.

Playing with the Auto Placement algorithm and dense and sparse grid-auto-flow modes.

• The example is responsive, and I redefine the grid at 2 breakpoints after the initial single column grid.
• The list item containing text is actually positioned upon the grid. All other elements are placed using auto-placement.
• There are no gutter columns, spacing is just margins and padding on the elements.

• Read an in-depth article about how Grid Auto-Placement works from Manuel Rego Casasnovas who is working on the implementation.

• Grid auto-flow
• Grid auto-flow with a positioned element