Skip to content

Instantly share code, notes, and snippets.

@dutchcelt

dutchcelt/grid-equal-col-widths.css

Last active July 19, 2022 09:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dutchcelt/21032054523ebfbd0ff9f2c6a567f32d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dutchcelt/21032054523ebfbd0ff9f2c6a567f32d to your computer and use it in GitHub Desktop.
Download ZIP
grid-equal-col-widths
Raw
grid-equal-col-widths.css
/* `1fr` in grid templates allows for content to be wider than the fraction to prevent content overflow.
* In this context `1fr` is actually: `minmax(min-content, 1fr)`.
* Replacing `min-content` with `0` forces the fraction to be upheld.
*/
.columns {
--_cols: var(--cols, 3);
display: grid;
grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment