"Is it still the old method that involves stretching elements to 100vw and then moving them in the negative direction of the x axis via an offset, margin, or translation? Or is it the newer method that involves a grid with a limited width main column in the middle then symmetrical columns on the sides, with elements spanning an odd number of columns"
"The old method described in the 2016 CSS-Tricks article has the disadvantage of relying on a Firefox bug (that has been fixed since 2017) to work well in all situations. The problem is that 100vw doesn't take into account any vertical scrollbars we might have (and no, the new viewport units don't solve that problem either). This leads to the 100vw width elements being wider than the available horizontal space if there is a vertical scrollbar, overflowing and causing a horizontal scrollbar,"
Full-bleed elements span the browser edges while breakout elements extend beyond a centered, limited-width main column. Two common techniques are the 100vw offset hack and grid-based column spanning. The 100vw method can cause overflow when vertical scrollbars exist because 100vw ignores scrollbar width, and it historically relied on a Firefox quirk. Grid-based layouts create a central constrained column with symmetrical side columns, allowing elements to span more columns for wider or full-bleed visuals. No single technique is always best; modified or combined approaches using modern CSS can address specific use cases and browser behaviors.
Read at Frontendmasters
Unable to calculate read time
Collection
[
|
...
]