3 ms·
ok this is a fantatsic solution. took me a while to get why this is better than joshwcomeau's solution, but now i am using this as my default. I made a respons
by swyx 4y ago
ok this is a fantatsic solution. took me a while to get why this is better than joshwcomeau's solution, but now i am using this as my default.
I made a responsive version here: https://github.com/sw-yx/spark-joy/blob/master/README.md#layout-bleed https://github.com/sw-yx/spark-joy/blob/master/README.md#lay...
.swyxcontent {
--gap: clamp(1rem, 6vw, 3rem);
--full: minmax(var(--gap), 1fr);
--content: min(65ch, 100% - var(--gap) * 2);
--popout: minmax(0, 2rem);
--feature: minmax(0, 5rem);
display: grid;
grid-template-columns:
[full-start]
[feature-start]
[popout-start]
[content-start] var(--content) [content-end]
[feature-end]
[popout-end]
[feature-end]
[full-end]
}
@media (min-width: 640px) {
.swyxcontent {
grid-template-columns:
[full-start] var(--full)
[feature-start] var(--feature)
[popout-start] var(--popout)
[content-start] var(--content) [content-end]
var(--popout) [popout-end]
var(--feature) [feature-end]
var(--full) [full-end];
}
}
- chrismorgan 4y agoYour modification is actually harming the responsiveness. What’s there already handles responsiveness perfectly, whereas your alterations break the whole point of the exercise, bleed, as well as breaking column centring.
- swyx 4y agoi effectively set the differences to 0, to let it bleed on mobile. what do you mean breaking column centring? it looks fine on my test https://deploy-preview-127--swyxkit.netlify.app/layout-breakouts-in-swyxkit https://deploy-preview-127--swyxkit.netlify.app/layout-break...
- chrismorgan 4y agoWith the code you posted in this thread paired with the proper markup, below a viewport width of 640px the column will be hard against the left edge, with a double gap (or a bit more, depending on font metrics) on the right. The problem is you’ve put this inside a container that already has a side gap, which is not how it was supposed to be used. Inspect the grid tracks on the original article at various viewport sizes. Full bleed means that the item goes right to the edge of the viewport.
- fgeierst 4y agoI arrived at a somewhat similar grid https://florian.geierstanger.org/blog/css-layout-grid https://florian.geierstanger.org/blog/css-layout-grid