CSS Grid Fallbacks and Overrides

In the interest of not giving the same information to people on Twitter all day every day, here is another cheatsheet. This time listing the interaction between Grid and other layout methods, when you make something laid out using one method a grid item.

Grid acts on the container

The key thing to remember with CSS Grid Layout is that it acts on the container. You define tracks and these constrain the items inside. Most other methods, including flexbox when used as a “grid”, act on the items. The only exception to this being multiple-column layout, where the column-* properties are defined on the container.

If you float something, if you create a grid with flexbox, if you use inline-block, or display: table these items stop behaving with the properties that they have from that layout method as soon as they become a grid item. What you do need to watch out for are the widths you have applied to make those legacy grids work. Setting widths back to auto within a feature query checking for grid support, will be required for many layouts.

Grid overrides and fallbacks cheatsheet.

357 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Your post must include a link to this post.

How does this work?
Write a response on your own website and include a link to this post. Then submit your response’s URL here. Your response may appear here after moderation. To update or remove it, edit or delete your original post and submit the same URL again. Learn more about Webmentions.