Menu icon Foundation
Foundation 6 Nested Grid, negative margins on nested row

Hi there,

I'm trying to use a really simple nested row but can't get it to work. I've looked up the forum and found similar posts but I'm sure that I'm closing the rows and columns in the correct order.

The problem is, if i use a nested row it gains negative margin which throws it off the grid.
Please have a look at the code and the screenshot. Can't get my head around this.

Thanks for your help.

// My grid settings
$grid-row-width: 100%;
$grid-column-count: 16;
$grid-column-gutter: 20px;


// HTML, I want the columns to be stacked on top for small screens and to be aside on large screens
// The card class only applies some styling like a box-shadow
<div class="row">
    <div class="small-16 columns">
		<div class="row">
			<div class="card">
				<div class="small-16 large-8 columns">
					// CONTENT OF COLUMNE ONE (SOME TEXT)
                    COLUMN ONE
				</div>
				<div class="small-16 large-8 columns">
					// CONTENT OF COLUMN TWO (ONE IMAGE)
                    <img src="#">
				</div>
			</div>
		</div>
	</div>
</div>
            

         

Current state

Should be state

grid systemnestedRowsNegative Margin

Hi there,

I'm trying to use a really simple nested row but can't get it to work. I've looked up the forum and found similar posts but I'm sure that I'm closing the rows and columns in the correct order.

The problem is, if i use a nested row it gains negative margin which throws it off the grid.
Please have a look at the code and the screenshot. Can't get my head around this.

Thanks for your help.

// My grid settings
$grid-row-width: 100%;
$grid-column-count: 16;
$grid-column-gutter: 20px;


// HTML, I want the columns to be stacked on top for small screens and to be aside on large screens
// The card class only applies some styling like a box-shadow
<div class="row">
    <div class="small-16 columns">
		<div class="row">
			<div class="card">
				<div class="small-16 large-8 columns">
					// CONTENT OF COLUMNE ONE (SOME TEXT)
                    COLUMN ONE
				</div>
				<div class="small-16 large-8 columns">
					// CONTENT OF COLUMN TWO (ONE IMAGE)
                    <img src="#">
				</div>
			</div>
		</div>
	</div>
</div>
            

         

Current state

Should be state

This post has been closed. No new replies can be added.

Tobias Malikowski over 3 years ago

Okay I think what I want to archive is not possible.

If I set my $grid-row-width to the default:

$grid-row-width: rem-calc(1200);

I archive the desired result for large screens. However on small screens the .card has 100% width of the viewport because the nested row is 100% of the viewport. So I think the only way is to overwrite the .row .row css for this particular case on small screens.

Any suggestions of how doing this without overwriting default values from the grid system are highly appreciated.

Tobias Malikowski over 3 years ago

Okay could solve this by myself. Just add .collapse to the inner row. This will set the margins (left and right) to 0. Exactly what I needed.
HTML
<div class="row collapse">

This can be found in the docs (http://foundation.zurb.com/sites/docs/grid.html) and I already knew about it, but never tried this because of the description in the docs: "The .collapse class lets you remove column gutters (padding)."

But I forgot if there is no Padding on the outer row, there is also no negative margin on the inner row.