Kevin Powell - CommunityKP-C
Kevin Powell - Community15mo ago
4 replies
Zempai

CSS – managing grid-template-columns sizes with classes

Sup (:
Thanks for your time – I am looking for a clever and perhaps overengineered way to add padding on demand without altering the vertical text/content position.
While layouting with
grid
, the idea is to have a nice (padding)class, that adds to the element area but keeping the content in line.

It is very likely possible to fake with before/after, but that always feels last-resort-ish to me.
Another way could be to always take the padding-inline into account, and it only becomes visible by adding background. But isn't this kind of dull?

Is there a way to override a specific part of grid-template-columns and add a calc()? –the element breaking the grid, essentially
Opinions?

TMI
Excuse my messy draft code: https://codepen.io/SimonDerDude/pen/NWQYrRG
I basically started to merge two of Kevin's no-traditional-wrapper proposals and learn more about it, it does be silly fun.

I also beg you to just throw ideas or simplifications at me, even if unrelated to the question but related to the pen.
__
Was this page helpful?