Added a grid-group component.

This commit is contained in:
Fredrik Jonsson 2023-01-25 15:13:51 +01:00
commit 717396e7e7
2 changed files with 49 additions and 0 deletions

View file

@ -0,0 +1,48 @@
.grid-group,
%grid-group {
--column-min: 250px;
$gap: 1;
@include gap($gap);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--column-min), 1fr));
&--fit {
grid-template-columns: repeat(auto-fit, minmax(var(--column-min), 1fr));
}
&--100 {
--column-min: 100px;
}
&--150 {
--column-min: 150px;
}
&--200 {
--column-min: 200px;
}
&--250 {
--column-min: 250px;
}
&--300 {
--column-min: 300px;
}
&--350 {
--column-min: 350px;
}
&--400 {
--column-min: 400px;
}
&--500 {
--column-min: 500px;
}
&--600 {
--column-min: 600px;
}
}

View file

@ -36,6 +36,7 @@
@import 'components/disabled/disabled';
@import 'components/flex-group/flex-group';
@import 'components/flex-inline/flex-inline';
@import 'components/grid-group/grid-group';
@import 'components/header/header';
@import 'components/hidden/hidden';
@import 'components/highlight-mark/highlight-mark';