Grid

Powerful grid based layout system

The Grid Element is a powerful layout system based on CSS Grid that allows you to create complex two-dimensional grid-based layouts for web pages. It provides a precise way to position and align elements within a grid container, making it easier to design responsive and flexible layouts.

With the Grid Element, you can define rows and columns, control their sizes, and place items anywhere within the grid. You can also set the grid-gap for adding spacing between grid cells, you can even create nested grids.

Getting Started with Grids

When you first drag a Grid onto your page, you might notice that the columns aren’t immediately visible. That’s because the grid requires content to define its layout. To get started, drag and drop a Container into the grid. The container will occupy the number of columns you’ve set for the grid. As you add more containers, an insertion point will appear to the left or right of the existing container, guiding you on where the new content will fit. Drop the container, and you’ll see the grid automatically split into two columns. Repeat this process to populate the grid with as many columns as you’ve set up.

Once your containers are in the grid, you can adjust their behavior by changing their type to Grid Item. This setting allows you to control each item’s width. For example:

• If you’ve set your grid to 4 columns, you might set each grid item’s width to 1, which will evenly distribute the space across 4 columns.

• Alternatively, you can define the grid as having 12 columns and assign each grid item a width of 3. This approach is functionally identical but provides more granular control. While both methods work, many find the simpler “4 columns, 1 width per item” method easier to manage.

Grids can feel a bit tricky at first, but once you get the hang of it, they’re incredibly flexible and powerful.