This example project / page contains a number of different grids that have been built using the Grid Plus stack available in the Stripped Addon Pack. Each grid has it's own 'developer notes' that are viewable in Edit mode so please refer to these to see how the grids have been built.
All grids use the same 7 items but use different techniques to distribute and align them. The focus here is on structure as opposed to content. These are only a few examples, the possibilities for different grid layouts is almost limitless!
There is also a lot of support material (including videos) on our support site. Please also consider researching / learning about CSS Grid online as a good understaning of the fundamentals behind this will really help when you are building grids.
Be sure to adjust the screen width when previewing to see how the grids change / adapt as the available space lessens.
This grid uses only the default settings. You will see that without doing anything we get a fully respnsive grid.
This grid tweaks the spans of a couple of items at different breakpoints so that we always have a 'full' grid (i.e. all available column space is occupied at all breakpoints).
This grid uses a 'custom definition' (instead of using the min-width approach) to set out 12 equal width columns. The items have then been set to span different amounts of these columns at different breakpoints.
This grid again uses a 'custom definition' but this time it explicitly specifies how wide the columns should be (at different breakpoints). For example, on desktop, the grid has been set to have 4 columns: Column 1 is equal to 200px, Column 2 is equal to 15% of the available width and columns 3 and 4 are both half of the remaining space. Below 600px the grid has been set to revert to using the min-width approach.
All of the previous grids let the grid items dictate the height of the rows (though each item had been given a height of 33vh to give it some more height). This grid sets the height of the rows (and uses the same column definitions as the grid directly above). On desktop the full grid has been given a height of 100% of the browser height. Row 1 has been set to have a height 150px, row 3 has been set to have 20% and row 2 has been set to take up all of the remaining space. On mobile the height has been set to be 33vh per item.
For any grid item, we can opt to explicitly state its position on the grid. If we give 2 (or more) items similar positions then we can overlap grid items. This can be useful if you are trying to recreate a 'magazine' type layout.