{"id":128,"date":"2024-10-24T11:54:34","date_gmt":"2024-10-24T02:54:34","guid":{"rendered":"https:\/\/chrisrunnells.wordpress.com\/?p=128"},"modified":"2024-11-21T21:46:03","modified_gmt":"2024-11-21T12:46:03","slug":"gutenberg-columns","status":"publish","type":"post","link":"https:\/\/skin.dpthemes.net\/lemon-cream1\/archives\/128","title":{"rendered":"\u30ab\u30e9\u30e0\u30d6\u30ed\u30c3\u30af"},"content":{"rendered":"\n<h2 class=\"wp-block-heading deb-block deb-block-a33d085\" id=\"2-columns-1\">2 columns<\/h2>\n\n\n\n<div class=\"wp-block-columns has-2-columns deb-block deb-block-f633bfa 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 has-custom-border deb-block deb-block-598c791\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/zoltan-tasi-482489-unsplash.jpg\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-103\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-b12a862\">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 has-custom-border deb-block deb-block-56d185b\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/jordan-steranka-504707-unsplash.jpg\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-101\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading deb-block deb-block-6edccf5\" id=\"3-columns-2\">3 columns<br><\/h2>\n\n\n\n<div class=\"wp-block-columns has-3-columns deb-block deb-block-119b8bc 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 has-custom-border deb-block deb-block-c428e78\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/zoltan-tasi-482489-unsplash.jpg\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-103\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-5ef77c9\">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 has-custom-border deb-block deb-block-06bc3bb\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/brandon-siu-608784-unsplash.jpg\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-96\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-a33d255\">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 has-custom-border deb-block deb-block-e5bb5a8\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/kristopher-roller-110203-unsplash.jpg\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-102\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-00183f5\">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 has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading deb-block deb-block-77294a4\" id=\"4-columns-3\">4 columns<\/h2>\n\n\n\n<div class=\"wp-block-columns has-4-columns deb-block deb-block-d3b4301 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 class=\"deb-block deb-block-a1e2dbe\">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 class=\"deb-block deb-block-4c40e66\">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 class=\"deb-block deb-block-624375f\">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 class=\"deb-block deb-block-d2658a7\">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 has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading deb-block deb-block-659d318\" id=\"5-columns-4\">5 columns<\/h2>\n\n\n\n<div class=\"wp-block-columns alignwide has-5-columns deb-block deb-block-dc803a0 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 class=\"deb-block deb-block-82d91d9\">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 class=\"deb-block deb-block-e5950bf\">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 class=\"deb-block deb-block-21c7705\">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 class=\"deb-block deb-block-8d68562\">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 class=\"deb-block deb-block-15a41b6\">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 has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading deb-block deb-block-e23403c\" id=\"6-columns-5\">6 columns<\/h2>\n\n\n\n<div class=\"wp-block-columns alignfull has-6-columns deb-block deb-block-6bf43ec 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 has-custom-border deb-block deb-block-018d99f\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/akismet-logo.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-137\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-00aa388\">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 has-custom-border deb-block deb-block-b74598f\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/gravatar.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-138\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-4ff9d02\">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 has-custom-border deb-block deb-block-9f8121e\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/jetpack.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-139\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-92ffb69\">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 has-custom-border deb-block deb-block-ac9d698\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-cloudup-1.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-140\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-3eabf26\">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 has-custom-border deb-block deb-block-c5ea5cf\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-crowdsignal.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-148\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-f173d3a\">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 has-custom-border deb-block deb-block-0bb8564\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-longreads1.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-141\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-caa8508\">Six columns.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull has-6-columns deb-block deb-block-94945fc 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 has-custom-border deb-block deb-block-cf1ef5b\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-simplenote.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-142\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-f6e063d\">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 has-custom-border deb-block deb-block-a190ea6\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-vaultpress.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-143\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-eadff1e\">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 has-custom-border deb-block deb-block-f21cf5c\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/logo-woocommerce-black.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-144\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-b98bf1f\">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 has-custom-border deb-block deb-block-18e3b7e\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/wordpressdotcom_wbadgevert-blk.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-145\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-a98ad81\">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 has-custom-border deb-block deb-block-288724d\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/wpcom-vip-logo-2017.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-146\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-a775b3f\">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 has-custom-border deb-block deb-block-0703604\"><img decoding=\"async\" src=\"https:\/\/chrisrunnells.files.wordpress.com\/2018\/10\/wpcom-wmark-blk.png\" alt=\"\" class=\"has-border-color has-aaaaaa-border-color wp-image-147\"\/><\/figure>\n\n\n\n<p class=\"deb-block deb-block-3913a3a\">Six columns.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"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&#8217;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&#8217;ll &hellip;","protected":false},"author":2,"featured_media":197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9,11,13,10,12,14],"tags":[19,17,21,18],"class_list":{"0":"post-128","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-gutenberg","8":"category-category-a","9":"category-child-category-a-1","10":"category-child-category-a-2","11":"category-category-b","12":"category-child-category-b-1","13":"category-blog","14":"tag-css","15":"tag-digipress","16":"tag-gutenberg","17":"tag-18"},"featured_image_urls":{"full":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11.jpg",1500,1061,false],"thumbnail":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11.jpg",128,91,false],"medium":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11-800x566.jpg",800,566,true],"medium_large":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11-768x543.jpg",768,543,true],"large":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11.jpg",1500,1061,false],"1536x1536":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11.jpg",1500,1061,false],"2048x2048":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11.jpg",1500,1061,false],"dp-widget-thumb":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11-140x96.jpg",140,96,true],"dp-widget-thumb-2x":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11-280x192.jpg",280,192,true],"dp-related-thumb":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11-250x154.jpg",250,154,true],"dp-related-thumb-2x":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11-500x308.jpg",500,308,true],"dp-archive-thumb":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11-450x318.jpg",450,318,true],"dp-archive-thumb-2x":["https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-content\/uploads\/sites\/74\/2024\/11\/lemon_cream11-900x637.jpg",900,637,true]},"category_list":"<a href=\"https:\/\/skin.dpthemes.net\/lemon-cream1\/archives\/category\/gutenberg\" rel=\"category tag\">Gutenberg<\/a>, <a href=\"https:\/\/skin.dpthemes.net\/lemon-cream1\/archives\/category\/category-a\" rel=\"category tag\">\u30ab\u30c6\u30b4\u30ea\u30fcA<\/a>, <a href=\"https:\/\/skin.dpthemes.net\/lemon-cream1\/archives\/category\/category-a\/child-category-a-1\" rel=\"category tag\">\u5b50\u30ab\u30c6\u30b4\u30ea\u30fcA-1<\/a>, <a href=\"https:\/\/skin.dpthemes.net\/lemon-cream1\/archives\/category\/category-a\/child-category-a-2\" rel=\"category tag\">\u5b50\u30ab\u30c6\u30b4\u30ea\u30fcA-2<\/a>, <a href=\"https:\/\/skin.dpthemes.net\/lemon-cream1\/archives\/category\/category-b\" rel=\"category tag\">\u30ab\u30c6\u30b4\u30ea\u30fcB<\/a>, <a href=\"https:\/\/skin.dpthemes.net\/lemon-cream1\/archives\/category\/category-b\/child-category-b-1\" rel=\"category tag\">\u5b50\u30ab\u30c6\u30b4\u30ea\u30fcB-1<\/a>, <a href=\"https:\/\/skin.dpthemes.net\/lemon-cream1\/archives\/category\/blog\" rel=\"category tag\">\u30d6\u30ed\u30b0<\/a>","author_info":{"name":"Becky Mendez","url":"https:\/\/skin.dpthemes.net\/lemon-cream1\/archives\/author\/beckylove"},"comments_num":"0 comments","_links":{"self":[{"href":"https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-json\/wp\/v2\/posts\/128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-json\/wp\/v2\/comments?post=128"}],"version-history":[{"count":0,"href":"https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-json\/wp\/v2\/posts\/128\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-json\/wp\/v2\/media\/197"}],"wp:attachment":[{"href":"https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-json\/wp\/v2\/media?parent=128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-json\/wp\/v2\/categories?post=128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skin.dpthemes.net\/lemon-cream1\/wp-json\/wp\/v2\/tags?post=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}