Grids

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

[grid] shortcode arguments
classes:
Columns -
[equal width|two column|three column|...]
Type -
[celled|internally celled|divided|padded]
Alignment -
[centered]
Mobile -
[stackable|doubling]
Other -
[reversed]
[row] shortcode arguments
classes:
Columns -
[two column|three column|...]
Mobile -
[stackable|doubling]
[column] shortcode arguments
classes:
Width -
[two wide|four wide|...|sixteen wide]
Float -
[left floated|right floated]
Alignment -
[left aligned|center aligned|right aligned]
Color -
[red|green|blue|...]
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
Column
Column
Column
Column
Column
Column
Column
Column
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>
Notes
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.

Leave a comment

Your email address will not be published. Required fields are marked *