CSS Grid
Last updated
Last updated
CSS grid is a layout system to create grids (rows and columns) for organising and aligning content on a page in a structured and responsive way.
CSS grid is a layout system to create grids (rows and columns) for organising and aligning content on a page in a structured and responsive way.
The Cwicly Grid Builder makes it possible to capture the full power of CSS grid without a single line of code.
Visually build simple and complex layouts with areas, columns, rows, items, flows and many more options.
All Cwicly blocks support CSS Grid.
The Grid Preview provides a skeleton of the Grid Cells.
You can toggle the Grid Preview by clicking the Grid Preview icon in the Block Toolbar.
Find the Block Toolbar.
Toggle on Grid Preview (It will turn blue when toggled on).
The properties and features mentioned below apply to the grid parent.
To apply CSS Grid, select a block and set the display to grid.
Select the Cwicly block to which you wish to apply a CSS Grid.
In the Layout tab of the Primary tab of the Block Inspector, set Display to Grid.
The Grid Builder is a visual representation of the block’s grid and consists of a Column and Row template with a central panel that gives you a visual representation of your current grid setup.
The Items view allows you to directly position children where you want in the grid.
The Areas view allows you to define CSS areas in the grid. These do not affect children directly and can be applied separately.
Open the Grid Builder.
Two views are available, Items and Areas, which can be toggled from the Switch View icon.
The Items view (violet cells) allows you to directly position children where you want in the grid.
The Areas view (blue cells) allows you to define CSS areas in the grid. These do not affect children directly and can be applied separately.
To switch views, open the Grid Builder and toggle the Switch View icon.
The current view is signaled in the header.
The Columns template displays the grid columns.
To add a column, click the "+" icon at the end of the Columns Template.
Select the Column you wish to remove in the Column Template.
Click the "Remove" icon.
The width of a column can be modified from the Column Template. You can input the required value and select the required unit as necessary.
Select the column you wish to modify in the Column Template.
In the Default tab, adjust the width as required.
You can set a Minmax value, that is a minimum length value and a maximum length value.
Select the column to which you wish to add a Minmax value in the Columns Template.
In the Minmax tab, set a minimum and a maximum length value and unit as required.
The Auto property lets the browser calculate the columns’ width automatically. The Auto property is useful if you wish your grid to be automatically responsive.
You can choose between auto fit or auto fill.
The Auto property is only available when your columns do not contain any relative widths such as fractions.
Select the required column in the Columns Template.
Open the Default tab.
Find the Auto property.
Select "fill" or "fit" as required.
Double click to remove.
The Rows Template displays the grid rows.
To add a row, click the "+" icon at the bottom of the Rows Template.
Select the row you wish to remove in the Row Template.
Click the "Remove" icon.
The height of a row can be modified from the Row Template. You can input the required value and select a unit as necessary.
Select the row you wish to modify in the Column Template.
In the Default tab, adjust the height as required.
You can set a Minmax value, that is a minimum and maximum height value.
Select the row to which you wish to add a Minmax value in the Rows Template.
In the Minmax tab, set a minimum and a maximum height value and unit as required.
The Auto property lets the browser calculate the rows’ width automatically. The Auto property is useful if you wish your grid to be automatically responsive.
You can choose between auto fit or auto fill.
The Auto property is only available when your rows do not contain any relative widths such as fractions.
Select the required row in the Columns Template.
Find the Auto property.
Select "fill" or "fit" as required.
Double click to remove.
The central panel gives you a visual representation of your current grid setup.
You can choose one of the pre-defined grid layouts.
Open the Grid Builder.
Click to select a suitable pre-defined grid layout
Alternately, if you have already added rows and columns:
Open the Grid Builder.
Your current grid setup will be visible in the Central Panel.
The Items view allows you to directly position children where you want in the grid. You can add, resize and move your items on the grid as required.
Item numbers are automatically assigned chronologically (1,2,3,4,5 ...etc).
To add an item, click the plus icon in the targeted cell.
The cell will become darker and a number is automatically assigned.
To resize an item, hover over the required item.
Drag the appropriate arrows to resize as required.
To move an item, drag and drop the item on the grid as required.
To remove an item, hover over the assigned number and click the remove button.
An area can be applied to an Item by clicking its number.
You need to add one or more areas to be able to apply to an Item.
Once an Area has been applied to an Item, the Item can no longer be moved.
Open the Grid Builder.
Hover over the required Item number.
A list of the available Area(s) will be visible.
Select the required Area you wish to apply to the required Item.
The Areas view allows you to define CSS areas in the grid. These do not affect children directly and can be applied separately.
Areas are automatically assigned a chronological name in the format "Area-1, Area-2, Area-3...etc".
Areas can be renamed, resized and moved on the grid.
Open the Grid Builder
Switch to Area View.
Hover over the centre of the targeted cell.
Click the "+" icon.
Areas are automatically assigned a chronological name in the format "Area-1, Area-2, Area-3...etc".
Open the Grid Builder.
In Area View, find the required area to rename.
Input a suitable name.
In Area View, Hover over the name of the area to be removed.
Click the Remove button to remove.
The Settings Panel in the Block Inspector works in conjunction with the Grid Builder and includes settings for Columns, Rows, Areas, Items, Row and Column gap, Auto Flow, Auto Columns, Auto Rows, Align Items, Justify Items, Align Content, Justify Content.
In the Block Inspector, open the Primary tab.
Open the Settings tab.
Set Display to "grid".
The setting Panel will now be visible in the Block Inspector.
The Columns property allows you to manage your grid columns.
In the Layout tab of the Primary tab, set display to Grid.
Click the "+" sign next to Columns to add another Column.
Select a column in the Settings tab.
In the Defaults tab, adjust width as required.
You can set a Minmax value, that is a minimum and maximum width value
Select a column in the Settings tab.
Open the Minmax tab.
Set a minimum and a maximum width value and unit as required.
Click remove icon next to the column you wish to remove.
Drag column to the required position.
The Rows property allows you to manage your grid rows.
In the Layout tab of the Primary tab, set display to Grid.
Click the "+" sign next to Rows to add a row.
Adjust height as required.
You can set a Minmax value, that is a minimum and maximum width value.
Select a row in the Settings tab.
Open the Minmax tab.
Set a minimum and a maximum height value and unit as required.
Find row you wish to remove in the Settings tab.
Click remove icon.
Drag row to the required position.
The areas property allows you to manage your grid areas.
Allows you to rename an area.
Select the required area in the Grid tab of the Layout tab of the Primary tab.
Input required name.
Allows you to modify the item’s position.
Adjust column and row values accordingly.
Allows you to remove an item.
Click the remove icon.
The Items property allows you to manage your grid items.
Allows you to modify the areas’s position.
Adjust column and row values accordingly.
Allows you to apply an area to an item.
Select the required item in the Grid tab of the Layout tab of the Primary tab.
Select the area that you wish to apply to the item.
Allows you to remove an item.
Click the remove icon.
The Row and Gap properties allow you to adjust the Row and Column gap as required.
Find Row and Column Gap in the Grid tab of the Layout tab of the Primary tab.
Toggle Link on/off as required
Adjust Row and Column gap as required.
The Auto Flow property allows you to choose how your items are placed automatically, following a row or column direction or dense, row dense or column dense. You can also input your own requirements.
Open the Grid tab in the Layout tab of the Primary tab.
Select Auto Flow direction in the dropdown or input requirements.
The Auto Columns property allows you to specify the width of auto generated columns. Choose between 1fr(fraction), minmax (100px, auto), auto, min-content, max-content, fit-content or input your own requirements.
Open the Grid tab in the Layout tab of the Primary tab.
Select Auto Columns width in the dropdown or input requirements.
The Auto Rows property allows you to specify the height of auto generated rowx. Choose between 1fr(fraction), minmax (100px, auto), auto, min-content, max-content, fit-content or input your own requirements.
Open the Grid tab in the Layout tab of the Primary tab.
Select Auto Columns height in the dropdown or input requirements.
The Align Items property defines where grid items are placed along the column axis, such as start, centre, end, stretch, baseline.
Open the Grid tab in the Layout tab of the Primary tab.
Select Align Item's position in the dropdown or input requirements.
The Justify Items property defines where grid items are placed along the row axis, such as start, centre, end, stretch, baseline.
Open the Grid tab in the Layout tab of the Primary tab.
Select Justify Item's position in the dropdown or input requirements.
The Align Content property adjusts all grid content on the column axis when there is additional space available, such as start, centre, end, stretch, space-between, space-around.
Open the Grid tab in the Layout tab of the Primary tab.
Select Align Content type in the dropdown or input requirements.
The Justify Content property adjusts all grid content on the row axis when there is additional space available, such as start, centre, end, stretch, space-between, space-around.
Open the Grid tab in the Layout tab of the Primary tab.
Select Justify Content type in the dropdown or input requirements.
Specific CSS Grid properties can also be applied to children.
In the Grid Item tab you will find all the grid properties that apply to Children such as Area, Column Start, Column End, Row Start, Row End, Align Items, Justify Items.
The Grid Viewer gives you a visual representation of your grid and where you can place your child.
Select a direct grid child.
In the Grid Item tab of the Primary tab, click to open the Grid Viewer.
To place a child, click the "+" icon in the targeted cell in the Grid Viewer.
The cell will darken and a number will be assigned chronologically.
To resize, hover over the required child.
Drag the appropriate arrows to resize as required.
To move a child, drag and drop the child on the grid as required.
The Area property allows you to apply an area to a Child.
You need to add one or more areas to be able to apply an area to a child.
Once an area has been applied to a child, the child can no longer be moved.
The Columns and Rows properties will no longer be available in the Block Inspector.
In the Block Inspector, select the area you wish to apply to the child.
The Column and Row properties allow you to manually position a child in the grid.
In the Grid Item tab of the Primary tab, adjust the column and row values accordingly.
The Align Items property defines where a child is placed along the column axis, such as start, centre, end, stretch, baseline.
Open the Grid Item tab of the Primary tab.
Select required position in Align Items.
The Justify Items property defines where a child is placed along the row axis such as start, centre, end, stretch, baseline.
Open the Grid Item tab of the Primary tab.
Select required position in Justify Items.
