{"id":2345,"date":"2021-07-20T09:33:18","date_gmt":"2021-07-20T01:33:18","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=2345"},"modified":"2021-07-20T09:40:35","modified_gmt":"2021-07-20T01:40:35","slug":"how-to-make-a-four-column-layout-in-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/how-to-make-a-four-column-layout-in-gutenberg\/","title":{"rendered":"How To Make A Four Column Layout In Gutenberg"},"content":{"rendered":"\n
To make a four column layout in the WordPress Gutenberg editor, select the equal three column layout, hover over a gap between the columns and add the fourth column.<\/p>\n\n\n\n
Start by choosing the \"Columns\" block.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Assuming you want four equal columns, choose the three equal columns variation. It's the 33 \/ 33 \/ 33 one.<\/p>\n\n\n\n
Even though the columns are technically 33.33% width, it doesn't set a specific custom width, so when you go to add your fourth or fifth column, it will just make them all equal 25% widths.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Hovering over the gaps between the columns brings up a \"plus\" icon. If you hover a bit longer you'll see the \"Add Column\" tooltip, but you don't need to wait for that.<\/p>\n\n\n\n
Click the plus icon to add a column in the space where your cursor is hovering.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
You should now see four equal columns.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Add a column to the end of the row<\/h2>\n\n\n\n
If you want to add a column to the end of a row, select the last column and duplicate it.<\/p>\n\n\n\n
This takes more steps than the other method I went through in this guide. You may want to do it this way if you already have content in place, or you've already setup custom widths for your columns.<\/p>\n\n\n\n
If you don't have any blocks in the column, the simplest way is to click on the column, then click the three dots on the right of the popup.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
If you already have blocks in the column, selecting any of them brings up a box where you can select the column instead of the block.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
The other way to select the column is to turn on List View (Shift + Alt + O) or click the List View icon. Then choose the column.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Once you have the column selected, click \"Duplicate\" or hit Ctrl + Shift + D.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Now you'll have a four column layout.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Depending how you setup the other columns, you may need to readjust the widths of the columns.<\/p>\n","protected":false},"excerpt":{"rendered":"
To make a four column layout in the WordPress Gutenberg editor, select the equal three column layout, hover over a gap between the columns and add the fourth column. Start by choosing the “Columns” block. Assuming you want four equal columns, choose the three equal columns variation. It’s the 33 \/ 33 \/ 33 one.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"yoast_head":"\n
How To Make A Four Column Layout In Gutenberg<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Make A Four Column Layout In Gutenberg\" \/>\n<meta property=\"og:description\" content=\"To make a four column layout in the WordPress Gutenberg editor, select the equal three column layout, hover over a gap between the columns and add the fourth column. Start by choosing the "Columns" block. Assuming you want four equal columns, choose the three equal columns variation. It's the 33 \/ 33 \/ 33 one.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Intelliwolf\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-20T01:33:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-20T01:40:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png\" \/>\n<meta name=\"author\" content=\"Mike Haydon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Haydon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/\"},\"author\":{\"name\":\"Mike Haydon\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\"},\"headline\":\"How To Make A Four Column Layout In Gutenberg\",\"datePublished\":\"2021-07-20T01:33:18+00:00\",\"dateModified\":\"2021-07-20T01:40:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/\"},\"wordCount\":332,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png\",\"articleSection\":[\"General\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/\",\"url\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/\",\"name\":\"How To Make A Four Column Layout In Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png\",\"datePublished\":\"2021-07-20T01:33:18+00:00\",\"dateModified\":\"2021-07-20T01:40:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#primaryimage\",\"url\":\"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png\",\"contentUrl\":\"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png\",\"width\":466,\"height\":438},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.intelliwolf.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"General\",\"item\":\"https:\/\/www.intelliwolf.com\/category\/general\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Make A Four Column Layout In Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.intelliwolf.com\/#website\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"name\":\"Intelliwolf\",\"description\":\"WordPress, Web Design and Coding Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.intelliwolf.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.intelliwolf.com\/#organization\",\"name\":\"Intelliwolf\",\"url\":\"https:\/\/www.intelliwolf.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"contentUrl\":\"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/intelliwolf-logo-300t.png\",\"width\":300,\"height\":100,\"caption\":\"Intelliwolf\"},\"image\":{\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343\",\"name\":\"Mike Haydon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g\",\"caption\":\"Mike Haydon\"},\"sameAs\":[\"https:\/\/intelliwolf.com\/about-mike-haydon\/\"]}]}<\/script>\n","yoast_head_json":{"title":"How To Make A Four Column Layout In Gutenberg","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/","og_locale":"en_US","og_type":"article","og_title":"How To Make A Four Column Layout In Gutenberg","og_description":"To make a four column layout in the WordPress Gutenberg editor, select the equal three column layout, hover over a gap between the columns and add the fourth column. Start by choosing the \"Columns\" block. Assuming you want four equal columns, choose the three equal columns variation. It's the 33 \/ 33 \/ 33 one.","og_url":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/","og_site_name":"Intelliwolf","article_published_time":"2021-07-20T01:33:18+00:00","article_modified_time":"2021-07-20T01:40:35+00:00","og_image":[{"url":"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png"}],"author":"Mike Haydon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mike Haydon","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#article","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/"},"author":{"name":"Mike Haydon","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343"},"headline":"How To Make A Four Column Layout In Gutenberg","datePublished":"2021-07-20T01:33:18+00:00","dateModified":"2021-07-20T01:40:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/"},"wordCount":332,"commentCount":1,"publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"image":{"@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png","articleSection":["General"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/","url":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/","name":"How To Make A Four Column Layout In Gutenberg","isPartOf":{"@id":"https:\/\/www.intelliwolf.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png","datePublished":"2021-07-20T01:33:18+00:00","dateModified":"2021-07-20T01:40:35+00:00","breadcrumb":{"@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#primaryimage","url":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png","contentUrl":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png","width":466,"height":438},{"@type":"BreadcrumbList","@id":"https:\/\/www.intelliwolf.com\/how-to-make-a-four-column-layout-in-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.intelliwolf.com\/"},{"@type":"ListItem","position":2,"name":"General","item":"https:\/\/www.intelliwolf.com\/category\/general\/"},{"@type":"ListItem","position":3,"name":"How To Make A Four Column Layout In Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/www.intelliwolf.com\/#website","url":"https:\/\/www.intelliwolf.com\/","name":"Intelliwolf","description":"WordPress, Web Design and Coding Tutorials","publisher":{"@id":"https:\/\/www.intelliwolf.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intelliwolf.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.intelliwolf.com\/#organization","name":"Intelliwolf","url":"https:\/\/www.intelliwolf.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/","url":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","contentUrl":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-content\/uploads\/intelliwolf-logo-300t.png","width":300,"height":100,"caption":"Intelliwolf"},"image":{"@id":"https:\/\/www.intelliwolf.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/7209e3ff14822e4d70d5f194a310f343","name":"Mike Haydon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.intelliwolf.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5f4754fae310a04dede91d15e57c8a0?s=96&d=mm&r=g","caption":"Mike Haydon"},"sameAs":["https:\/\/intelliwolf.com\/about-mike-haydon\/"]}]}},"_links":{"self":[{"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/posts\/2345"}],"collection":[{"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/comments?post=2345"}],"version-history":[{"count":3,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/posts\/2345\/revisions"}],"predecessor-version":[{"id":2358,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/posts\/2345\/revisions\/2358"}],"wp:attachment":[{"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/media?parent=2345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/categories?post=2345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/wp-json\/wp\/v2\/tags?post=2345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Gutenberg](\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-01.png\")
<\/figure><\/div>\n\n\n\n![\"Gutenberg](\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-02-600x274.png\")
<\/figure><\/div>\n\n\n\n![\"Arrow](\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-03-600x184.png\")
<\/figure><\/div>\n\n\n\n![\"Screenshot](\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-04-600x171.png\")
<\/figure><\/div>\n\n\n\n![\"Gutenberg](\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-05-600x329.png\")
<\/figure><\/div>\n\n\n\n![\"Arrow](\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-08-600x229.png\")
<\/figure><\/div>\n\n\n\n![\"Arrow](\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-09-600x345.png\")
<\/figure><\/div>\n\n\n\n![\"Gutenberg](\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-06.png\")
<\/figure><\/div>\n\n\n\n![\"Final](\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2021\/07\/2021-07-20-gutenberg-four-columns-07-600x179.png\")
<\/figure><\/div>\n\n\n\n