Rows and Gutters

go.raybo.org/4AIF

Rows are containers for columns, but they can do more and provide a good level of customization. Spacing between the rows can be controlled with gutters.

Rows

  • Column Container
  • Negative Margins
  • Reset Grid

Try it

Rows are designed to be column containers

If you're using a container, a bit of margin is added to each side of the containers, so that the content doesn't go all the way to the edge. The purpose of the rows is to get rid of this spacing by using negative margins.

They will also reset the grid so that you get a new set of 12 units.

Row Gutters

  • g{-DIR}-{SIZ}
    • DIR:
      x y
    • SIZ:
      0 1 2 3 4 5

Try it

Gutters start out at 1.5 rems or 24 pixels wide, but you can expand their spacing using a set of classes.

Row Columns

  • row-cols-{SIZ}
    • SIZ: 1 2 3 4 5

Try it

There's an option to create an equidistant grid of elements easily using row column classes.