{"id":128,"date":"2018-10-24T11:54:34","date_gmt":"2018-10-24T11:54:34","guid":{"rendered":"https:\/\/chrisrunnells.wordpress.com\/?p=128"},"modified":"2018-10-24T11:54:34","modified_gmt":"2018-10-24T11:54:34","slug":"gutenberg-columns","status":"publish","type":"post","link":"https:\/\/staging.cedaro.com\/ovation\/2018\/10\/24\/gutenberg-columns\/","title":{"rendered":"Gutenberg: Columns"},"content":{"rendered":"\n

Columns<\/h3>\n\n\n\n

2 columns<\/h4>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

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<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

3 columns
<\/h4>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

This is a typical 3-column layout with images on top and some text below. <\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

You’ll find this layout on web sites all over the internet.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Gutenberg makes this kind of layout easy to build. The future is now!<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n

4 columns<\/h4>\n\n\n\n
\n
\n

This is the first column, and it’s amazing. <\/p>\n<\/div>\n\n\n\n

\n

This is the second column, and it’s also amazing.<\/p>\n<\/div>\n\n\n\n

\n

The third column, as they say, is like a charm.<\/p>\n<\/div>\n\n\n\n

\n

This is the fourth column, and it’s possibly the best.<\/p>\n<\/div>\n<\/div>\n\n\n\n

5 columns<\/h4>\n\n\n\n
\n
\n

5 columns of text in the post, 5 columns of text. Take one down, move it around, 4 columns of text in the post.<\/p>\n<\/div>\n\n\n\n

\n

4 columns of text in the post, 4 columns of text. Take one down, move it around, 3 columns of text in the post.<\/p>\n<\/div>\n\n\n\n

\n

3 columns of text in the post, 3 columns of text. Take one down, move it around, 2 columns of text in the post.<\/p>\n<\/div>\n\n\n\n

\n

2 columns of text in the post, 2 columns of text. Take one down, move it around, 1 columns of text in the post.<\/p>\n<\/div>\n\n\n\n

\n

1 column of text in the post, 1 column of text. Take one down, move it around, no columns of text in the post.<\/p>\n<\/div>\n<\/div>\n\n\n\n

6 columns<\/h4>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

One column.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Two columns.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Three columns.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Four columns.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Five columns.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Six columns.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n\n\n\n

One column.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Two columns.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Three columns.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Four columns.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Five columns.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Six columns.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n\n\n\n

Width<\/h3>\n\n\n\n

Wide<\/h4>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

This is a wide width<\/strong> 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<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Full<\/h4>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

This is a full width<\/strong> 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<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\n

Percentage width<\/h3>\n\n\n\n
\n
\n

This column is 25%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

This column is 75%<\/strong> wide.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

This column is 75%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n
<\/div>\n\n\n\n

This column is 25%<\/strong> wide.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

This column is 25%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 50%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 25%<\/strong> wide.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

This column is 50%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 25%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 25%<\/strong> wide.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

This column is 25%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 25%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 50%<\/strong> wide.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

This column is 20%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 20%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 10%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 50%<\/strong> wide.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

This column is 10%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 20%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 40%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 20%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 10%<\/strong> wide.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

This column is 10%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 10%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 10%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 10%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 10%<\/strong> wide.<\/p>\n<\/div>\n\n\n\n

\n

This column is 50%<\/strong> wide.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n\n\n\n

Vertical Alignment<\/h3>\n\n\n\n

Top<\/h4>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

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.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Middle<\/h4>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

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.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Bottom<\/h4>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

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.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-128","post","type-post","status-publish","format-standard","category-gutenberg","entry"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/staging.cedaro.com\/ovation\/wp-json\/wp\/v2\/posts\/128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.cedaro.com\/ovation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.cedaro.com\/ovation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.cedaro.com\/ovation\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.cedaro.com\/ovation\/wp-json\/wp\/v2\/comments?post=128"}],"version-history":[{"count":0,"href":"https:\/\/staging.cedaro.com\/ovation\/wp-json\/wp\/v2\/posts\/128\/revisions"}],"wp:attachment":[{"href":"https:\/\/staging.cedaro.com\/ovation\/wp-json\/wp\/v2\/media?parent=128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.cedaro.com\/ovation\/wp-json\/wp\/v2\/categories?post=128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.cedaro.com\/ovation\/wp-json\/wp\/v2\/tags?post=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}