Menu icon Foundation
What are the default grid widths for Foundation 6 full width and non full-width?

Even though I am know Foundation is responsive, I am trying to craft precise photoshop documents with certain breakpoints and trying to understand how foundation establish the grid elements sizes (by default).

 

Let's say for example a media query of // XXLarge screens

 

@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */ 12 columns

 

 

this is my current grid which I used based on the foundation PSD that I purchased but I think it's wrong

 

Question1: are the gutters applied by default? or the by default the system applies no gutters, just pure columns?

Question2: does foundation applies outer gutter (or outer margins) automatically?

Question3: what is the total width for a non full-width row considering screensize of 1920?

Question4: what are the sizes of the columns, gutters in this case of screen width of 1921?

Question5: how should I prepare my document if I want to follow defaults with the new XY grid?

 

 

gridXYgridcolumns

Even though I am know Foundation is responsive, I am trying to craft precise photoshop documents with certain breakpoints and trying to understand how foundation establish the grid elements sizes (by default).

 

Let's say for example a media query of // XXLarge screens

 

@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */ 12 columns

 

 

this is my current grid which I used based on the foundation PSD that I purchased but I think it's wrong

 

Question1: are the gutters applied by default? or the by default the system applies no gutters, just pure columns?

Question2: does foundation applies outer gutter (or outer margins) automatically?

Question3: what is the total width for a non full-width row considering screensize of 1920?

Question4: what are the sizes of the columns, gutters in this case of screen width of 1921?

Question5: how should I prepare my document if I want to follow defaults with the new XY grid?

 

 

Rafi Benkual 2 months ago

 The XY Grid is the Default grid in 6.4+ so we'll talk about that.

  1. No gutters by default. Cells can get spacing in the form of margin or padding
  2. If you add spacing between cells, it will apply on both sides of each cell.
  3. The default width of the grid-container is 1200px. This can be changed easily. You can create a grid that is fluid width as well.
  4. Cells are a % of the grid container or the screen width. So if you have 4 cells in a grid using the medium-3 class, each will be 25% of the width. You can also have cells be auto or shrink size. Shrink will take up the width of the content inside, and grow will expand to fill remaining space.
  5. Just share what you have with us here and we'll help you get it right!

Daniel Vianna 2 months ago

Very helpful!