Introduction
The Grid Container allows you to quickly align the elements on your page but contains enough options to keep your designs fresh and interesting. Click on the hotspots below to explore the Grid Container’s layout options.
Layout tab - Container
A dropdown menu with two choices
1. Boxed - Allows you to set the width of the Grid Container using the Width slider. Whatever value you choose, the container will remain centered.
2. Full Width - Sets the container to take up the full screen width. This setting disables the Width slider.
Use the slide to adjust the minimum height of the container. Learn more about measurement units.1. Boxed - Allows you to set the width of the Grid Container using the Width slider. Whatever value you choose, the container will remain centered.
2. Full Width - Sets the container to take up the full screen width. This setting disables the Width slider.
Use the dropdown to toggle between Flexbox Container and Grid Container.
Layout tab - Items
By default, set to Show which will allow you to see the outline of the cells in a grid. Hide will make the cell lines invisible.
These outlines will not be visible when previewing or viewing the page.
Use the slide to change the width of all columns using the fraction unit of measurement.
Use the dropdown to toggle between measuring columns in fractions (FR) and in custom measurements. Custom measurement allows you to set column width by standard units of measurement (e.g. pixels(PX), EM, REM etc.) or as CSS properties. Custom measurement is also used to create different size columns. This is done by selecting custom measurement and entering a value for each column. For example, for three columns you could enter the values “200PX 1FR 400PX”. This would create three columns of these respective widths. Learn more about fractions as a unit of measurement.
Use the slider to set the number of rows in your grid. By default row height is measured in fractions (FR), but that can be changed with the measurement dropdown menu. Learn more about fractions as a unit of measurement.
Use the dropdown to toggle between measuring rows in fractions (FR) and in custom measurements. Custom measurement allows you to set row height by standard units of measurement (e.g. pixels(PX), EM, REM etc.) or as CSS properties. Custom measurement is also used to create different size rows. This is done by selecting custom measurement and entering a value for each row. For example, for three rows you could enter the values “200PX 1FR 400PX”. This would create three rows of these respective heights.
Create empty spaces between the cells in a Grid Container. Learn more about units of measurement.
Use the dropdown to choose either Row or Column. If you choose Row, widgets are added to cells from left to row until the end of the row is reached when widgets are added to the next row down. If you choose Column, widgets are added to the next cell down until you reach the bottommost cell and then the next widget will be added to the top of the next column.
Adjusts the contents of the cells. Learn more about aligning and justifying items in a container.
Adjusts the contents of the cells. Learn more about aligning and justifying items in a container.
Adjusts the positioning of the cells within the grid. This only appears if you’re using custom sizes for your columns and the sum width of your columns is less than the width of the container (otherwise there is no room for the contents to shift). Learn more about aligning and justifying items in a container.
Adjusts the positioning of the cells within the grid. This only appears if you’re using custom sizes for your rows and the sum height of your rows is less than the height of the container (otherwise there is no room for the contents to shift).Learn more about aligning and justifying items in a container.
Next steps
Check out the style options for Grid Containers.