More grid work

This commit is contained in:
Jeremy Thomas
2018-02-13 09:38:04 +00:00
parent 6d9005ad2a
commit fddb98d732
5 changed files with 58 additions and 13 deletions

View File

@@ -1,10 +1,18 @@
.grid-container
box-shadow: 0 0 0 1px $grey
margin: 0 auto
max-width: 1000px
padding: 0 !important
.grid
--gridGap: 0.75rem
--gridGap: 0
--gridColumnGap: var(--gridGap)
--gridRowGap: var(--gridGap)
+block
display: grid
grid-column-gap: 0.75rem
grid-column-gap: 1px
grid-row-gap: 0.75rem
grid-row-gap: 1px
grid-column-gap: var(--gridColumnGap)
grid-row-gap: var(--gridRowGap)
$var: #{"1fr"}
@for $i from 1 through 5
&.has-#{$i + 1}-columns
@@ -18,6 +26,8 @@
padding: 1rem
@for $i from 1 through 6
&.is-#{$i}-tall
grid-row: span $i
&.is-#{$i}-wide
grid-column: span $i