title: Page Layout based on Semantic-UI Grid: cannot remove the gutters
body: <p>I am creating a web application using <code>semantic-ui</code>.  I am trying to create a layout which has a sidebar and main content area.  At first, I thought using grid would be the way to go, except that they cause a few problems:</p>
  
  <ol>
  <li>The columns and rows will have extra spacing/gutters between them</li>
  <li>The only way to "remove" the gutters is to set a column color with something like <code>&lt;div class="four wide black column"&gt;</code>, but this causes the columns to overlap with other content</li>
  </ol>
  
  <p>So it seems that grid are not the best tool for creating page layouts, although they do provide functionality which makes them useful for page layouts (like defining section sizes; <code>four wide column</code>, <code>ten wide column</code>, etc)</p>
  
  <p>What is the recommended way to layout web applications using Semantic-UI, such as a simple sidebar and main content columns?</p>