.grid alias to .autogrid

This commit is contained in:
Raphael Goetter 2017-12-04 15:48:16 +01:00
parent 7bc7e0fb42
commit 54f95cab40
3 changed files with 11 additions and 6 deletions

View File

@ -1698,18 +1698,22 @@ ul.is-unstyled, ul.unstyled {
/* recommanded HTML : <div class="autogrid">... some elements ...</div> */ /* recommanded HTML : <div class="autogrid">... some elements ...</div> */
/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */ /* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
@media (min-width: 480px) { @media (min-width: 480px) {
.autogrid { .autogrid,
.grid {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
grid-auto-column: 1fr; grid-auto-column: 1fr;
} }
.autogrid.has-gutter { .autogrid.has-gutter,
.grid.has-gutter {
grid-column-gap: 1rem; grid-column-gap: 1rem;
} }
.autogrid.has-gutter-l { .autogrid.has-gutter-l,
.grid.has-gutter-l {
grid-column-gap: 2rem; grid-column-gap: 2rem;
} }
.autogrid.has-gutter-xl { .autogrid.has-gutter-xl,
.grid.has-gutter-xl {
grid-column-gap: 4rem; grid-column-gap: 4rem;
} }
} }

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,8 @@
/* recommanded HTML : <div class="autogrid">... some elements ...</div> */ /* recommanded HTML : <div class="autogrid">... some elements ...</div> */
/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */ /* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
.autogrid { .autogrid,
.grid {
@media (min-width: $tiny) { @media (min-width: $tiny) {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;