:root{
--grid-1: repeat(1, minmax(0, 1fr));
--grid-2: repeat(2, minmax(0, 1fr));
--grid-3: repeat(3, minmax(0, 1fr));
--grid-4: repeat(4, minmax(0, 1fr));
--grid-5: repeat(5, minmax(0, 1fr));
--grid-6: repeat(6, minmax(0, 1fr));
--grid-7: repeat(7, minmax(0, 1fr));
--grid-8: repeat(8, minmax(0, 1fr));
--grid-9: repeat(9, minmax(0, 1fr));
--grid-10: repeat(10, minmax(0, 1fr));
--grid-11: repeat(11, minmax(0, 1fr));
--grid-12: repeat(12, minmax(0, 1fr));
--grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
--grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
--grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
--grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
--grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
--grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
} .masonry-2,
.masonry-3 {
column-gap: 1em;
}
.masonry-2 > *,
.masonry-3 > * {
display: inline-block;
break-inside: avoid;
box-sizing: border-box;
width: 100%;
margin-bottom: 1em;
} .grid-2,
.grid-2-fixed,
.grid-3,
.grid-3-fixed,
.grid-4,
.grid-4-fixed,
.grid-5,
.grid-6,
.grid-n, .grid-2-on-mobile, .grid-1-2, .grid-1-3, .grid-2-1, .grid-2-3, .grid-3-1, .grid-3-2 {
--grid-gap: 1rem;
display: grid;
align-content: stretch;
justify-content: space-evenly;
align-items: stretch;
justify-items: stretch;
row-gap: var(--grid-gap);
column-gap: var(--grid-gap);
}
.grid-2,
.grid-2-fixed {
grid-template-columns: var(--grid-2);
}
.grid-3,
.grid-3-fixed {
grid-template-columns: var(--grid-3);
}
.grid-4,
.grid-4-fixed {
grid-template-columns: var(--grid-4);
}
.grid-5, .grid-5-fixed {
grid-template-columns: var(--grid-5);
}
.grid-6, .grid-6-fixed {
grid-template-columns: var(--grid-6);
}
.grid-n {
grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
}
.grid-1-2 {
grid-template-columns: var(--grid-1-2);
}
.grid-1-3 {
grid-template-columns: var(--grid-1-3);
}
.grid-2-1 {
grid-template-columns: var(--grid-2-1);
}
.grid-2-3 {
grid-template-columns: var(--grid-2-3);
}
.grid-3-1 {
grid-template-columns: var(--grid-3-1);
}
.grid-3-2 {
grid-template-columns: var(--grid-3-2);
}
@media (max-width: 768px) {
.masonry-2-on-mobile {
column-count: 2;
}
.grid-2,
.grid-3,
.grid-4, .grid-1-2, .grid-1-3, .grid-2-1, .grid-2-3, .grid-3-1, .grid-3-2 {
grid-template-columns: var(--grid-1);
}
.grid-5,
.grid-6,
.grid-2-on-mobile {
grid-template-columns: var(--grid-2);
}
.grid-3-on-mobile{
grid-template-columns: var(--grid-3);
}
}
@media (min-width: 768px) {
.masonry-2 {
column-count: 2;
}
.masonry-3 {
column-count: 2;
}
.two-column {
column-count: 2;
column-gap: 2.5rem;
}
.three-column {
column-count: 3;
column-gap: 2.5rem;
}
}
@media (min-width: 1366px) {
.masonry-3 {
column-count: 3;
}
}