remove margin / offset so grid elements are full width of container

[starchild]

I'm sorry if this is such as noob question as to make you facepalm, but......

Say I have a bunch of columns within a grid - how can I remove the left margin of the ones in the left column and make the items fill the container they are in?

I don't mean make each column 100% width, but basically increase the container width to allow for the margins / offset.

Does that makes sense?

thanks :)

[sebastiano-guerriero]

Hi! No prob at all :)

The columns should already take the whole container width. There are a few cases where this may not happen, for example if you add the .grid class to a column item:

<ul class="grid">
  <li class="col grid">
    <div class="col-6"></div>
  </li>
</ul>

<!-- do this instead 👇 -->
<ul class="grid">
  <li class="col">
    <ul class="grid">
      <li class="col-6"></li>
    </ul>
  </li>
</ul>

In general, you can try adding an empty <div> element around the grid that is causing margin troubles and see if it fixes the issue. This problem no longer exists in modern browsers (if you're using v3 of the framework) .

[starchild]

thanks, almost, but maybe this image example will explain it better. It only happens when I use grid-gap

https://drive.google.com/file/d/12GxpH9Zp18xm-U5eIsufk6NDoVc3qs7Z/view?usp=sharing

[sebastiano-guerriero]

Can you show the grid code in this example?

[starchild]

it's grid gap that causes the issue and I found that the fix that seems to work is changing -1 to -0.75

.grid-gap-md, .grid-gap--md {
margin: calc(var(--space-md) * -1) 0 0 calc(var(--space-md) * -0.75);
}

btw, I'm on v2.93