---
layout : 'default'
css    : 'Grid'

title  : 'Grid'
type   : 'UI Collection'
---

<div class="segment">
  <div class="ui main responsive grid">
    <div class="column">
      <h1 class="ui dividing header">Grid</h1>
      <p>A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.</p>
    </div>
  </div>
</div>
<div class="main responsive ui grid">
<div class="column">
  
  <h2 class="ui dividing header">Collection</h2>
  
  <div class="highlighted example">
    <h4 class="ui header">Grid</h4>
    <p>A grid is made up of columns of content. By default a grid must assume a certain number of columns.</p>
    <p>Each set of columns matching up to the number of columns in a grid create a row.</p>
    
    <div class="ui ignore warning message"><i class="icon heart"></i> <b>Using Grids</b>
    <p>The semantic library assumes 12 columns by default. If only a single column is specified inside a grid or a grid row, semantic will assume the column to take up the entire grid width. If you would like to override this behavior, specify the grid width as a <b>one wide column</b></p>
    <p>It is also important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.</div>
    <div class="ui grid">
      <div class="column">
        <div class="ui segment">
          1
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          2
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          3
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          4
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          5
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          6
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          7
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          8
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          9
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          10
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          11
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          12
        </div>
      </div>
    </div>
  </div>
  

  <div class="highlighted example">
    <h4 class="ui header">Page Grid</h4>
    <p>A page grid is a grid that exists on the top level of a website and includes gutters to the left and right.</p>
    
    <div class="ui two column page grid">
      <div class="column">
        <div class="ui labeled vertical fluid inverted icon menu">
          <a class="item">
            <i class="icon mail"></i>
            Mail
          </a>
          <a class="item">
            <i class="icon lab"></i>
            Lab
          </a>
          <a class="item">
            <i class="icon star"></i>
            Favorites
          </a>
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          <b>Inbox</b>
          <p>Welcome to your inbox. Would you like to see more information?</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="highlighted example">
    <h4 class="ui header">Rows</h4>
    <p>A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit vertically flushed against the edge of a grid, but will still have vertical and horizontal gutters on the first and last column.</p>
    <p>
    <div class="ui grid">
      <div class="row">
        <div class="column">
          <div class="ui segment">
            1a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            2a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            3a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            4a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            5a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            6a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            7a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            8a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            9a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            10a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            11a
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            12a
          </div>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <div class="ui segment">
            1b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            2b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            3b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            4b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            5b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            6b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            7b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            8b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            9b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            10b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            11b
          </div>
        </div>
        <div class="column">
          <div class="ui segment">
            12b
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="highlighted example">
    <h4 class="ui header">Columns</h4>
    <p>Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.</p>
    <p>A grid will automatically center any columns that do not match a full row width.</p>
    <div class="ui three column grid">
      <div class="column">
        <div class="ui segment">
          1
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          2
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          3
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          4
        </div>
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>
  
  <h3 class="ui header">Grid</h3>
  
  <div class="example">
    <h4 class="ui header">Responsive Grid</h4>
    <p>A grid can be responsive to a browsers width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.</p>

    <div class="ui text message info ignore">
      <p>
        <i class="icon heart"></i> Semantic UI's responsive grid by default will change the page gutters to increase at 250pixel intervals.
    </div>
    
    <div class="ui two column responsive grid">
      <div class="column">
        <div class="ui labeled vertical fluid inverted icon menu">
          <a class="item">
            <i class="icon mail"></i>
            Mail
          </a>
          <a class="item">
            <i class="icon lab"></i>
            Lab
          </a>
          <a class="item">
            <i class="icon star"></i>
            Favorites
          </a>
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          <b>Inbox</b>
          <p>Welcome to your inbox. Would you like to see more information?</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="example">
    <h4 class="ui header">Changing grid column count</h4>
    <p>A grid can have a different number of columns per row</p>
    <div class="ui three column grid">
      <div class="column">
        <div class="ui fluid form segment">
          <p>Let's go ahead and get you signed up.</p>
          <div class="two fields">
            <div class="field">
              <label>First Name</label>
              <input placeholder="First Name" type="text">
            </div>
            <div class="field">
              <label>Last Name</label>
              <input placeholder="Last Name" type="text">
            </div>
          </div>
          <div class="field">
            <label>Username</label>
            <input placeholder="Username" type="text">
          </div>
          <div class="field">
            <label>Password</label>
            <input type="password">
          </div>
          <div class="inline field">
            <div class="ui checkbox">
              <input type="checkbox" id="terms" />
              <label for="terms"></label>
            </div>
            <label>I agree to the terms and conditions</label>
          </div>
          <div class="ui blue submit button">Submit</div>
        </div>
      </div>
      <div class="column">
        <div class="ui vertical fluid menu">
          <div class="header item">
            Dogs
          </div>
          <div class="item">
            Poodle
          </div>
          <div class="item">
            Cockerspaniel
          </div>
          <div class="header item">
            Cats
          </div>
          <div class="item">
            Abysinnian
          </div>
          <div class="item">
            Sphynx
          </div>
        </div>
      </div>
      <div class="column">
        <div class="ui fluid form segment">
          <p>Log in to your account</p>
          <div class="field">
            <label>Username</label>
            <input placeholder="Username" type="text">
          </div>
          <div class="field">
            <label>Password</label>
            <input type="password">
          </div>
          <div class="ui blue submit button">Login</div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="example">
    <h4 class="ui header">Divided</h4>
    <p>A grid can show a division between its columns</p>
    <div class="ui six divided column grid">
      <div class="row">
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Celled</h4>
    <p>A grid can have rows divided into cells</p>
    <div class="ui celled grid">
      <div class="row">
        <div class="two wide column" style="">
          <p>Lorem ipsum do</p>
        </div>
        <div class="three wide column" style="">
          <p>Lorem ipsum dolor </p>
        </div>
        <div class="seven wide column">
          <p>Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
      </div>
      <div class="row">
        <div class="five wide column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        
        <div class="three wide column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        
        <div class="two wide column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        <div class="two wide column">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Text Alignment</h4>
    <p>A grid can specify its text alignment</p>
    <div class="ui center aligned three column grid">
      <div class="row">
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Cats
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Dogs
            </div>
            <div class="item">
              Poodle
            </div>
            <div class="item">
              Cockerspaniel
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Monkeys
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="example">
    <h4 class="ui header">Vertical Alignment</h4>
    <p>A grid can specify its vertical alignment to have all its columns vertically centered.</p>
    <div class="ui middle aligned three column grid">
      <div class="row">
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Cats
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Dogs
            </div>
            <div class="item">
              Poodle
            </div>
            <div class="item">
              Cockerspaniel
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Monkeys
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <h3 class="ui header">Rows</h3>
  <div class="example">
    <h4 class="ui header">Vertical Alignment</h4>
    <p>A row can also specify its vertical alignment to have its columns vertically centered.</p>
    <div class="ui three column grid">
      <div class="top aligned row">
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Cats
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Dogs
            </div>
            <div class="item">
              Poodle
            </div>
            <div class="item">
              Cockerspaniel
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Monkeys
            </div>
          </div>
        </div>
      </div>
      <div class="middle aligned row">
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Dogs
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Dogs
            </div>
            <div class="item">
              Poodle
            </div>
            <div class="item">
              Cockerspaniel
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Monkeys
            </div>
          </div>
        </div>
      </div>
      <div class="bottom aligned row">
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Cats
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Dogs
            </div>
            <div class="item">
              Poodle
            </div>
            <div class="item">
              Cockerspaniel
            </div>
          </div>
        </div>
        <div class="column">
          <div class="ui vertical fluid menu">
            <div class="header item">
              Monkeys
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <h3 class="ui header">Columns</h3>
  
  <div class="example">
    <h4 class="ui header">Row Alignment (Floating)</h4>
    <p>A column can be"floated", to either the left or right of its row.</p>
    <div class="ui grid">
      <div class="left floated four wide column">
        <div class="ui vertical fluid menu">
          <div class="header item">
            Dogs
          </div>
          <div class="item">
            Poodle
          </div>
          <div class="item">
            Cockerspaniel
          </div>
        </div>
      </div>
      <div class="right floated four wide column">
        <div class="ui vertical fluid menu">
          <div class="header item">
            Cats
          </div>
          <div class="item">
            Abysinnian
          </div>
          <div class="item">
            Sphynx
          </div>
        </div>
      </div>
    </div>
  
  <div class="example">
    <h4 class="ui header">Column Width</h4>
    <p>A column can span across multiple grid columns.</p>
    <div class="ui grid">
      <div class="three wide column">
        <div class="ui segment"><b>Colume One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.</div>
      </div>
      <div class="six wide column">
        <div class="ui segment"><b>Colume Two</b> Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</div>
      </div>
      <div class="three wide column">
        <div class="ui segment"><b>Colume Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. </div>
      </div>
    </div>
  </div>
    
</div>
</div>
</body>

</html>