diff --git a/assets/sass/components/center/_center.scss b/assets/sass/components/center/_center.scss new file mode 100644 index 0000000..dfd8243 --- /dev/null +++ b/assets/sass/components/center/_center.scss @@ -0,0 +1,12 @@ +.grid-center { + display: grid; + place-items: center; +} + +.text-center { + text-align: center; +} + +.margin-center { + margin-inline: auto; +} diff --git a/assets/sass/components/grid-group/_grid-group.scss b/assets/sass/components/grid-group/_grid-group.scss index fa3abc6..5e63b41 100644 --- a/assets/sass/components/grid-group/_grid-group.scss +++ b/assets/sass/components/grid-group/_grid-group.scss @@ -5,10 +5,11 @@ display: grid; gap: var(--gap); - grid-template-columns: repeat(auto-fit, minmax(var(--column-min), 1fr)); + // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". + grid-template-columns: repeat(auto-fit, minmax(Min(var(--column-min), 100%), 1fr)); &--fill { - grid-template-columns: repeat(auto-fill, minmax(var(--column-min), 1fr)); + grid-template-columns: repeat(auto-fill, minmax(Min(var(--column-min), 100%), 1fr)); } &--100 { diff --git a/assets/sass/components/grid-stack/_grid-stack.scss b/assets/sass/components/grid-stack/_grid-stack.scss new file mode 100644 index 0000000..d949251 --- /dev/null +++ b/assets/sass/components/grid-stack/_grid-stack.scss @@ -0,0 +1,9 @@ +.grid-stack, +%grid-stack { + display: grid; + + & > * { + grid-column: 1 / 2; + grid-row: 1 / 2; + } +} diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index dda7e2d..92ddd0a 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -30,6 +30,7 @@ @import 'components/box/box'; @import 'components/button/button'; @import 'components/cards/cards'; +@import 'components/center/center'; @import 'components/clearfix/clearfix'; @import 'components/cookieconsent/cookieconsent'; @import 'components/divider/divider'; @@ -37,6 +38,7 @@ @import 'components/flex-group/flex-group'; @import 'components/flex-inline/flex-inline'; @import 'components/grid-group/grid-group'; +@import 'components/grid-stack/grid-stack'; @import 'components/header/header'; @import 'components/hidden/hidden'; @import 'components/highlight-mark/highlight-mark';