title: How to calculate container grid sizes including gutter, column and outside space in foundation 6 large screen sizes?
body: <p>I am trying to create an accurate Photoshop grid. I understand that foundation is responsive and that pixel sizes will vary according to the resize. However, I would like to design images and containers that will precisely expand based on a precise proportion that I started with. For that, I would like to understand how the browser actually builds these columns and gutters and what are the sizes assigned to each space, including incomplete columns and outside space.</p>
  
  <p><a href="https://i.stack.imgur.com/OCtB5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OCtB5.jpg" alt="enter image description here"></a></p>
  
  <p>I started with a 1025 resolution (large screen breakpoint) and I tried to create a grid by using <a href="http://gridcalculator.dk/#/1024/12/30/30" rel="nofollow noreferrer">http://gridcalculator.dk/#/1024/12/30/30</a></p>
  
  <p>I imagined that at the 1025 size the have these proportions, but I don't know:</p>
  
  <p>Question 1- How many gutters foundation creates? are there external gutters or margins automatically added to the end of the grid?</p>
  
  <p>Question 2- Are the column sizes always the same or one of them become a different size in weird sizes?</p>
  
  <p>Question 3- What is the size of the external area?</p>
  
  <p>Then I tried to find out some example in code pen and I noticed the following:
  <a href="https://i.stack.imgur.com/uaa4k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uaa4k.png" alt="enter image description here"></a></p>
  
  <p>A-There are no visible gutters when rendered in the browser, at least in this example
  B-It seems that the column space stays the same width (1200) when stretching from a 1200 horizontal screen to 2000 (my monitor), so it's always a fixed 1200 width that the grid takes space, but that changed when it shrinks.</p>
  
  <p>In that case, it makes me think that the supposedly the actual grid size at large screen is 1200, with these configurations:</p>
  
  <p>with external gutter/margin</p>
  
  <p><a href="https://i.stack.imgur.com/6LDfG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6LDfG.png" alt="with external gutter/margin"></a></p>
  
  <p>without external gutter/margin</p>
  
  <p><a href="https://i.stack.imgur.com/QmuMV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QmuMV.png" alt="without external gutter/margin"></a></p>
  
  <p>However that is still unclear for me because when rendered on code pen it doesn't show the gutter, are they collapse for some reason on those sizes?</p>