CSS Grid

CSS Grid cheat sheet

One liners - One liners

Units

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????

https://codepen.io/Fullchee/pen/VwQzZZV

Auto-fill vs Auto-fit

Auto-fill

• 
• adds new empty columns that occupy space

auto-fit

• 
• make the columns fit the space
• empty columns occupy no space

Full-Bleed Layout

https://www.joshwcomeau.com/css/full-bleed/

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

Refactor

const style =
    data.length === 3
      ? { gridTemplateColumns: 'repeat(3, 1fr)' }
      : { gridTemplateColumns: 'repeat(2, 1fr)' };

return <div style={style}></div>

Solution

[!info]-

return <div data-grid-columns={data.length === 3 ? 3 : 2}></div>

div {
  grid-template-columns: repeat(2, 1fr);
 &[data-grid-columns="3"] {
     grid-template-columns: repeat(3, 1fr);
   }
}

---

Last update: 2023-04-24