diff --git a/css/mistica-common.css b/css/mistica-common.css index 132466c187..dd951d7520 100644 --- a/css/mistica-common.css +++ b/css/mistica-common.css @@ -939,6 +939,62 @@ button.mistica-display-card:has(.mistica-card__media):active:after { height: auto; } +/* Grid Layout */ + +.mistica-grid-layout { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 24px; +} + +@media (max-width: 1023px) { + .mistica-grid-layout { + grid-template-columns: minmax(0, 1fr); + } + + .mistica-grid-layout [class^="mistica-col-"] { + grid-column: span 1; + } + + .mistica-col-1 { + display: none; + } +} + +@media (min-width: 1024px) and (max-width: 1367px) { + .mistica-grid-layout { + grid-column-gap: 16px; + } +} + +.mistica-col-1 { + grid-column: span 1; + } + +.mistica-col-3 { + grid-column: span 3; +} + +.mistica-col-4 { + grid-column: span 4; +} + +.mistica-col-5 { + grid-column: span 5; +} + +.mistica-col-6 { + grid-column: span 6; +} + +.mistica-col-8 { + grid-column: span 8; +} + +.mistica-col-9 { + grid-column: span 9; +} + /* Table */ .mistica-table { border-collapse: separate; diff --git a/examples/css/index.html b/examples/css/index.html index eec3a62b35..1d49f1ce5e 100644 --- a/examples/css/index.html +++ b/examples/css/index.html @@ -601,8 +601,107 @@

Title

+ +

Grid Layout

+

6 + 6

+
+
+
+ + + +
+
+
+
+ + + +
+
+
+

5 + 4

+
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+

4 + 6

+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+

8 + 4

+
+
+
+ + + +
+
+
+
+ + + +
+
+
+

3 + 9

+
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + + + + + +