title: Why is Grid.Column horizontal iniside Grid.Row?
body: <p>I am trying to mock-up a faux news website to learn semantic-ui grid. I am trying to divide a row vertically into 2 smaller columns, but they are dividing horizontally and acting like more rows. How can I divide the row into two vertical columns?</p>
  
  <p>So far my layout is a Row split into 2 columns (which works fine). the second column i have split into 2 rows (which also works fine). it's when i want to divide one of these rows into 2 columns things get wonky. </p>
  
  <p>The styling is is for visualization since I'm just laying out empty boxes because there's no real content since it's just a layout. </p>
  
  <pre><code>
      &lt;Grid.Row&gt;
        &lt;Grid.Column
          width="11"
          style={{ height: "500px", border: "2px solid black" }}
        /&gt;
        &lt;Grid.Column
          width="5"
          style={{
            border: "1px solid black",
            padding: "0"
          }}
        &gt;
          &lt;Grid.Row style={{ height: "50%", border: "1px solid black" }}&gt;
            &lt;Grid.Column
              width="8"
              style={{ height: "50%", border: "1px solid black" }}
            /&gt;
            &lt;Grid.Column
              width="8"
              style={{ height: "50%", border: "1px solid black" }}
            /&gt;
          &lt;/Grid.Row&gt;
          &lt;Grid.Row style={{ height: "50%", border: "1px solid black" }} /&gt;
        &lt;/Grid.Column&gt;
      &lt;/Grid.Row&gt;
  </code></pre>
  
  <p>The first row in the second column is being divided, but into 2 horizontally instead of vertically as expected.<a href="https://i.stack.imgur.com/1r9ck.png" rel="nofollow noreferrer">screenshot of inspctor</a></p>