> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/column-grid-full-example-responsive.md). # Column Grid full example(Responsive) https\://www\.quackit.com/html/templates/css\_grid\_templates.cfm
```html Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
``` #### 12 Column Grid (Mobile First)
```html Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
``` #### 12 Column Grid Example 2 (Responsive)
```html Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
``` #### 12 Column Grid Example 2 (Mobile First)
```html Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
``` #### 12 Column Vertical Grid (Responsive)
```html Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
``` #### 12 Column Vertical Grid (Mobile First)
```html Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
``` #### Grid Layout 1
```html CSS Grid Template 1
Article
Ads
``` #### Grid Layout 2
```html CSS Grid Template 2
Article
Ads
``` #### Grid Layout 3
```html CSS Grid Template 3
Article
Ads
``` #### Grid Layout 4
```html CSS Grid Template 4
Article
Ads
``` #### Grid Layout 5
```html CSS Grid Template 5
Article
Ads
``` #### Grid Layout 6
```html CSS Grid Template 6
Article
Ads
``` #### Grid Layout 7
```html CSS Grid Template 7
Article
Ads
``` #### Grid Layout 8
```html CSS Grid Template 8
Article
Ads
``` #### Grid Layout 9
```html CSS Grid Template 9
Article
Ads
``` #### Grid Layout 10
``` CSS Grid Template 10
Article
Ads
``` #### Grid Layout 11
```html Example
1
2
3
4
5
6
7
8
9
10
``` #### Grid Layout 12
```html Example
1
2
3
4
5
6
7
8
9
``` #### Form with Auto Placement
```html Form template with CSS grid auto placement
Which taxi do you require?
Extras
``` #### Nested Grid
```html Example
1
2
3
5
6
7
8
``` #### Repeating Grid
```html Example
1
2
3
4
5
6
7
8
9
``` #### Repeating Grid with Span
```html Example
1
2
3
4
5
6
7
8
9
``` [
](https://www.quackit.com/html/html_editors/scratchpad/preview.cfm?example=/css/grid/examples/12_column_grid_mobile_first)