add first proposal #23
This commit is contained in:
30
src/scss/cdb-components/grid.scss
Normal file
30
src/scss/cdb-components/grid.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
// Grid layout
|
||||
// ----------------------------------------------
|
||||
|
||||
/* SG
|
||||
# Grid/gaps
|
||||
|
||||
```
|
||||
<div class="Grid">
|
||||
<div class="CDB-Width-1" style="background: green; height: 100px;"> </div>
|
||||
<div class="CDB-Width-2" style="background: orange"> </div>
|
||||
<div class="CDB-Width-3" style="background: red"> </div>
|
||||
<div class="CDB-Width-20" style="background: blue"> </div>
|
||||
</div>
|
||||
<div class="CDB-Col12" style="margin: 20px 0; background: blue"> </div>
|
||||
```
|
||||
*/
|
||||
|
||||
@import '../cdb-variables/sizes';
|
||||
|
||||
.Grid {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@for $i from 1 through 180 {
|
||||
.CDB-Col#{$baseSize * $i} {
|
||||
width: $baseSize * $i;
|
||||
flex: 0 0 $baseSize * $i;
|
||||
max-width: $baseSize * $i;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user