How do I create equal distance between columns?

[lesliekirk]

The docs for Shadows are very good, but I find myself having trouble figuring out to create 3 columns within a div that has a has a set width. I see mention of "o-layout--spaced" but when I try to use it, I'm not finding any style for it.

I need the images to remain the same size, I would like equal spacing between the columns without the left side padding on the first column.

[Matt Zimmermann]

Hi Leslie,

Sounds like you would want to use the grids utility classes: https://docs.miva.com/readytheme-sha...ies.html#grids

[lesliekirk]

Guess I should have mentioned what I already have in place.

<section class="o-layout o-layout--justify-center u-grids-1 u-grids-3-5--m" style="max-width:60em; margin:2em auto;">
<div class="o-layout__item promo"></div>
<div class="o-layout__item promo"></div>
<div class="o-layout__item promo"></div>
</section>

I created the u-grids-3-5--m

.u-grids-3-5--m > .o-layout__item {
    flex-basis: calc(100% / 3.5);
    max-width: calc(100% / 3.5);
}

It gives me the exact width that I want the columns to be, but the spacing between the columns is too "tight". If I could get the left and right columns to be "flush" against edges, I would be happy

[Matt Zimmermann]

Hi Leslie,

I would try adding o-layout--flush to your section and control the spacing within the promo items.

[lesliekirk]

That took away all the spacing. Now the 3 columns are snug up against each other. If I remove the o-layout--justify-center then they all shift to the left, still with no spacing.

The site is behind a PPD so I can't share a link.

[Matt Zimmermann]

Hi Leslie,

Looks like you may have to play with the layout a bit. I'm not really grasping what the final layout you are looking for is.

[lesliekirk]

No worries Matt. I just wanted to make sure I wasn't overlooking something before I started adding margin. I used negative margin to overcome the left side. Now to move it from inline to the style sheet

[Bruce - PhosphorMedia]

you shouldn't have to add margins...there should be some form of 'justify' for grid spacing like bootstraps "d-flex justify-content-around" Matt?

[Matt Zimmermann]

Hi Bruce,

Correct, there is a set of "justify" classes which could be used: https://github.com/mivaecommerce/rea...cts/layout.css

[lesliekirk]

you shouldn't have to add margins...there should be some form of 'justify' for grid spacing like bootstraps "d-flex justify-content-around" Matt?

I am using "justify"