Skip to content

CSS Grid

CSS Grid cheat sheet


1fr vs auto

auto is shy

1fr is greedy

  1. grid calclates the min width of the auto items
  2. gives the rest of the space to fr units
  3. if there isn't any fr units, give the rest of the space to the auto items

If there isn't enough space, auto looks bigger than 1fr?

1fr might be greedy when it comes to taking space away too????

Auto-fill vs Auto-fit


  • 922ec503ac8c417fa3ba5fc6153c4e82.png
  • adds new empty columns that occupy space


  • a58ffd7243a8a657fdc3b1e5d5a8f655.png
  • make the columns fit the space
  • empty columns occupy no space

Full-Bleed Layout

.wrapper {
    display: grid;
        min(65ch, 100%)
.wrapper > * {
    grid-column: 2;
.full-bleed {
    width: 100%;
    grid-column: 1 / 4;

Last update: 2022-11-04