An Event Apart: “CSS Grid Layout”

Rachel Andrew speaking at An Event Apart Orlando 2016 at Disney’s Contemporary Resort in Walt Disney World on October 4, 2016.

Since the early days of the web, designers have been trying to lay out web pages using grid systems. Likewise, almost every CSS framework attempts to implement some kind of grid system, using floats and often leaning on preprocessors. The CSS Grid Layout module brings us a native CSS Grid system for the first time—a grid system that does not rely on document source order, and can create complex layouts which are easily redefined with media queries. Following along with practical examples, you’ll learn how Grid works, and how it can be used to implement modern layouts and responsive designs.

Notes

• Falling Cubes by Gregor Adams
• CSS3 Working Clock by Ilia
• Modern CSS Layout?
  • Floats
  • Inline-block
  • display: table
  • Absolute and relative positioning
  • Frameworks… lots of frameworks
• Things we use now for layout were never designed to be used for layout
• Our great hopes for layout:
  • Flexbox
  • CSS Grid Layout
  • Box Alignment
• Defining a grid
  • With a grid defined on the parent element, all direct children become grid items
    • display: grid; and display: inline-grid;
  • With these properties we define an explicit grid
    • grid-template-columns and grid-template-rows
    • Example — Line-based Positioning 1: 3 column tracks and 3 row tracks
      • .cards { display: grid; grid-template-columns: 250px 250px 250px; grid-template-rows: 200px 200px 200px; }
  • We can create a gap between rows and columns; This gap acts much like column-gap in multiple column layout
    • grid-column-gap, grid-row-gap, and grid-gap
    • Example — Flex and Grid demo using auto-fill and minmax
      • .cards { display: grid; grid-template-columns: 250px 250px 250px; grid-template-rows: 200px 200px 200px; grid-gap: 20px; }
  • The fr unit is a fraction unit, representing a fraction of the available space in the container
    • Example: 3 equal width columns, each 1 fraction of the available space
      • .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px 200px; grid-gap: 20px; }
    • Example: 3 columns, the units add up to 4; The space is spilt into 4 equal parts, the first 2 tracks are given 1 part, the fine track 2 parts
      • .cards { display: grid; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 200px 200px 200px; grid-gap: 20px; }
    • Example — Defining a Grid with fr units: You can mix fraction units with other length units; Any tracks with a fraction unit share the space left after fixed size tracks and the gaps have been defined
      • .cards { display: grid; grid-template-columns: 500px 1fr 2fr; grid-template-rows: 200px 200px 200px; grid-gap: 20px; }
  • The repeat syntax lets us define a repeating pattern of tracks
    • Example — Defining a Grid with the repeat notation: 3 1fr column tracks
      • .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 200px 200px 200px; grid-gap: 20px; }
  • The explicit grid is the one we define with rows and columns; If we didn’t define rows however grid would great implicit row tracks for us
    • Example — Defining a Grid using implicit grid for rows: These will be auto sized by default
      • .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }
  • We can define the size of implicit rows and column with the properties grid-auto-rows and grid-auto-columns
    • Example — Defining a Grid defining row tracks with grid-auto-rows
      • .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; grid-gap: 20px; }
  • Use the auto-fill keyword and grid will create as many tracks that will fit into the container
    • Example — Defining a Grid with the repeat notation and auto-fill
      • .cards { display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-gap: 20px; }
  • The minmax() function enables the creation of flexible grids; The first value is the minimum size of the Grid Track, the second the max size – set that to 1fr to allow the track to take up remaining space
    • Example — Defining a Grid with the repeat notation, auto-fill, minmax
      • .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); grid-gap: 20px; }
• Placing items on the grid
  • Grid track
    • A Grid Track is the space between two Grid Lines
    • Tracks can be horizontal or vertical (rows or columns)
  • Grid lines
    • Lines can be horizontal or vertical
    • They are referred to by number and can be named
    • Grid lines relate to writing mode; In a right to left language such as Arabic the first column line is the right-hand line
  • Grid cell
    • The smallest unit on our grid, a Grid Cell is the space between four Grid Lines
    • It’s just like a table cell
  • Grid area
    • Any area of the Grid bound by 4 Grid Lines
    • It can contain many Grid Cells
• Using line numbers
  • To place an item on the grid specify start and end lines using grid-column-start, grid-column-end, grid-row-start, and grid-row-end
  • These can be expressed as shorthand using grid-column and grid-row
    • Example — Grid Placement: line numbers
      • `.card:nth-child(1) { grid-column: 2 / 4; grid-row: 1 / 3; }
  • They can be expressed as one line using grid-area; the order of the values is: grid-row-start, grid-column-start, grid-row-end, grid-column-end
    • Example: grid-area: 1 / 2 / 3 / 4;
• Using line names
  • We can name lines when creating a grid; the name goes in square brackets
    • .cards { display: grid; grid-gap: 20px; grid-template-columns: [side-start] 1fr [main-start] 1fr 1fr [main-end]; grid-template-rows: [main-start] 200px 200px [main-end]; }
  • Use the name instead of the line number as the value of the placement properties
    • Example — Grid Placement: line names
      • .card:nth-child(1) { grid-column: main-start / main-end; grid-row: main-start / main-end; }
• Lines define grid areas
  • By creating lines named main-start and main-end for rows and columns, grid has created a named grid area called main that can be used to position an element rather than the line numbers or names
    • Example — Grid Placement: named lines create an area
      • .card:nth-child(1) { grid-area: main; }
• Defining grid areas
  • This doesn’t name lines, just gives each element a name:
    • .card:nth-child(1) { grid-area: main; }
    • .card:nth-child(2) { grid-area: side1; }
    • .card:nth-child(3) { grid-area: side2; }
  • Names can then be used to describe layout as the value of grid-template-areas
    • Example — Grid Placement: grid-template-areas
      • grid-template-areas: "side1 main main" "side2 main main"; }
• Line-based placement
  • Example — Line-based Positioning 1
  • Example — Line-based Positioning 2
  • Example — Line-based Positioning 3
• Grid is “table like” however…
  • Unlike a table for layout Grid does not rely on your content being a particular order in the source
  • Being entirely described in CSS we can move things around the Grid at different breakpoints, introduce or redefine a Grid for any breakpoint
• Named grid lines
  • Example — Line-based Positioning with named lines
• Named areas
  • Example — Grid Template Areas
• Implicit named grid lines
  • This creates 4 implicit named lines and can be used in the same way as lines explicitly named:
    • grid-template-areas: "header header" "sidebar content" "footer footer";
• Items on the grid can be layered with the z-index property
• Bootstrap and other frameworks rely on describing the layout in the markup — With CSS Grid Layout we describe the layout in the CSS and can redefine that description at any breakpoint
• When using CSS Grid Layout we have no need to describe our grid in markup
• With Grid Layout we can easily span rows just like columns, something grid frameworks can’t do
  • Example — Grid 12 Column experiments
• Example — Layout on the 12 column grid
  • Header and footer span full grid; content and panel display side by side
• We don’t need a Grid Layout based grid framework — It is a grid framework
• Grid Item Placement Algorithm
  • “The following grid item placement algorithm resolves automatic positions of grid items into definite positions, ensuring that every grid item has a well-defined grid area to lay out into.” — CSS Grid Layout Module Level 1
• grid-auto-flow
  • The default value is sparse
  • Grid will move forward placing items skipping cells if items do not fit
  • With dense mode, grid will move items out of source order to backfill spaces
    • Example — Grid auto-flow dense
• Grid vs. Flexbox
  • Is Grid a competing specification to Flexbox?
  • Grid and the Box Alignment Module — CSS Box Alignment Module Level 3
    • “This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.”
  • The same layout can be created with flexbox or grid
    • Example — Flexbox alignment
    • Example — Grid alignment
    • When should we use Grid instead of Flexbox then?
  • Flexbox is for 1-dimensional layout — a column or a row; Grid is for 2-dimensional layout — both columns and rows
  • Example — Flex and Grid demo using auto-fill and minmax
• Grid and Accessibility
  • Power and responsibility
    • Good = creating the most accessible source order and using Grid or Flexbox to get the optimal display for each device
    • Bad = using Grid or Flexbox as an excuse to forget about the source
    • Terrible – stripping out semantic elements to make everything a grid or flex item
  • “Correct source order is important for speech, for sequential navigation (such as keyboard navigation), and non-CSS UAs such as search engines, tactile browsers, etc. Grid placement only affects the visual presentation!” — CSS Grid Layout Module Level 1
  • Léonie Watson | On CSS accessibility and drinking tea | CSS Day 2016
  • “Flexbox & the keyboard navigation disconnect”
• Nested Grids and Subgrids
  • Example — Nested Grids
    • Make parent item a grid, then position the children
    • Children take their grid lines from the grid declared in the parent
  • Example — Subgrid
    • If we declare that this grid is a subgrid, we can then position the children of this element on the same grid their parent is placed on
  • Subgrid has not been implemented in any browsers
    • “The following features are at-risk, and may be dropped during the CR period:
• the subgrid value” — CSS Grid Layout Module Level 1
  – Without subgrid we create the potential for accessibility problems. Authors may remove semantic markup in order to use grid layout.
  – “Subgrids are essential to the adoption of grids. I hope they’ll be implemented as soon as possible, and before grids are pushed into public release channels.” — Eric Meyer, “Subgrids Considered Essential”
• Status of CSS Grid Layout
  • Very low support currently — Can I Use…
• Why are we looking at something I can’t use yet?
  • Get involved with developing specs!
    • While a spec is being developed your feedback is wanted and can be included in the spec
    • Wait until browsers ship and you lose that chance
    • It just got easier. CSS Spec issues are now on GitHub
  • Do a good deed for your future self

Speaker Links and Resources

• Grid by Example — list of examples and information
• List of resources for AEA Chicago

Related Links

• “Will we be flattening our HTML for CSS Grids?” by Chris Coyier