Grids are similar to columns (in fact columns can behave in a grid-like way). Perhaps grids a little easier to create and manage than columns because the layouts are pre-defined (including responsive layouts), but grids are also less flexible than column. Grid layout design is intricate and there is a huge number of responsive layout options, so we provide just a few commonly useful grids in the standard Acora framework. Your site developer can create more grid layouts if desired.
The standard grid layouts currently can only apply to collections which use the cards class, or otherwise simple HTML blocks with a 'div.layout-grid-x > div' HTML structure.
Standard Grids
Grid Layout #1
Four items in three equal width columns: the first item is large, spanning three rows and two columns, and the other three items stack in the third column. The large one fills the content width on medium screens and the others stack to two columns, before everything ends up in a single column on small screens.
Grid Layout #2
Four items in three equal width columns: the first two items fill the first two columns, and the last two are stacked in the third column. They all stack to two columns, then one on smaller screens.
Grid Layout #3
Any number of items: the first item fills the width of the content area, and the remaining items appear in three equal width columns (stacking to two columns, then one on smaller screens).
Grid Layout #4
Up to 6 items in a three column layout with a double width item on each row. On the first row the wider item is on the left, and it's on the right in the second row. Items compress to the same width in two columns on medium screens and one column on smaller screens.
Grid Layout #5
Up to 9 items in a three column layout across three rows where one item is twice the width of the other two. The wider one is the first one on the first row, the second one on the second row, and the third one on the third row. Items compress to the same width on medium screens, then two columns and one column on smaller screens.
Grid Layout #6
Up to 6 items in a three column layout with a double width item on each row. On the first row the wider item is on the left, and it's on the right in the second row. Items compress to the same width in two columns on medium screens and one column on smaller screens.