feat: add CardGrid and add style to StayCard

This commit is contained in:
Christel Westerberg
2024-05-10 15:07:24 +02:00
parent 0a862ca770
commit d2eb2a3077
15 changed files with 176 additions and 106 deletions

View File

@@ -0,0 +1,53 @@
.gridContainer {
display: grid;
gap: 1.6rem;
}
.carousel {
display: grid;
grid-auto-columns: 80dvw;
grid-auto-flow: column;
gap: 1.6rem;
margin-left: -1.6rem;
margin-right: -1.6rem;
padding-left: 1.6rem;
overflow-x: scroll;
scroll-padding-left: 1.6rem;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* Hide scrollbar IE and Edge */
-ms-overflow-style: none;
/* Hide Scrollbar Firefox */
}
.carousel:last-child {
margin-right: 1.6rem;
}
.carousel > * {
scroll-snap-align: start;
}
/* Hide Scrollbar Chrome, Safari and Opera */
.gridContainer::-webkit-scrollbar {
display: none;
}
@media screen and (min-width: 950px) {
.twoColumnGrid {
grid-template-columns: repeat(2, 1fr);
}
.treeColumnGrid {
grid-template-columns: repeat(3, minmax(30rem, 1fr));
}
.carousel {
grid-auto-flow: unset;
margin: 0;
padding: 0;
}
}