Kevin Powell - Community•2w ago

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. -# Best wishes __

4 Replies

Fancy Nancy•2w ago

I'm not sure I fully understand your question. You want to add an on-demand padding in a grid layout without disturbing the content’s alignment, using CSS techniques that don’t rely on ::before or ::after pseudo-elements, nor require extensive redefinition of padding-inline? Maybe add extra empty columns on each side for padding? Something like this:

<div class="grid-container">
    <div class="grid-item with-padding">Padded Content</div>
</div>

<div class="grid-container">
    <div class="grid-item no-padding">Non-Padded Content</div>
</div>

<div class="grid-container">
    <div class="grid-item with-padding">Padded Content</div>
</div>

<div class="grid-container">
    <div class="grid-item no-padding">Non-Padded Content</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 1fr minmax(0, 1rem) 2fr minmax(0, 1rem) 1fr;
}

.grid-item.with-padding {
    grid-column: 2 / span 3;
}

.grid-item.no-padding {
    grid-column: 3;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr minmax(0, 1rem) 2fr minmax(0, 1rem) 1fr;
}

.grid-item.with-padding {
    grid-column: 2 / span 3;
}

.grid-item.no-padding {
    grid-column: 3;
}

Created 5 columns in the container. 1fr on both sides for flexible spacing, wrapping minmax(0, 1rem) on both sides in case you apply the padding class. If that is indeed what you meant, are you sure you're asking the correct questions? What is your use case? What design are you attempting to achieve? If that is not what you meant, I apologize, and ask that you further clarify or elaborate on the question.

ZempaiOP•2w ago

Thank you for your well formed questions. I guess my mind was indeed reeling while I tried to present my issue. While working along Kevin's videos, I ended up with the goal to create a modular and isolated grid-layouting boilerplate(?) which could be included as a component to an existing CSS framework. -# (because I feel like thats somewhat missing there) But along the way I reached my skill-cap and kind of was not sure how and where to continue refining bits an pieces of what is saved in the codepen. The special content-areas like .featured or .breakout clearly demand padding, if colorfully highlighted. Therefore I got interested in asking ‚how would others solve that?‘ My second issue right now is extending the grid-template-columns or size calculations without destroying it 😂 ... Your proposal to always take the extra space into account seems like "the cleanest" if I can get it to work. Refering to the pen, should/can I add this minmax() to the existing width variables? – or is this the wrong place to do that I do see that a boilerplate like this will always be incomplete and needs fine-tuning – but having the most common layouting snippets ready to use seems reasonable.

clevermissfox•2w ago

I would also recommend using grid-areas or named grid lines ; I prefer this so you don’t have to override every child’s grid-column in a media query , you just override the grid declaration. A way to implement this:

.grid-container {
  display: grid;
  grid-template-columns: 
    [full-start] minmax(1em, 1fr) [breakout-start] minmax(1em,20px) [content-start] minmax(min(100%, 700px), 1fr) [content-end] minmax(1em, 20px) 
[breakout-end] minmax(1em, 1fr) [full-end] ;
}

.grid-item.content {grid-area: content}
.grid-item.breakout {grid-area: breakout;}
.grid-item.full-width {grid-area: full;}

.grid-container {
  display: grid;
  grid-template-columns: 
    [full-start] minmax(1em, 1fr) [breakout-start] minmax(1em,20px) [content-start] minmax(min(100%, 700px), 1fr) [content-end] minmax(1em, 20px) 
[breakout-end] minmax(1em, 1fr) [full-end] ;
}

.grid-item.content {grid-area: content}
.grid-item.breakout {grid-area: breakout;}
.grid-item.full-width {grid-area: full;}

then instead of having to override any declarations of grid-column: 2 / 4; on every child you declared it on, you would just override the grid-template-column on one selector . Not so applicable with this example that basically has one main content column but if you have more columns in the content area it makes it much easier to work with . Otherwise you’re hunting down every grid-column declaration and rewriting it.

Simon•7d ago

-# Zempai posted from his work account Thanks for your input fox 😄 the line naming approach was actually present in my pen all along, but it is nice to know that I took a good path with that. As for adding the padding: I accidentally noticed on Josh Comeau's site, that he basically uses the same grid-layouting concept while giving visually highlighted elements some space to breath. After digging – it's a silly little math snippet

.inset {
  padding-inline: 32px;
  margin-inline: calc(32px * -1);
}

.inset {
  padding-inline: 32px;
  margin-inline: calc(32px * -1);
}

Honestly, I will go for this approach while I don't have the expertise to set up a more complex grid. And after all maybe there is nothing to outsmart

Gaming

Programming

CSS – managing grid-template-columns sizes with classes