{"id":3630,"date":"2022-12-22T06:07:20","date_gmt":"2022-12-22T06:07:20","guid":{"rendered":"https:\/\/academy.bricksbuilder.io\/?post_type=bricks_article&p=3630"},"modified":"2022-12-22T06:23:54","modified_gmt":"2022-12-22T06:23:54","slug":"css-grid-layout","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/css-grid-layout\/","title":{"rendered":"CSS Grid Layout"},"content":{"rendered":"\n
Available since Bricks 1.6.1 CSS grid allows you to create two-dimensional layouts (columns & rows). Whereas CSS flexbox, which Bricks uses as the default layout model, is designed for one-dimensional layouts (either column or row).<\/p>\n\n\n\n
You can turn any layout element (section, container, block, div) into a CSS grid layout by setting the Display<\/strong> value to Every direct child element of your Grid container is a Grid Item<\/strong>, with additional settings for Grid column<\/strong> & Grid row<\/strong> to place an item it within the grid.<\/p>\n\n\n\n When editing a grid container in the builder a grid overlay becomes visible indicating the grid cells<\/a>. Clicking the little four-square element action icon lets to show\/hide this overlay.<\/p>\n\n\n\ngrid<\/code>. This element is your Grid Container<\/strong>. <\/p>\n\n\n\n