2 ms·
Pity there’s no discussion of grid/flex by default, especially for someone that dislikes margins. Put grid/flex on most block elements. Spacing between boxes a
by nailer 3y ago
Pity there’s no discussion of grid/flex by default, especially for someone that dislikes margins.
Put grid/flex on most block elements. Spacing between boxes and their children is always handled with padding, spacing between siblings is always handled with gap. Everything else becomes way easier.
- klysm 3y agoSometimes I want more control than gap can provide, especially in grid. Suppose I want different gaps between different columns in a CSS grid - how would I accomplish that?
- mock-possum 3y agoWhat’s stopping you from defining the gaps as individual entries in your template? First column ‘fr’ gap ‘15px’ second column ‘fr’ gap ‘30px’ third column ‘fr’ and now you have three equal columns with two different gaps?
- muspimerol 3y agoThe downside with this approach is that I often want the element itself to define how much space is around it. When you conditionally include elements in a layout, I find margin more expressive and less cumbersome than changing the grid-template-column property of the parent.
- deleted 3y ago[deleted]
- nailer 3y ago> Suppose I want different gaps between different columns in a CSS grid - how would I accomplish that? Good question. That sounds like you have different groups. eg: you're thinking of it as: .items .item1 (thin gap) .item2 (thick gap) .item3 But it's actually: .items .sale (thin gap) .item1 .item2 .regular (thick gap) .item3
- threatofrain 3y agoI've been exploring this idea in my more recent code and so far no regrets. I'd go so far as to say that grid is often the better flexbox because (1) the DSL that allows arbitrary names is so nice for specifying alternative responsive designs and (2) it lowers the temptation to create unnecessary divs for the sole purpose of layout.