├── .DS_Store
├── .gitignore
├── 100g.gif
├── LICENSE
├── README.md
├── Smart-Grid-Demo.html
├── index.html
├── package.json
├── smart-grid-logo.svg
└── smart-grid.css


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/SMART-CSS-GRID/965c7a391930970c821269ad201d7ea009acaa16/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/SMART-CSS-GRID/965c7a391930970c821269ad201d7ea009acaa16/.gitignore


--------------------------------------------------------------------------------
/100g.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/SMART-CSS-GRID/965c7a391930970c821269ad201d7ea009acaa16/100g.gif


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Vladimir Carrer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![License MIT](https://img.shields.io/badge/licence-MIT-blue.svg)](https://choosealicense.com/licenses/mit/)
 2 | [![Gzip Size](https://img.badgesize.io/https://unpkg.com/smart-css-grid@1.0.0/smart-grid.css?compression=gzip)](https://unpkg.com/smart-css-grid@1.0.0/smart-grid.css)
 3 | 
 4 | 
 5 | 
 6 | 
 7 | <p align="center"><img src="smart-grid-logo.svg" /></p>
 8 | 
 9 | <h2 align="center"> SMART CSS GRID - Minimal CSS Framework </h2>
10 | 
11 | <p align="center"> Smart CSS Grid is CSS GRID based fluid responsive layout system with 12 columns. </p> 
12 | 
13 | <hr/>
14 | 
15 | * Minimal. It is only 0.5 KB. 
16 | * Clear syntax. 
17 | * No unnecessary nesting, meaning you will write less HTML.
18 | * Responsive.
19 | * Flexible the main width can be any number or uint ex: 960px, 90% or whatever you like.
20 | * Supports rows merging, nesting columns, column swapping..
21 | 
22 | The project is designed to adapt to any size or any column gap. You can change these values into the main CSS file. Example width: 85% and grid-gap: 20px; or width: 1200px and grid-gap: 14px;
23 | 
24 | [https://vladocar.github.io/SMART-CSS-GRID/](https://vladocar.github.io/SMART-CSS-GRID/)
25 | 
26 | [Demo 1](https://vladocar.github.io/SMART-CSS-GRID/Smart-Grid-Demo.html)
27 | 
28 | [Read more on my blog..](http://www.vcarrer.com/2018/05/smart-css-grid.html)
29 | 
30 | 
31 | ## Download or Install
32 | 
33 | You can simply download the library or use:
34 | 
35 | ```
36 | $ npm i smart-css-grid
37 | ```
38 | 
39 | You can use PKG CDN:
40 | 
41 | ```html
42 |  <link rel="stylesheet" href="https://unpkg.com/smart-css-grid@1.0.0/smart-grid.css">
43 | ```
44 | 
45 | ### License
46 | 
47 | This project is licensed under the MIT License
48 | 


--------------------------------------------------------------------------------
/Smart-Grid-Demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html><head>
  3 | <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4 |     <title>Smart CSS Grid</title>
  5 | 
  6 |     <link rel="stylesheet" href="smart-grid.css">
  7 |     <link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet">
  8 |     <style>
  9 | 	body {
 10 |     font-size-adjust:none;
 11 |     font-style:normal;
 12 |     font-variant:normal;
 13 |     font-weight:normal;
 14 |     font:14px/1.5 Helvetica,Arial, sans-serif;
 15 | 	}
 16 | 
 17 | h1,h2{margin: 5px 0; font-family: 'Montserrat', sans-serif; }
 18 | h1{font-size: 48px; line-height:1.18; color:#E01266;}
 19 | h2{font-size: 21px; line-height:1.3;}
 20 | 
 21 | 
 22 |   .center{
 23 |     text-align: center;
 24 |   }
 25 |   p {float:left;}
 26 |   p  img {float:left; margin-right: 10px}
 27 | 
 28 |   @media only screen and (max-width: 480px)   {
 29 |     .main{ width: 100% }
 30 |         .one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven{
 31 |           grid-column: auto / span 12
 32 |         }
 33 | 
 34 |         .one{
 35 |           grid-column: auto / span 6
 36 |         }
 37 | 
 38 |         #test,#test1{
 39 |             grid-column: auto / span 12; background-color: red; grid-row: auto;
 40 |         }
 41 | 
 42 |     }
 43 | 
 44 |    </style>
 45 | </head>
 46 | 
 47 |  <body>
 48 | 
 49 | 	 <div class="main">
 50 |     <div class="twelve center"><img id="logo" src="smart-grid-logo.svg"> </div>
 51 |     <div class="twelve center"><h1> SMART GRID </h1> <h2>Minimal Responsive Grid System</h2></div>
 52 | 
 53 |     <div class="six">
 54 |       <p>Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra.
 55 |       Vivamus cursus. </p>
 56 | 
 57 |       <p>Suspendisse potenti. Etiam sollicitudin. Vestibulum lacinia erat id neque. Morbi dolor. Nunc justo quam, pulvinar a, sagittis et, malesuada eget, nibh. Suspendisse laoreet risus ac quam. Mauris arcu.
 58 |        </p>
 59 |        <p>Morbi nunc. Cras in metus. Vestibulum mattis. Praesent interdum. In hac habitasse platea dictumst. Nunc commodo nisl ut turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tristique, augue sit amet bibendum ullamcorper, ipsum nisl malesuada arcu, ac aliquet tellus justo eu nisl. Vestibulum nec est.</p>
 60 | 
 61 |     </div>
 62 |     <div class="three">
 63 |       <p><img src="100g.gif" /> Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam.</p>
 64 |       <p><img src="100g.gif" /> Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Morbi nunc. Cras in metus. Vestibulum mattis. Praesent interdum. In hac habitasse platea dictumst.</p>
 65 |     </div>
 66 |     <div class="three">
 67 |       <p><img src="100g.gif" /> Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam.</p>
 68 |       <p><img src="100g.gif" /> Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Morbi nunc. Cras in metus. Vestibulum mattis. Praesent interdum. In hac habitasse platea dictumst.</p>
 69 |     </div>
 70 | 
 71 |     <div class="three">
 72 |       <p>
 73 |       <img src="100g.gif" />
 74 |       Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
 75 |       </p>
 76 |     </div>
 77 |     <div class="three">
 78 |       <p>
 79 |       <img src="100g.gif" />
 80 |       Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
 81 |       </p>
 82 |     </div>
 83 |     <div class="three">
 84 |       <p>
 85 |       <img src="100g.gif" />
 86 |       Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
 87 |       </p>
 88 |     </div>
 89 |     <div class="three">
 90 |       <p>
 91 |       <img src="100g.gif" />
 92 |       Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
 93 |       </p>
 94 |     </div>
 95 | 
 96 |     <div class="four">
 97 |       <p>Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra.
 98 |       </p>
 99 |     </div>
100 |     <div class="four">
101 |       <p>Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra.
102 |       </p>
103 |     </div>
104 |     <div class="four">
105 |       <p>Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra.
106 |       </p>
107 |     </div>
108 | 
109 |       <div class="twelve"><h2>Summary</h2>
110 |         <p>Smart Grid is CSS fluid responsive layout system with 12 columns and it is only 0.5 KB. Clear syntax. No unnecessary div nesting, meaning you will write less HTML.</p>
111 |       </div>
112 | 
113 | 	</div>
114 | </body></html>
115 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html><head>
  3 | <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4 |     <title>Smart CSS Grid</title>
  5 | 
  6 |     <link rel="stylesheet" href="smart-grid.css">
  7 |     <link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet">
  8 | <style>
  9 | 
 10 | 	body {
 11 |     font-family: 'Montserrat', sans-serif;
 12 |     font-size-adjust:none;
 13 |     font-style:normal;
 14 |     font-variant:normal;
 15 |     font-weight:normal;
 16 |     text-align: center;
 17 | 	}
 18 | 
 19 |   h1,h2{margin: 5px 0; color:#E01266 }
 20 |   h1{font-size: 48px; line-height:1.18;}
 21 |   h2{font-size: 36px; line-height:1.3;}
 22 | 
 23 | 
 24 |   .styling {
 25 | 		background-color: rgba(224,18,101,0.5);
 26 | 		color: #fff;
 27 |     border: 1px #E01266 solid;
 28 | 		border-radius: 4px;
 29 | 		padding: 12px;
 30 | 
 31 | 	}
 32 |   .center{
 33 |     text-align: center;
 34 |   }
 35 |   #test{
 36 |      grid-row: 20;  grid-column: 4 / 7; background-color: red;
 37 |   }
 38 |   #test1{
 39 |      grid-row: 21; grid-column: 3 / 5; background-color: red;
 40 |   }
 41 | 
 42 | 
 43 |   @media only screen and (max-width: 480px)   {
 44 |         #test,#test1{
 45 |             grid-column: auto / span 12; background-color: red; grid-row: auto;
 46 |         }
 47 |     }
 48 | 
 49 | </style>
 50 | 
 51 | </head>
 52 | 
 53 |  <body>
 54 | 
 55 | 	 <div class="main">
 56 |     <div class="twelve center"><img id="logo" src="smart-grid-logo.svg"> </div>
 57 |     <div class="twelve center"><h1> SMART CSS GRID </h1> <p>Minimal Responsive Grid System</p></div>
 58 | 	 	<div class="styling one">1</div>
 59 | 	 	<div class="styling one">2</div>
 60 | 	 	<div class="styling one">3</div>
 61 | 	 	<div class="styling one">4</div>
 62 | 	 	<div class="styling one">5</div>
 63 | 	 	<div class="styling one">6</div>
 64 | 	 	<div class="styling one">7</div>
 65 | 	 	<div class="styling one">8</div>
 66 | 	 	<div class="styling one">9</div>
 67 | 	 	<div class="styling one">10</div>
 68 | 	 	<div class="styling one">11</div>
 69 | 	 	<div class="styling one">12</div>
 70 | 
 71 |     <div class="styling two">1</div>
 72 |     <div class="styling two">2</div>
 73 |     <div class="styling two">3</div>
 74 |     <div class="styling two">4</div>
 75 |     <div class="styling two">5</div>
 76 |     <div class="styling two">6</div>
 77 | 
 78 |     <div class="styling three">1</div>
 79 |     <div class="styling three">2</div>
 80 |     <div class="styling three">3</div>
 81 |     <div class="styling three">4</div>
 82 | 
 83 |     <div class="styling four">1</div>
 84 |     <div class="styling four">2</div>
 85 |     <div class="styling four">3</div>
 86 | 
 87 |     <div class="styling six">1</div>
 88 |     <div class="styling six">2</div>
 89 | 
 90 |     <div class="styling twelve">1</div>
 91 | 
 92 |     <div class="styling four">Lightweight, only 0,5 Kb gzipped</div>
 93 |     <div class="styling four">No unnecessary div nesting</div>
 94 |     <div class="styling four">Based on CSS Grid</div>
 95 | 
 96 |     <div class="styling four">Responsive</div>
 97 |     <div class="styling four">12 column system</div>
 98 |     <div class="styling four">Simple syntax </div>
 99 | 
100 |     <div class="twelve"><h2>Simple naming system </h2></div>
101 | 
102 |     <div class="styling five">five</div>
103 |     <div class="styling seven">seven</div>
104 | 
105 |     <div class="styling nine">nine</div>
106 |     <div class="styling three">three</div>
107 | 
108 |     <div class="styling four">four</div>
109 |     <div class="styling two">two</div>
110 |     <div class="styling two">two</div>
111 |     <div class="styling four">four</div>
112 | 
113 |     <div class="styling four merge-three-rows">You can also merge rows</div>
114 |     <div class="styling four">four</div>
115 |     <div class="styling four">four</div>
116 | 
117 |     <div class="styling four">four</div>
118 |     <div class="styling four">four</div>
119 |     <div class="styling four">four</div>
120 |     <div class="styling four">four</div>
121 | 
122 |     <div class="twelve"><h2>Flexible & Fluid </h2>
123 |       <p>Choose any main width and the grid will auto adapt. Example: 90%, 960xp, 10em or whatever you want. </p>
124 |     </div>
125 | 
126 |     <div class="twelve"><h2>Swapping Places</h2>
127 |       <p>Super useful when you're working with media queries. You can reorder anything. In this example we used: "grid-row: 20;  grid-column: 4 / 7;" to bring 4 column to 2 place. </p>
128 |     </div>
129 | 
130 |     <div class="styling three">1</div>
131 |     <div class="styling three">2</div>
132 |     <div class="styling three">3</div>
133 |     <div id="test" class="styling three">4</div>
134 | 
135 |     <div class="styling two">1</div>
136 |     <div class="styling two">2</div>
137 |     <div class="styling two">3</div>
138 |     <div class="styling two">4</div>
139 |     <div class="styling two">5</div>
140 |     <div id="test1" class="styling two">6</div>
141 | 
142 |     <div class="twelve"><h2>Nested</h2>
143 |       <p>You probably never gonna need nested columns with the CSS Grid, but if you do, use the class .nested and you have 12 columns inside any other column.</p>
144 |     </div>
145 | 
146 |       <div class="styling six nested">
147 |         <div class="styling six">Six</div>
148 |     	 	<div class="styling six">Six</div>
149 | 
150 |       </div>
151 |   	 	<div class="styling six nested">
152 |         <div class="styling four">Four</div>
153 |     	 	<div class="styling four">Four</div>
154 |         <div class="styling four">Four</div>
155 |       </div>
156 | 
157 |       <div class="twelve"><h2>Summary</h2>
158 |         <p>Smart Grid is CSS fluid responsive layout system with 12 columns and it is only 0.5 KB. Clear syntax. No unnecessary div nesting, meaning you will write less HTML. It works in any browser that support <a href="https://caniuse.com/#feat=css-grid"> the CSS Grid</a>.</p>
159 |       </div>
160 | 
161 |       <div class="twelve"><h2>Download</h2>
162 |         <p><a href="https://github.com/vladocar/SMART-CSS-GRID"> Download this project on GitHub</a></p>
163 |       </div>
164 | 
165 | 	</div>
166 | </body></html>
167 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "smart-css-grid",
 3 |   "version": "1.0.0",
 4 |   "description": "Smart CSS Grid is CSS GRID based fluid responsive layout system with 12 columns.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/vladocar/SMART-CSS-GRID.git"
12 |   },
13 |   "keywords": [
14 |     "CSS",
15 |     "CSS-grid",
16 |     "CSS",
17 |     "Framework",
18 |     "CSS",
19 |     "Layout",
20 |     "HTML",
21 |     "Grid",
22 |     "CSS3",
23 |     "Layout"
24 |   ],
25 |   "author": "Vladimir Carrer <vladocar@gmail.com> (http://www.vcarrer.com)",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/vladocar/SMART-CSS-GRID/issues"
29 |   },
30 |   "homepage": "https://github.com/vladocar/SMART-CSS-GRID#readme"
31 | }
32 | 


--------------------------------------------------------------------------------
/smart-grid-logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="100px" height="100px" viewBox="0 0 244.737 247.369" style="enable-background:new 0 0 244.737 247.369;"
 6 | 	 xml:space="preserve">
 7 | <path style="fill:#E01266;" d="M92.158,226.158c0,6.627-5.373,12-12,12h-6c-6.627,0-12-5.373-12-12v-208c0-6.627,5.373-12,12-12h6
 8 | 	c6.627,0,12,5.373,12,12V226.158z"/>
 9 | <path style="fill:#E01266;" d="M182.158,226.158c0,6.627-5.373,12-12,12h-6c-6.627,0-12-5.373-12-12v-208c0-6.627,5.373-12,12-12h6
10 | 	c6.627,0,12,5.373,12,12V226.158z"/>
11 | <path style="fill:#E01266;" d="M226.158,152.158c6.627,0,12,5.373,12,12v6c0,6.627-5.373,12-12,12h-208c-6.627,0-12-5.373-12-12v-6
12 | 	c0-6.627,5.373-12,12-12H226.158z"/>
13 | <path style="fill:#E01266;" d="M226.158,62.158c6.627,0,12,5.373,12,12v6c0,6.627-5.373,12-12,12h-208c-6.627,0-12-5.373-12-12v-6
14 | 	c0-6.627,5.373-12,12-12H226.158z"/>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/smart-grid.css:
--------------------------------------------------------------------------------
 1 | .main {
 2 |     display: grid;
 3 |     grid-gap: 10px;
 4 |     grid-template-columns: repeat(12, 1fr);
 5 |     margin: 0 auto;
 6 |     width: 100%;
 7 |     max-width: 1280px;
 8 | }
 9 | 
10 | .one, .two, .three, .four, .five, .six,
11 | .seven, .eight, .nine, .ten, .eleven, .twelve {
12 |     grid-column-end: span 12;
13 | }
14 | 
15 | .nested {
16 |     display: grid;
17 |     grid-gap: 10px;
18 |     grid-template-columns: repeat(12, 1fr);
19 | }
20 | 
21 | .merge-two-rows { grid-row-end: span 2 }
22 | .merge-three-rows { grid-row-end: span 3 }
23 | .merge-four-rows { grid-row-end: span 4 }
24 | .merge-five-rows { grid-row-end: span 5 }
25 | .merge-six-rows { grid-row-end: span 6 }
26 | 
27 | @media only screen and (min-width: 481px) {
28 |     .one { grid-column-end: span 1 }
29 |     .two { grid-column-end: span 2 }
30 |     .three { grid-column-end: span 3 }
31 |     .four { grid-column-end: span 4 }
32 |     .five { grid-column-end: span 5 }
33 |     .six { grid-column-end: span 6 }
34 |     .seven { grid-column-end: span 7 }
35 |     .eight { grid-column-end: span 8 }
36 |     .nine { grid-column-end: span 9 }
37 |     .ten { grid-column-end: span 10 }
38 |     .eleven { grid-column-end: span 11 }
39 | }
40 | 


--------------------------------------------------------------------------------