2022-11-29.md

publish_date	tags
2022-11-29	css

• To allow for full bleed elements in the CSS grid, we can't use max-width on inner elements because we can't "break out". Instead, we can define the outer gutters as auto-growing columns. but what if we want to define the inner container as a specific size?

.layout {
  display: grid;
  grid-template-columns:
    calc( 50vw - 500px )
    repeat( 8, 1fr )
    calc( 50vw - 500px);
}

This trick means we have an inner grid of 8 columns that is constrained to just 1000px . as the outer gutters are half the size of the screen minus max-screen size / 2 . For some reason the maths checks out!

• https://ethanmarcotte.com/wrote/css-grid-without-max-width/