CSS Grid
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.
Grid Preview
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.
Apply Grid
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.
Grid Builder
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.
Switch View
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.
Columns Template
The Columns template displays the grid columns.
Add
To add a column, click the "+" icon at the end of the Columns Template.
Remove
Select the Column you wish to remove in the Column Template.
Click the "Remove" icon.
Modify Width
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.
Minmax Value
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.
Auto
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.
Rows Template
The Rows Template displays the grid rows.
Add
To add a row, click the "+" icon at the bottom of the Rows Template.
Remove
Select the row you wish to remove in the Row Template.
Click the "Remove" icon.
Modify Height
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.
Minmax Value
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.
Auto
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.
Central Panel
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.
Items View
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).
Add
To add an item, click the plus icon in the targeted cell.
The cell will become darker and a number is automatically assigned.
Resize
To resize an item, hover over the required item.
Drag the appropriate arrows to resize as required.
Move
To move an item, drag and drop the item on the grid as required.
Remove
To remove an item, hover over the assigned number and click the remove button.
Apply an Area
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.
Areas View
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.
Add
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".
Rename
Open the Grid Builder.
In Area View, find the required area to rename.
Input a suitable name.
Remove
In Area View, Hover over the name of the area to be removed.
Click the Remove button to remove.
Settings Panel
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.
Columns
The Columns property allows you to manage your grid columns.
Add
In the Layout tab of the Primary tab, set display to Grid.
Click the "+" sign next to Columns to add another Column.
Modify Width
Select a column in the Settings tab.
In the Defaults tab, adjust width as required.
Minmax Value
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.
Remove
Click remove icon next to the column you wish to remove.
Re-order
Drag column to the required position.
Rows
The Rows property allows you to manage your grid rows.
Add
In the Layout tab of the Primary tab, set display to Grid.
Click the "+" sign next to Rows to add a row.
Modify Height
Adjust height as required.
Minmax Value
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.
Remove
Find row you wish to remove in the Settings tab.
Click remove icon.
Re-order
Drag row to the required position.
Areas
The areas property allows you to manage your grid areas.
Rename
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.
Modify Position
Allows you to modify the item’s position.
Adjust column and row values accordingly.
Remove
Allows you to remove an item.
Click the remove icon.
Items
The Items property allows you to manage your grid items.
Modify Position
Allows you to modify the areas’s position.
Adjust column and row values accordingly.
Apply Area
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.
Remove
Allows you to remove an item.
Click the remove icon.
Row and Column Gap
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.
Auto Flow
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.
Auto Columns
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.
Auto Rows
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.
Align Items
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.
Justify Items
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.
Align Content
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.
Justify Content
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.
Child Specific CSS Grid Properties
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.
Grid Viewer
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.
Place Child
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.
Resize Child
To resize, hover over the required child.
Drag the appropriate arrows to resize as required.
Move Child
To move a child, drag and drop the child on the grid as required.
Apply Area
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.
Column and Row Properties
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.
Align Items
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.
Justify 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.
Last updated