Close

October 24, 2018

Gutenberg: Columns

Columns

2 columns

This is a 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit. Don’t forget to consider how columns will look on smaller screens. #mobilefirst

3 columns

This is a typical 3-column layout with images on top and some text below.

You’ll find this layout on web sites all over the internet.

Gutenberg makes this kind of layout easy to build. The future is now!

4 columns

This is the first column, and it’s amazing.

This is the second column, and it’s also amazing.

The third column, as they say, is like a charm.

This is the fourth column, and it’s possibly the best.

5 columns

5 columns of text in the post, 5 columns of text. Take one down, move it around, 4 columns of text in the post.

4 columns of text in the post, 4 columns of text. Take one down, move it around, 3 columns of text in the post.

3 columns of text in the post, 3 columns of text. Take one down, move it around, 2 columns of text in the post.

2 columns of text in the post, 2 columns of text. Take one down, move it around, 1 columns of text in the post.

1 column of text in the post, 1 column of text. Take one down, move it around, no columns of text in the post.

6 columns

One column.

Two columns.

Three columns.

Four columns.

Five columns.

Six columns.

One column.

Two columns.

Three columns.

Four columns.

Five columns.

Six columns.


Width

Wide

This is a wide width 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit. Don’t forget to consider how columns will look on smaller screens. #mobilefirst

Full

This is a full width 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit. Don’t forget to consider how columns will look on smaller screens. #mobilefirst


Percentage width

This column is 25% wide.

This column is 75% wide.

This column is 75% wide.

This column is 25% wide.

This column is 25% wide.

This column is 50% wide.

This column is 25% wide.

This column is 50% wide.

This column is 25% wide.

This column is 25% wide.

This column is 25% wide.

This column is 25% wide.

This column is 50% wide.

This column is 20% wide.

This column is 20% wide.

This column is 10% wide.

This column is 50% wide.

This column is 10% wide.

This column is 20% wide.

This column is 40% wide.

This column is 20% wide.

This column is 10% wide.

This column is 10% wide.

This column is 10% wide.

This column is 10% wide.

This column is 10% wide.

This column is 10% wide.

This column is 50% wide.


Vertical Alignment

Top

This is a 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit.

Middle

This is a 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit.

Bottom

This is a 2-column layout, just trying some things out to see how it goes. Each column should have enough padding to breathe a little bit.

Leave a Reply

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