Hej Gunnar,
Ich bin total genervt davon, dass es nirgends Beispiele gibt, die auch im IE/Edge bis Version 15 funktionieren.
Ich hab mal die
-ms-
-Dingens zu einem Beispiel hinzugefügt.
Da ich bei deinen Beispielen schon öfters nach Lösungen gesucht habe: danke dafür!
Da hast du dir aber (absichtlich?) das einfachste herausgesucht. 😉
Das scheint mir oft mit einem erheblichen Mehraufwand verbunden zu sein, was Aussagen wie "geht mit 5 Zeilen Code" ad absurdum führt.
Was man wohl auch tun muss: Den Items die Zeile per
-ms-grid-row
zuweisen; das geschieht bei IE/Edge noch nicht automatisch.
Und per -ms-grid-column
der Spalte.
Das kann sehr aufwändig werden und ist einer der Hauptgründe für mich CSS-Grid noch nicht verwendet zu haben (produktiv zumindest, zum Üben schon).
Was ich an Grid erst mal toll finde ist zum Beispiel eine (Bilder-) Galerie mit drei Zeilen Code zu erstellen — like so:
ul {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
Soll es aber im IE/Edge funktionieren müsste das Folgende daraus werden (und das wäre nicht mal responsiv - man müsste also mittels @media
den Code mehrfach für unterschiedliche Bildschirmgrößen schreiben - völlig inakzeptabel für mich), wenn ich nicht was wesentliches übersehen habe (anyone?) - online Beispiel für diese CSS-Grid-Übung
ul {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
-ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
display: grid;
grid-gap: 1em;
padding: 1em;
white-space: nowrap;
list-style: none;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
ul li {
box-shadow: 0px 0px 4px 5px #ddd098 inset;
text-align: center;
}
ul li {
box-shadow: 0px 0px 4px 5px #ddd098 inset;
text-align: center;
}
ul li:nth-child(-n+35) {
-ms-grid-row: 7;
}
ul li:nth-child(-n+30) {
-ms-grid-row: 6;
}
ul li:nth-child(-n+25) {
-ms-grid-row: 5;
}
ul li:nth-child(-n+20) {
-ms-grid-row: 4;
}
ul li:nth-child(-n+15) {
-ms-grid-row: 3;
}
ul li:nth-child(-n+10) {
-ms-grid-row: 2;
}
ul li:nth-child(-n+5) {
-ms-grid-row: 1;
}
ul li:nth-child(1),
ul li:nth-child(6),
ul li:nth-child(11),
ul li:nth-child(16),
ul li:nth-child(21),
ul li:nth-child(26),
ul li:nth-child(31) {
-ms-grid-column: 1;
}
ul li:nth-child(2),
ul li:nth-child(7),
ul li:nth-child(12),
ul li:nth-child(17),
ul li:nth-child(22),
ul li:nth-child(27),
ul li:nth-child(32) {
-ms-grid-column: 2;
}
ul li:nth-child(3),
ul li:nth-child(8),
ul li:nth-child(13),
ul li:nth-child(18),
ul li:nth-child(23),
ul li:nth-child(28),
ul li:nth-child(33) {
-ms-grid-column: 3;
}
ul li:nth-child(4),
ul li:nth-child(9),
ul li:nth-child(14),
ul li:nth-child(19),
ul li:nth-child(24),
ul li:nth-child(29),
ul li:nth-child(34) {
-ms-grid-column: 4;
}
ul li:nth-child(5),
ul li:nth-child(10),
ul li:nth-child(15),
ul li:nth-child(20),
ul li:nth-child(25),
ul li:nth-child(30),
ul li:nth-child(35) {
-ms-grid-column: 5;
}
Marc