rachelandrew.co.uk ./css

The layout for this cheat sheet uses CSS Grid Layout. It looks like your browser doesn't support it yet. Find out about support for CSS Grid Layout.

Grid “fallbacks” and overrides

Defined in the CSS Grid Specification are the ways in which grid interacts with other layout methods. These definitions mean that as soon as an item becomes a grid item, other behaviour that you may have used for older browsers is overwritten. This means that you do not have to completely fork your code and build two versions. Where you do need to overwrite CSS used for older browsers, you can do so inside a CSS Feature Query. This enables safe encapsulation of any CSS you only want a grid supporting browser to apply.

Here is a quick reference to the defined overrides with simple examples. See the resources at the end of this cheatsheet for more advice and examples.

Floated items

Float and clear have no effect on a grid item

If you float an item, in your CSS for non-grid browsers, when that item becomes a grid item float ceases to have any effect. The clear property applied to an item that becomes a grid item also no longer takes effect.

Example


<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.grid > div {
  float: left;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;
}

View the float example on CodePen

display: inline-block

Items set to inline-block become grid items

The properties associated with display: inline-block cease to apply once an item becomes a grid item.

Example


<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.grid > div {
  display: inline-block;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;
}

View the inline-block example on CodePen

display: table properties

Items set to display: table-cell will not generate anonymous boxes

If you are using the CSS table values of display for your fallback layout, using display: table-cell for example will generate anonymous boxes. THese boxes being the missing table element. If the items then become grid items this box generation does not happen so you will not end up with anonymous boxes participating in your grid layout.

Example


<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three
  <br>Has
  <br>extra
  <br>content</div>
</div>

.grid > div {
  display: table-cell;
  vertical-align: top;
}

.grid {
  border-spacing: 10px;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;
}

View the display: table-cell example on CodePen

The vertical-align property

vertical-align has no effect on a grid item

Items using display: inline-block or display: table-cell may be aligned using the CSS vertical-align property. Once these items become grid items this property has no effect and you can use instrad the Box Alignment properties to align the item.

Example


<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three
  <br>Has
  <br>extra
  <br>content</div>
</div>

.grid > div {
  display: inline-block;
  vertical-align: top;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;
}

View the vertical-align example on CodePen

Multi-column layout properties

the column-* properties in the Multi-column Layout module have no effect on a grid container.

A reasonable fallback for some grid layouts will be to use the well supported multi-column layout. If a container uses multi-column layout properties and it then becomes a grid layout they will cease to apply to the layout.

Example


<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.grid {
  column-count: 3;
  width: 500px;
}


.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
}

View the multiple-column layout example on CodePen

Flexbox

Flex items become grid items - and box alignment properties still apply

Flexbox has better browser support than Grid, therefore can be used effectively for fallback layout. The two specifications share the Box Alignment properties meaning that you can create a solid layout with flexbox and apply a small amount of grid to finesse it, without making huge changes.

Example


<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.grid {
  display: flex;
  align-items: center;
  width: 500px;
  height: 200px;
  border: 1px dotted #694486;
}

.grid > div {
  flex: 1;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
}

View the flexbox example on CodePen

Watch your item widths!

A width applied in the fallback layout may have unintended consequences.

Legacy layout usually requires adding widths to items to constrain them. Even a flexbox based grid needs widths applied to the individual items. Grid works by defining tracks which items are constrained by, no explicit widths on items are often not desirable. These widths will usually need overwriting inside your @supports block. Setting the width to auto will do the trick.

Items with a percentage width inside a sized track will take their percentage from the width of the track - not the grid container.

Example


<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

* { box-sizing: border-box; }

.grid > div {
  float: left;
  width: 33.333%;
}

@supports (display: grid) {
  .grid > div {
    width: auto;
  }
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  width: 500px;
}

View the widths example on CodePen

Additional Resources