{"id":1565531,"date":"2020-03-27T13:33:53","date_gmt":"2020-03-27T13:33:53","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&#038;p=1565531"},"modified":"2020-11-16T10:07:52","modified_gmt":"2020-11-16T10:07:52","slug":"responsive-columns-and-grids","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/de\/course-lesson\/responsive-columns-and-grids\/","title":{"rendered":"Creating Responsive Columns and Grids"},"content":{"rendered":"\n<p>You can also set a different layout for each device type.  Of course, you can many Grid blocks on your page.<\/p>\n\n\n\n<p>Each grid consists of rows that have cells in it. In each cell, you can place one or more blocks. The first step after inserting a Grid block is to set the number of columns. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"58274ba01a2ab3f4ec42a2a91ce0c898\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/04\/toolset-blocks-layout-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/04\/toolset-blocks-layout-1-500x238.png\" alt=\"Selecting a layout for your Grid block\" class=\"wp-image-1578259\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Selecting a layout for your Grid block<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Once you have your columns in place you can easily adjust the width by dragging the column border.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"7641eb49bbf55e34afdcf4317460cff4\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/04\/toolset-blocks-resize-columns.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/04\/toolset-blocks-resize-columns-500x258.png\" alt=\"Resizing the columns in the Grid block\" class=\"wp-image-1572321\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Resizing the columns in the Grid block<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The Grid block settings<\/h2>\n\n\n\n<p>The Grid block has multiple useful options:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>You can change the number of columns at any time. When you reduce the number of columns, your content automatically shifts.<\/li><li>You have full control over the gap (space) between columns and rows.<\/li><li>You can have different columns per screen size. On wide screens, place several columns. On tablets fewer and usually, one column is great for phone screens.<\/li><li>You can reverse the column order for sensible image positions. This allows you to control when \u201cfloating\u201d images appear on phones. Reverse the column order for right-floating images to come before the text on phones.<\/li><\/ul>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"509b11e58fa3de7dbe704c61b5817369\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/04\/toolset-blocks-grid-settings-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2020\/04\/toolset-blocks-grid-settings-1-500x259.png\" alt=\"Setting a Grid block properties\" class=\"wp-image-1578301\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Setting a Grid block properties<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Using grid features in Views and archives<\/h2>\n\n\n\n<div class=\"tb-fields-and-text\" data-toolset-blocks-fields-and-text=\"3e1d2592ce20bdf2bf813c9dfa44c991\"><p><span>The features of the Toolset Grid block are also available when you create <a href=\"https:\/\/toolset.com\/de\/course-lesson\/creating-a-view\/\">Views<\/a> <\/span><span>and design <a href=\"https:\/\/toolset.com\/de\/course-lesson\/creating-a-custom-archive-page\/\">archives<\/a><\/span><span>. The grid layout makes your lists of posts look great on narrow screens.<\/span><\/p><\/div>\n\n\n\n<h3 class=\"tb-heading\" data-toolset-blocks-heading=\"c8c64c23083cf5552c415f615498b2aa\">Changing the grid options for a View<\/h3>\n\n\n\n<p>To change grid options for your <a href=\"https:\/\/toolset.com\/de\/glossary\/view\/\">View<\/a>, select the <strong>View Loop<\/strong> block and expand the <strong>Grid Settings <\/strong>section. Tweak the options for your View&#8217;s grid output. <\/p>\n\n\n\n<h3 class=\"tb-heading\" data-toolset-blocks-heading=\"c8c64c23083cf5552c415f615498b2aa\">Changing the grid options for a WordPress Archive<\/h3>\n\n\n\n<p>To change grid options for your WordPress <a href=\"https:\/\/toolset.com\/de\/glossary\/archive\/\">Archive<\/a>, select the <strong>WordPress Archive Loop<\/strong> block and expand the <strong>Grid Settings<\/strong> section. Tweak the options for your archive&#8217;s grid output.<\/p>\n","protected":false},"author":4341,"featured_media":1666535,"template":"","related-lesson":[8421,8409,8417,8427,8411],"class_list":["post-1565531","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-custom-search","related-lesson-archive-pages","related-lesson-designing","related-lesson-post-templates","related-lesson-view"],"_links":{"self":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/1565531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/users\/4341"}],"version-history":[{"count":8,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/1565531\/revisions"}],"predecessor-version":[{"id":1676277,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/1565531\/revisions\/1676277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/media\/1666535"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/media?parent=1565531"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/related-lesson?post=1565531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}