# Grid List

Grid List is tile like list responsively adapt to screen size

## Content List & Content Grid Class

Using our "content-list" combination with "content-grid" class you can easily create a grid list with custom width, custom height, and custom column size responsive effect that fit perfectly with bootstrap responsive value. Below is table for responsive explanation and class.

### Width Responsive Table (used for megamenu width)

Column Width | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px)
--- | --- | --- | --- | ---
60px | `width-xs-1` | `width-sm-1` | `width-md-1` | `width-lg-1`
180px | `width-xs-2` | `width-sm-2` | `width-md-2` | `width-lg-2`
240px | `width-xs-3` | `width-sm-3` | `width-md-3` | `width-lg-3`
320px | `width-xs-4` | `width-sm-4` | `width-md-4` | `width-lg-4`
480px | `width-xs-5` | `width-sm-5` | `width-md-5` | `width-lg-5`
720px | `width-xs-6` | `width-sm-6` | `width-md-6` | `width-lg-6`
1130px / full-width | `width-xs-full` | `width-sm-full` | `width-md-full` | `width-lg-full`

### Height Responsive Table

Column height | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px)
--- | --- | --- | --- | ---
60px | `height-xs-1` | `height-sm-1` | `height-md-1` | `height-lg-1`
180px | `height-xs-2` | `height-sm-2` | `height-md-2` | `height-lg-2`
240px | `height-xs-3` | `height-sm-3` | `height-md-3` | `height-lg-3`
320px | `height-xs-4` | `height-sm-4` | `height-md-4` | `height-lg-4`
480px | `height-xs-5` | `height-sm-5` | `height-md-5` | `height-lg-5`
720px | `height-xs-6` | `height-sm-6` | `height-md-6` | `height-lg-6`

### Column Responsive Table

Column Total | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px)
--- | --- | --- | --- | ---
1 Column | `column-xs-1` | `column-sm-1` | `column-md-1` | `column-lg-1`
2 Columns | `column-xs-2` | `column-sm-2` | `column-md-2` | `column-lg-2`
3 Columns | `column-xs-3` | `column-sm-3` | `column-md-3` | `column-lg-3`
4 Columns | `column-xs-4` | `column-sm-4` | `column-md-4` | `column-lg-4`
5 Columns | `column-xs-5` | `column-sm-5` | `column-md-5` | `column-lg-5`
6 Columns | `column-xs-6` | `column-sm-6` | `column-md-6` | `column-lg-6`

### Example Column Total From 6(lg) to 5(md) to 4(sm) to 3(xs)

### 3(lg) 2(md) to 3(sm) to 1(xs)