Author: Theme Test
Gutenberg: Columns
Columns
2 columns
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/00f7e-037ab-zoltan-tasi-482489-unsplash.jpg)
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
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/30a32-01c61-jordan-steranka-504707-unsplash.jpg)
3 columns
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/00f7e-037ab-zoltan-tasi-482489-unsplash.jpg)
This is a typical 3-column layout with images on top and some text below.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/e9219-47288-brandon-siu-608784-unsplash.jpg)
You’ll find this layout on web sites all over the internet.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/d9b27-6aa4c-kristopher-roller-110203-unsplash.jpg)
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
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/9b7df-akismet-logo.png)
One column.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/aab3d-gravatar.png)
Two columns.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/2111a-jetpack.png)
Three columns.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/6a1e0-logo-cloudup-1.png)
Four columns.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/a4b9f-logo-crowdsignal.png)
Five columns.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/3055f-logo-longreads1.png)
Six columns.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/97b8c-logo-simplenote.png)
One column.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/4f6dc-logo-vaultpress.png)
Two columns.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/38dfe-logo-woocommerce-black.png)
Three columns.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/f9352-wordpressdotcom_wbadgevert-blk.png)
Four columns.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/6d067-wpcom-vip-logo-2017.png)
Five columns.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2019/06/ae99b-wpcom-wmark-blk.png)
Six columns.
Width
Wide
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/00f7e-037ab-zoltan-tasi-482489-unsplash.jpg)
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
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/30a32-01c61-jordan-steranka-504707-unsplash.jpg)
Full
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/00f7e-037ab-zoltan-tasi-482489-unsplash.jpg)
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
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/30a32-01c61-jordan-steranka-504707-unsplash.jpg)
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
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/00f7e-037ab-zoltan-tasi-482489-unsplash.jpg)
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.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/30a32-01c61-jordan-steranka-504707-unsplash.jpg)
Middle
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/00f7e-037ab-zoltan-tasi-482489-unsplash.jpg)
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.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/30a32-01c61-jordan-steranka-504707-unsplash.jpg)
Bottom
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/00f7e-037ab-zoltan-tasi-482489-unsplash.jpg)
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.
![](http://staging.cedaro.com/wp-content/uploads/sites/16/2018/10/30a32-01c61-jordan-steranka-504707-unsplash.jpg)