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.

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.