Menu icon Foundation
No right and left padding in grid

Hello,

 

I have this grid-x that has several cell-childen.

The red background ist just for demonstration. It will be white and the outer borders of the cells left and right should be even to the text that will be floating below. therefore i will need to remove those paddings.

I tried with nth-child etc, but that does not look like a proper solution. So i wanted to ask if there is any helper class or something like that.

 

thanks a lot!

gridcell

Hello,

 

I have this grid-x that has several cell-childen.

The red background ist just for demonstration. It will be white and the outer borders of the cells left and right should be even to the text that will be floating below. therefore i will need to remove those paddings.

I tried with nth-child etc, but that does not look like a proper solution. So i wanted to ask if there is any helper class or something like that.

 

thanks a lot!

docmojoman 7 days ago

simply set .grid-margin-x or .grid-padding-x on the grid

Kilian D. 7 days ago

no, because then there is no padding between ALL children.

I want that padding between the children cells but not to the parent.

docmojoman 7 days ago

Not sure what you are trying to do - if you are trying to justify the cells on the beginning and ending of each row, try this flexbox utilitygrid-x grid-padding-x align-justify

Kilian D. 7 days ago

Hello,

 

there is the bigger parent with the red background with the cells inside.

 

The padding between the cells is ok, but there should be NO padding at the outer left and right sides of the cells.

at the moment it is like this:

It is working with the code

 

<div class="grid-x grid-padding-x grid-padding-y" style="margin-left:-.98684rem-.98684rem">

but i want to know if there is already a class for this like no-outer-padding.

I could then use this official class instead of dirty fixing.

Best!

docmojoman 7 days ago

I think the `.align-justify` helper does just that! Me thinks you need to use this helper on the cell grid rows and wrap them all up in the same row or row type as the Content below. 

Kilian D. 7 days ago

Hello

it is a grid-x-pattern, no .row's.

And the .align-justify class, attached to the parent-div (grid-x) has no effect :(

docmojoman 7 days ago

Could you post your code?

 

I'm trying to reproduce your issue:

https://codepen.io/docmojoman/pen/GXByzQ

Kilian D. 7 days ago

hello,

the problem was that i forgot a ".cell"...

thanks for your help!

docmojoman 7 days ago

no prob!