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).
Creating a grid layout
You can turn any layout element (section, container, block, div) into a CSS grid layout by setting the Display value to grid. This element is your Grid Container.
Every direct child element of your Grid container is a Grid Item, with additional settings for Grid column & Grid row to place an item it within the grid.
When editing a grid container in the builder a grid overlay becomes visible indicating the grid cells. Clicking the little four-square element action icon lets to show/hide this overlay.
Grid container (display: grid) with 6 grid items (direct children) and 20px gap
As you can see in the screenshot above grid items are laid out in rows by default, covering the full width of the grid container. Which in itself doesn’t unlock the true power of CSS grid, until you start …
Visual Grid Builder
When a layout element’s Display value is set to grid, Bricks adds a Visual Grid Builder action to the grid control. Open it to create and adjust columns, rows, and gaps visually instead of writing every grid-template-columns or grid-template-rows value by hand.
The Visual Grid Builder shows the grid panel, row and column controls, breakpoint controls, undo/redo history, and actions such as filling or resetting the grid. Column, row, and gap values are saved back to the grid controls. Grid item placement is saved to child grid controls where possible; for query loop items, active class styling, non-nestable elements, or component roots, Bricks writes generated placement CSS into the selected grid’s custom CSS between Visual Grid Builder markers.
