{"id":128,"date":"2018-10-24T11:54:34","date_gmt":"2018-10-24T21:54:34","guid":{"rendered":"https:\/\/chrisrunnells.wordpress.com\/?p=128"},"modified":"2018-10-24T11:54:34","modified_gmt":"2018-10-24T21:54:34","slug":"gutenberg-columns","status":"publish","type":"post","link":"https:\/\/ec.demo1.app\/?p=128","title":{"rendered":"Gutenberg: Columns"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">2 columns<\/h2>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/ec.demo1.app\/wp-content\/uploads\/2018\/10\/zoltan-tasi-482489-unsplash.jpg\" alt=\"\" class=\"wp-image-103\" \/><\/figure>\n\n\n\n<p>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&#8217;t forget to consider how columns will look on smaller screens. #mobilefirst<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/ec.demo1.app\/wp-content\/uploads\/2018\/10\/jordan-steranka-504707-unsplash.jpg\" alt=\"\" class=\"wp-image-101\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">3 columns<br><\/h2>\n\n\n\n<div class=\"wp-block-columns has-3-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/ec.demo1.app\/wp-content\/uploads\/2018\/10\/zoltan-tasi-482489-unsplash.jpg\" alt=\"\" class=\"wp-image-103\" \/><\/figure>\n\n\n\n<p>This is a typical 3-column layout with images on top and some text below. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/ec.demo1.app\/wp-content\/uploads\/2018\/10\/brandon-siu-608784-unsplash.jpg\" alt=\"\" class=\"wp-image-96\" \/><\/figure>\n\n\n\n<p>You&#8217;ll find this layout on web sites all over the internet.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/ec.demo1.app\/wp-content\/uploads\/2018\/10\/kristopher-roller-110203-unsplash.jpg\" alt=\"\" class=\"wp-image-102\" \/><\/figure>\n\n\n\n<p>Gutenberg makes this kind of layout easy to build. <em>The future is now!<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">4 columns<\/h2>\n\n\n\n<div class=\"wp-block-columns has-4-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>This is the first column, and it&#8217;s amazing. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>This is the second column, and it&#8217;s also amazing.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The third column, as they say, is like a charm.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>This is the fourth column, and it&#8217;s possibly the best.<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">5 columns<\/h2>\n\n\n\n<div class=\"wp-block-columns alignwide has-5-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>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<hr class=\"wp-block-separator is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">6 columns<\/h2>\n\n\n\n<div class=\"wp-block-columns alignfull has-6-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/akismet-logo.png\" alt=\"\" class=\"wp-image-137\" \/><\/figure>\n\n\n\n<p>One column.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/gravatar.png\" alt=\"\" class=\"wp-image-138\" \/><\/figure>\n\n\n\n<p>Two columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/jetpack.png\" alt=\"\" class=\"wp-image-139\" \/><\/figure>\n\n\n\n<p>Three columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-cloudup-1.png\" alt=\"\" class=\"wp-image-140\" \/><\/figure>\n\n\n\n<p>Four columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-crowdsignal.png\" alt=\"\" class=\"wp-image-148\" \/><\/figure>\n\n\n\n<p>Five columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-longreads1.png\" alt=\"\" class=\"wp-image-141\" \/><\/figure>\n\n\n\n<p>Six columns.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull has-6-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-simplenote.png\" alt=\"\" class=\"wp-image-142\" \/><\/figure>\n\n\n\n<p>One column.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-vaultpress.png\" alt=\"\" class=\"wp-image-143\" \/><\/figure>\n\n\n\n<p>Two columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-woocommerce-black.png\" alt=\"\" class=\"wp-image-144\" \/><\/figure>\n\n\n\n<p>Three columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/wordpressdotcom_wbadgevert-blk.png\" alt=\"\" class=\"wp-image-145\" \/><\/figure>\n\n\n\n<p>Four columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/wpcom-vip-logo-2017.png\" alt=\"\" class=\"wp-image-146\" \/><\/figure>\n\n\n\n<p>Five columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/wpcom-wmark-blk.png\" alt=\"\" class=\"wp-image-147\" \/><\/figure>\n\n\n\n<p>Six columns.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>2 columns This is a 2-column layout, just trying some t [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-128","post","type-post","status-publish","format-standard","hentry","category-gutenberg"],"_links":{"self":[{"href":"https:\/\/ec.demo1.app\/index.php?rest_route=\/wp\/v2\/posts\/128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ec.demo1.app\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ec.demo1.app\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ec.demo1.app\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ec.demo1.app\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=128"}],"version-history":[{"count":0,"href":"https:\/\/ec.demo1.app\/index.php?rest_route=\/wp\/v2\/posts\/128\/revisions"}],"wp:attachment":[{"href":"https:\/\/ec.demo1.app\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ec.demo1.app\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ec.demo1.app\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}