ajout de possibilité de créer une grille de 1 colonne
This commit is contained in:
Raphael Goetter
parent
bb68ba9741
commit
fbfef9ea9c
5 changed files with 34 additions and 8 deletions
|
|
@ -1 +1 @@
|
||||||
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-2]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr) [5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr) [6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr) [7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr) [8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr) [9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr) [10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr) [11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr) [12];grid-template-columns:repeat(12,1fr)}[class*=col-2]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=row-2]{-ms-grid-row-span:2;-ms-grid-row:auto;grid-row:auto/span 2}[class*=col-3]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=row-3]{-ms-grid-row-span:3;-ms-grid-row:auto;grid-row:auto/span 3}[class*=col-4]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}[class*=row-4]{-ms-grid-row-span:4;-ms-grid-row:auto;grid-row:auto/span 4}[class*=col-5]{-ms-grid-column-span:5;-ms-grid-column:auto;grid-column:auto/span 5}[class*=row-5]{-ms-grid-row-span:5;-ms-grid-row:auto;grid-row:auto/span 5}[class*=col-6]{-ms-grid-column-span:6;-ms-grid-column:auto;grid-column:auto/span 6}[class*=row-6]{-ms-grid-row-span:6;-ms-grid-row:auto;grid-row:auto/span 6}[class*=col-7]{-ms-grid-column-span:7;-ms-grid-column:auto;grid-column:auto/span 7}[class*=row-7]{-ms-grid-row-span:7;-ms-grid-row:auto;grid-row:auto/span 7}[class*=col-8]{-ms-grid-column-span:8;-ms-grid-column:auto;grid-column:auto/span 8}[class*=row-8]{-ms-grid-row-span:8;-ms-grid-row:auto;grid-row:auto/span 8}[class*=col-9]{-ms-grid-column-span:9;-ms-grid-column:auto;grid-column:auto/span 9}[class*=row-9]{-ms-grid-row-span:9;-ms-grid-row:auto;grid-row:auto/span 9}[class*=col-10]{-ms-grid-column-span:10;-ms-grid-column:auto;grid-column:auto/span 10}[class*=row-10]{-ms-grid-row-span:10;-ms-grid-row:auto;grid-row:auto/span 10}[class*=col-11]{-ms-grid-column-span:11;-ms-grid-column:auto;grid-column:auto/span 11}[class*=row-11]{-ms-grid-row-span:11;-ms-grid-row:auto;grid-row:auto/span 11}[class*=col-12]{-ms-grid-column-span:12;-ms-grid-column:auto;grid-column:auto/span 12}[class*=row-12]{-ms-grid-row-span:12;-ms-grid-row:auto;grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-1]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=grid-2]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr) [5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr) [6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr) [7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr) [8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr) [9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr) [10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr) [11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr) [12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=row-1]{-ms-grid-row-span:1;-ms-grid-row:auto;grid-row:auto/span 1}[class*=col-2]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=row-2]{-ms-grid-row-span:2;-ms-grid-row:auto;grid-row:auto/span 2}[class*=col-3]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=row-3]{-ms-grid-row-span:3;-ms-grid-row:auto;grid-row:auto/span 3}[class*=col-4]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}[class*=row-4]{-ms-grid-row-span:4;-ms-grid-row:auto;grid-row:auto/span 4}[class*=col-5]{-ms-grid-column-span:5;-ms-grid-column:auto;grid-column:auto/span 5}[class*=row-5]{-ms-grid-row-span:5;-ms-grid-row:auto;grid-row:auto/span 5}[class*=col-6]{-ms-grid-column-span:6;-ms-grid-column:auto;grid-column:auto/span 6}[class*=row-6]{-ms-grid-row-span:6;-ms-grid-row:auto;grid-row:auto/span 6}[class*=col-7]{-ms-grid-column-span:7;-ms-grid-column:auto;grid-column:auto/span 7}[class*=row-7]{-ms-grid-row-span:7;-ms-grid-row:auto;grid-row:auto/span 7}[class*=col-8]{-ms-grid-column-span:8;-ms-grid-column:auto;grid-column:auto/span 8}[class*=row-8]{-ms-grid-row-span:8;-ms-grid-row:auto;grid-row:auto/span 8}[class*=col-9]{-ms-grid-column-span:9;-ms-grid-column:auto;grid-column:auto/span 9}[class*=row-9]{-ms-grid-row-span:9;-ms-grid-row:auto;grid-row:auto/span 9}[class*=col-10]{-ms-grid-column-span:10;-ms-grid-column:auto;grid-column:auto/span 10}[class*=row-10]{-ms-grid-row-span:10;-ms-grid-row:auto;grid-row:auto/span 10}[class*=col-11]{-ms-grid-column-span:11;-ms-grid-column:auto;grid-column:auto/span 11}[class*=row-11]{-ms-grid-row-span:11;-ms-grid-row:auto;grid-row:auto/span 11}[class*=col-12]{-ms-grid-column-span:12;-ms-grid-column:auto;grid-column:auto/span 12}[class*=row-12]{-ms-grid-row-span:12;-ms-grid-row:auto;grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
||||||
|
|
@ -40,14 +40,14 @@ $extra-large: 1200px !default;
|
||||||
}
|
}
|
||||||
|
|
||||||
// grid constructor (.grid-2 to .grid-12)
|
// grid constructor (.grid-2 to .grid-12)
|
||||||
@for $i from 2 through 12 {
|
@for $i from 1 through 12 {
|
||||||
[class*="grid-#{$i}"] {
|
[class*="grid-#{$i}"] {
|
||||||
grid-template-columns: repeat(#{$i}, 1fr);
|
grid-template-columns: repeat(#{$i}, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// grid items constructor (.col-2 to .col-12, .row-2 to .row-12)
|
// grid items constructor (.col-1 to .col-12, .row-1 to .row-12)
|
||||||
@for $i from 2 through 12 {
|
@for $i from 1 through 12 {
|
||||||
[class*="col-#{$i}"] {
|
[class*="col-#{$i}"] {
|
||||||
grid-column: auto / span #{$i};
|
grid-column: auto / span #{$i};
|
||||||
}
|
}
|
||||||
|
|
@ -70,6 +70,9 @@ $extra-large: 1200px !default;
|
||||||
grid-column: auto / span #{$i};
|
grid-column: auto / span #{$i};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
[class*="-small-all"] {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// grid order
|
// grid order
|
||||||
|
|
|
||||||
|
|
@ -2552,6 +2552,11 @@ button:focus {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class*="grid-1"] {
|
||||||
|
-ms-grid-columns: (1fr)[1];
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
[class*="grid-2"] {
|
[class*="grid-2"] {
|
||||||
-ms-grid-columns: (1fr)[2];
|
-ms-grid-columns: (1fr)[2];
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
|
@ -2607,6 +2612,18 @@ button:focus {
|
||||||
grid-template-columns: repeat(12, 1fr);
|
grid-template-columns: repeat(12, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class*="col-1"] {
|
||||||
|
-ms-grid-column-span: 1;
|
||||||
|
-ms-grid-column: auto;
|
||||||
|
grid-column: auto/span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="row-1"] {
|
||||||
|
-ms-grid-row-span: 1;
|
||||||
|
-ms-grid-row: auto;
|
||||||
|
grid-row: auto/span 1;
|
||||||
|
}
|
||||||
|
|
||||||
[class*="col-2"] {
|
[class*="col-2"] {
|
||||||
-ms-grid-column-span: 2;
|
-ms-grid-column-span: 2;
|
||||||
-ms-grid-column: auto;
|
-ms-grid-column: auto;
|
||||||
|
|
@ -2777,6 +2794,9 @@ button:focus {
|
||||||
-ms-grid-column: auto;
|
-ms-grid-column: auto;
|
||||||
grid-column: auto/span 4;
|
grid-column: auto/span 4;
|
||||||
}
|
}
|
||||||
|
[class*="-small-all"] {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-first {
|
.item-first {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -29,14 +29,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// grid constructor (.grid-2 to .grid-12)
|
// grid constructor (.grid-2 to .grid-12)
|
||||||
@for $i from 2 through 12 {
|
@for $i from 1 through 12 {
|
||||||
[class*="grid-#{$i}"] {
|
[class*="grid-#{$i}"] {
|
||||||
grid-template-columns: repeat(#{$i}, 1fr);
|
grid-template-columns: repeat(#{$i}, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// grid items constructor (.col-2 to .col-12, .row-2 to .row-12)
|
// grid items constructor (.col-1 to .col-12, .row-1 to .row-12)
|
||||||
@for $i from 2 through 12 {
|
@for $i from 1 through 12 {
|
||||||
[class*="col-#{$i}"] {
|
[class*="col-#{$i}"] {
|
||||||
grid-column: auto / span #{$i};
|
grid-column: auto / span #{$i};
|
||||||
}
|
}
|
||||||
|
|
@ -59,6 +59,9 @@
|
||||||
grid-column: auto / span #{$i};
|
grid-column: auto / span #{$i};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
[class*="-small-all"] {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// grid order
|
// grid order
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue