Display:grid; layout


Basic

DGL basically based on 12 columns. The container class is dgl-container and each column class is column.

column
column
column
column
column
column
column
column
column
column
column
column

Custom total columns

You can set total columns from 1 to 11 and the column size will be change dynamically. Add total-n-columns where n is number. Example: total-2-columns

column
column

Full width

To make container full width, add full-width class to the container.

column
column
column
column
column
column
column
column
column
column
column
column

Has column gap

By default the grid columns has no gap. If you want gap between columns, add has-column-gap class to the container.

This example show empty column because if contain any text then it will be overflow width on small screen.

 
 
 
 
 
 
 
 
 
 
 
 

Basic column sizes

This example will show you about how to use column size on basic container (12 columns by default). The number of col-start-n and col-end-n class is grid line (where n is number). Total 12 columns means total 13 grid lines.

Add col-start-n and col-end-n class to the column class.

col-start-1 col-end-2
col-start-2 col-end-13
col-start-1 col-end-3
col-start-3 col-end-13
col-start-1 col-end-4
col-start-4 col-end-13
col-start-1 col-end-5
col-start-5 col-end-13
col-start-1 col-end-6
col-start-6 col-end-13
col-start-1 col-end-7
col-start-7 col-end-13
col-start-1 col-end-8
col-start-8 col-end-13
col-start-1 col-end-9
col-start-9 col-end-13
col-start-1 col-end-10
col-start-10 col-end-13
col-start-1 col-end-11
col-start-11 col-end-13
col-start-1 col-end-12
col-start-12 col-end-13
col-start-1 col-end-13

Offset

To use offset or push is easy, you just count on grid line you want and set the col-start-n and col-end-n class (where n is number).

col-start-2 col-end-4
col-start-5 col-end-7

Responsive

From the example above, the class name col-start-n and col-end-n are start working on extra small screen or larger. To set different column sizeand offset on differenct screen size use sm, md, lg, xl prefix.

Example: col-start-1 col-end-6 md-col-start-1 md-col-end-3. Resize your web browser to see the example below in action.

SM

col-start-1 col-end-13 sm-col-start-1 sm-col-end-2
col-start-1 col-end-13 sm-col-start-2 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-3
col-start-1 col-end-13 sm-col-start-3 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-4
col-start-1 col-end-13 sm-col-start-4 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-5
col-start-1 col-end-13 sm-col-start-5 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-6
col-start-1 col-end-13 sm-col-start-6 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-7
col-start-1 col-end-13 sm-col-start-7 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-8
col-start-1 col-end-13 sm-col-start-8 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-9
col-start-1 col-end-13 sm-col-start-9 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-10
col-start-1 col-end-13 sm-col-start-10 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-11
col-start-1 col-end-13 sm-col-start-11 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-12
col-start-1 col-end-13 sm-col-start-12 sm-col-end-13
col-start-1 col-end-13 sm-col-start-1 sm-col-end-13

MD

col-start-1 col-end-13 md-col-start-1 md-col-end-2
col-start-1 col-end-13 md-col-start-2 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-3
col-start-1 col-end-13 md-col-start-3 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-4
col-start-1 col-end-13 md-col-start-4 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-5
col-start-1 col-end-13 md-col-start-5 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-6
col-start-1 col-end-13 md-col-start-6 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-7
col-start-1 col-end-13 md-col-start-7 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-8
col-start-1 col-end-13 md-col-start-8 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-9
col-start-1 col-end-13 md-col-start-9 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-10
col-start-1 col-end-13 md-col-start-10 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-11
col-start-1 col-end-13 md-col-start-11 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-12
col-start-1 col-end-13 md-col-start-12 md-col-end-13
col-start-1 col-end-13 md-col-start-1 md-col-end-13

LG

col-start-1 col-end-13 lg-col-start-1 lg-col-end-2
col-start-1 col-end-13 lg-col-start-2 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-3
col-start-1 col-end-13 lg-col-start-3 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-4
col-start-1 col-end-13 lg-col-start-4 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-5
col-start-1 col-end-13 lg-col-start-5 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-6
col-start-1 col-end-13 lg-col-start-6 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-7
col-start-1 col-end-13 lg-col-start-7 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-8
col-start-1 col-end-13 lg-col-start-8 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-9
col-start-1 col-end-13 lg-col-start-9 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-10
col-start-1 col-end-13 lg-col-start-10 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-11
col-start-1 col-end-13 lg-col-start-11 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-12
col-start-1 col-end-13 lg-col-start-12 lg-col-end-13
col-start-1 col-end-13 lg-col-start-1 lg-col-end-13

XL

col-start-1 col-end-13 xl-col-start-1 xl-col-end-2
col-start-1 col-end-13 xl-col-start-2 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-3
col-start-1 col-end-13 xl-col-start-3 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-4
col-start-1 col-end-13 xl-col-start-4 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-5
col-start-1 col-end-13 xl-col-start-5 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-6
col-start-1 col-end-13 xl-col-start-6 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-7
col-start-1 col-end-13 xl-col-start-7 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-8
col-start-1 col-end-13 xl-col-start-8 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-9
col-start-1 col-end-13 xl-col-start-9 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-10
col-start-1 col-end-13 xl-col-start-10 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-11
col-start-1 col-end-13 xl-col-start-11 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-12
col-start-1 col-end-13 xl-col-start-12 xl-col-end-13
col-start-1 col-end-13 xl-col-start-1 xl-col-end-13

Mixed

col-start-1 col-end-7 lg-col-start-2 lg-col-end-5 xl-col-start-1 xl-col-end-5
col-start-7 col-end-13 lg-col-start-6 lg-col-end-8 xl-col-start-5 xl-col-end-9
col-start-1 col-end-13 lg-col-start-9 lg-col-end-12 xl-col-start-9 xl-col-end-13

Custom column sizes

Based on custom total columns, this can also set the column size. The number of col-start-n and col-end-n class is grid line (where n is number). For example: total 3 columns means total 4 grid lines.

Total 3 columns

col-start-1 col-end-2
col-start-2 col-end-4

Total 5 columns

col-start-1 col-end-2
col-start-2 col-end-3
col-start-3 col-end-4
col-start-4 col-end-6

Total 7 columns

col-start-1 col-end-2
col-start-2 col-end-3
col-start-3 col-end-4
col-start-4 col-end-5
col-start-5 col-end-6
col-start-6 col-end-8

Total 9 columns

col-start-1 col-end-2
col-start-2 col-end-3
col-start-3 col-end-4
col-start-4 col-end-5
col-start-5 col-end-6
col-start-6 col-end-7
col-start-7 col-end-8
col-start-8 col-end-10

Total 11 columns

col-start-1 col-end-2
col-start-2 col-end-3
col-start-3 col-end-4
col-start-4 col-end-5
col-start-5 col-end-6
col-start-6 col-end-7
col-start-7 col-end-8
col-start-8 col-end-9
col-start-9 col-end-10
col-start-10 col-end-12

Nested grid

The column grid can be nested, just put dgl-container class inside the column.

A
B
B1
B2