Grid

October 28, 2017bywebsevendev

Grids can be used to divide content into (16) columns and rows.

Classes

Columns	`equal width` `one column` `two column` `three column` `...` `sixteen column`
Type	`celled` `internally celled` `divided` `padded`
Alignment	`centered`
Mobile	`stackable` `doubling`
Other	`reversed`

Classes

Columns	`equal width` `one column` `two column` `three column` `...` `sixteen column`
Mobile	`stackable` `doubling`

Classes

Width	`one wide` `two wide` `three wide` `...` `sixteen wide`
Float	`left floated` `right floated`
Alignment	`left aligned` `center aligned` `right aligned`
Color	`red` `orange` `yellow` `olive` `green` `teal` `blue` `violet` `purple` `pink` `brown` `grey` `black`

Column borders are visible for demo purposes.

Grid

Column 1

Column 2

Column 3

<grid three column>
  <column>Column 1</column>
  <column>Column 2</column>
  <column>Column 3</column>
</grid>

Grid with rows

A column in a two column wide row. A column in a two column wide row. A column in a two column wide row. A column in a two column wide row.

Column 1

Column 2

Column 3

Column 4

<grid four column>
  <row two column>
    <column>A column in a two column wide row....</column>
  </row>
  <column>Column 1</column>
  <column>Column 2</column>
  <column>Column 3</column>
  <column>Column 4</column>
</grid>

Clearing content

Left floated column

Right floated column

Column 1

Column 2

Column 3

<grid>
  <row four column>
    <column left floated>Left floated column</column>
    <column right floated>Right floated column</column>
  </row>
  <row>
    <column three wide>Column 1</column>
    <column eight wide>Column 2</column>
    <column five wide>Column 3</column>
  </row>
</grid>

Equal width columns

Column 1

Column 2

Column 3

Column 4

Column 5

<grid equal width>
  <row>
    <column>Column 1</column>
    <column>Column 2</column>
    <column>Column 3</column>
  </row>
  <row>
    <column>Column 4</column>
    <column>Column 5</column>
  </row>
</grid>

Responsive grid

Column

<grid>
  <column four wide>Column</column>
  <column four wide>Column</column>
  <column four wide>Column</column>
  <column four wide>Column</column>
  <column four wide>Column</column>
  <column four wide>Column</column>
  <column four wide>Column</column>
  <column four wide>Column</column>
  <column four wide>Column</column>
  <column four wide>Column</column>
</grid>

A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.

Nested grid

Left

One

Two

Three

<grid equal width stackable>
  <column>Left</column>
  <column>
    <ui stackable grid>
      <row>
        <div column>One</div>
      </row>
      <row two column>
        <div column>Two</div>
        <div column>Three</div>
      </row>
    </ui>
  </column>
</grid>

More about grids: semantic-ui.com/collections/grid.html

Grid

Demos

Documentation

Social media

Newsletter