{"id":2285,"date":"2021-02-01T16:40:03","date_gmt":"2021-02-01T16:40:03","guid":{"rendered":"https:\/\/www.gmitropapas.com\/?post_type=knowledgebase&#038;p=2285"},"modified":"2021-02-01T16:49:04","modified_gmt":"2021-02-01T16:49:04","slug":"fill-vertical-space-in-a-grid-container","status":"publish","type":"knowledgebase","link":"https:\/\/www.gmitropapas.com\/generatepress-tips-and-tricks\/generateblocks\/fill-vertical-space-in-a-grid-container\/","title":{"rendered":"Fill vertical space in a grid container"},"content":{"rendered":"\n<p>You might bump into an issue where you have a grid with info boxes inside and struggling to bottom-align the buttons, like so:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1300\" height=\"877\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzAwIDg3NyIgd2lkdGg9IjEzMDAiIGhlaWdodD0iODc3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGd3d3LmdtaXRyb3BhcGFzLmNvbSUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGMjAyMSUyRjAyJTJGR0JfZ3JpZF9pbm5lci1jb2x1bW5zLmpwZyIgZGF0YS13PSIxMzAwIiBkYXRhLWg9Ijg3NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"GenerateBlocks Grid\" class=\"wp-image-2288\"  \/><figcaption>GenerateBlocks Grid<\/figcaption><\/figure>\n\n\n\n<p>The above Grid has 3 inner columns but currently, there is no way to distribute the columns&#8217; vertical space and bottom-align the buttons. To achieve the required result select the <strong>Grid wrapper<\/strong> and give it <strong>an additional CSS class<\/strong> of, let&#8217;s say <code>align-bottom-button<\/code>.<\/p>\n\n\n\n<p>Then, use the following CSS:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.align-bottom-button .gb-grid-column>.gb-container>.gb-inside-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.align-bottom-button .gb-grid-column>.gb-container>.gb-inside-container>.gb-button-wrapper {\n    margin-top: auto;\n}<\/pre>\n\n\n\n<p>That should fix the issue:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1300\" height=\"877\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzAwIDg3NyIgd2lkdGg9IjEzMDAiIGhlaWdodD0iODc3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGd3d3LmdtaXRyb3BhcGFzLmNvbSUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGMjAyMSUyRjAyJTJGR0JfaW5uZXItY29sdW1ucy1kaXN0cmlidXRlX3ZlcnRpY2FsLXNwYWNlLmpwZyIgZGF0YS13PSIxMzAwIiBkYXRhLWg9Ijg3NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"GenerateBlocks Grid - Distributed vertical space\" class=\"wp-image-2289\"  \/><figcaption>GenerateBlocks Grid &#8211; Distributed vertical space<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to fill vertical space in a GenerateBlocks grid container. <\/p>\n<p class=\"read-more-button-container\"><a class=\"button\" href=\"https:\/\/www.gmitropapas.com\/generatepress-tips-and-tricks\/generateblocks\/fill-vertical-space-in-a-grid-container\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"GenerateBlocks - Fill vertical space in a grid container","_seopress_titles_desc":"Learn how to fill vertical space in a GenerateBlocks grid container.","_seopress_robots_index":"","_vp_format_video_url":"","_vp_image_focal_point":[]},"knowledgebase_cat":[36],"acf":[],"_links":{"self":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/knowledgebase\/2285"}],"collection":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/comments?post=2285"}],"version-history":[{"count":0,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/knowledgebase\/2285\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/media?parent=2285"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/knowledgebase_cat?post=2285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}