grid-template-rows with named columns for advanced/flexible/automatic layouts
I am trying to make some components (like cards) more flexible by using grids with named columns / named rows to place content with some sort of paddings, but without the need of using paddings.
8 Replies
As you can see, I'd like to be able to add a grid-like gutter to avoid needing to wrap the contents that should be spaced from the edges to be wraped within divs with paddings. Like that, everything would, by default, be on the
content column but if I want to make some elements taking 100% of the card, I would then put them on the card column.
The thing is that I would like the same behavior with the rows BUT the difference here is that I would have a first and the last rows being some spaces, and I'd like the content to, by default, be within itHere is the updated example with what I'm trying to do
I made a codepen with the code shown in my screenshots https://codepen.io/lcsga/pen/dyBOqGg?editors=1100
As you can see, I don't have any named columns, and the rows, doesn't work as I expect them to, at all (no gutter at all)
I really can't figure out what I'm doing wrong... I also saw on mdn that you can name rows within
repeat but I couldn't make it work either
I could of course make it work by removing the
repeat function, with always 3 rows, just like for the columns, then always have the content within a wrapper where I would have all of the control I'd like to, but I'd like to avoid that if there is a way to achieve the same thing without it
(In the end, I'm trying to find the limits of grids 😅 If I must go with a wrapper there is no problem at all 😜)
(Also if you want to see a more concrete use case of what I'm trying to improve, you can take a look at this little technical test I made and partly implemented. To deal with the top/bottom gutters, I currently have block paddings and I override them if needed, but I feel like I could do something better!)
I could also do this, overriding the grid-template-rows, but it feels a little less flexible that with the padding-block
For examle, if I want to space the p from the image, I need to add a margin-top to it instead of "simply" adding a gap on the card (wich is something I could "easily" do in my stackblitz example)
Nobody has an idea? @Kevin it is inspired of one of your videos, maybe you have some answers/hints for me?I'm out of town and only on mobile at the moment, so I haven't been able to play with your codepen, but based on what your asking, I'm not sure if grid is the best solution tbh.
I do like using grid for a larger scale layout, but for individual components, I don't really see the benefit of replacing padding.
You mentioned not wanting all the elements to be "padded", but for that, I personally like this type of approach for this type of layout:
https://smolcss.dev/#smol-card-component
SmolCSS
Minimal snippets for modern CSS layouts and components
Hey! Thank you for your answer! This is exactly what I was looking for => Are there come techniques I don't know with grids that would be "better"/"easier" than playing with selectors/paddings! => not atm (maybe never, and it's 100% okay)! 😄