Why Zurb Foundation row width is reduced by one gutter width? - grid

Question

I'm using Foundation 5 with Sass. In _settings.scss you can change width of the row and gutter. By default row is set to 1000px but if you measure in Photoshop the width of the 12-column page it's just 970px wide. I also found out that width of the gutter is set to 30px.
My questions are: why 1000px row is in reality 970px wide? Do I have to worry about it? Or maybe if I want 1000px wide page I have to set row to 1030px?

Answer 1

To answer your question, you should know more about the grid and how the 'gutter' has been constructed.
The large grid (with the large-* classes) will be applied for viewports wider than 64.062 em (~1025px). On the large grid the '.row' got:
max-width: 62.5rem; // (~1000px)
width: 100%;
So on large screens your .row's are 1000px wide indeed.
Now the grid columns dive each row using percentage. So a large-12 column (spans 12 columns) got a width of 100%, a large-4 got 4/12 = 33,33% and a large-1 got 1/12 = 8,33%.
The above means that a large-12 has a width of 100% of the .row class, so on the large grid 62.5rem; (~1000px).
You can make the preceding visible as follows:
HTML:
<div class="row">
<div class="large-6 columns"><div>text</div></div>
<div class="large-6 columns"><div>text</div></div>
</div>
<div class="row">
<div class="large-4 columns"><div>text</div></div>
<div class="large-4 columns"><div>text</div></div>
<div class="large-4 columns"><div>text</div></div>
</div>
<div class="row">
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
<div class="large-1 columns"><div>text</div></div>
</div>
SCSS:
.row {
background-color: yellow;
div {
background-color: darkblue;
}
color: white;
}
In your browser the preceding will look like that shown in the picture below:
The box model of the .row will show you that it still got a width of 1000px:
Because of the blue background color of the columns totally overlaps the yellow background color of the row, you know the sum of the width of the columns should also be 1000px.
Now about the gutter. By default the gutter had been set to: $column-gutter: rem-calc(30px); (1.875rem)
To construct the gutter each column of the grid got a padding of gutter-size / 2 on each side. So a large-12 column has a width of 1000 pixels, but a padding of 15px on the left and a padding of 15px on the right. For that reason it seems that a row has a width of 1000 - 30 = 970 pixels.
You can make these gutters visible too by applying the following SCSS code on the HTML used before:
.row {
background-color: yellow;
div {
background-color: darkblue;
div {
background-color: red;
}
}
color: white;
}
Now you grid looks like that shown beneath:
Or by inspecting the box model of a large-12 column:
My questions are: why 1000px row is in reality 970px wide? Do I have to
worry about it?
I think you should not worry about it in the first place. See above.
Or maybe if I want 1000px wide page I have to set row to 1030px?
Well if you have a good reason to do so, you can use: $row-width: rem-calc(1030); and then indeed the box model of a large-12 will looks as follows:
Notice that you also have to change $medium-breakpoint: em-calc(1024); to a value equal or larger than 1030px to prevent a horizontal scroll bar for viewport >1024 and smaller than 1030pixels.
Or you can consider removing the gutter, by setting $column-gutter: 0;. See also: What's the point of gutters in CSS grid frameworks?