marctrix: Grid im Self-Wiki

Beitrag lesen

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

0 137

Flexbox Grid

Sophie
  • css
  • html
  1. 1
    Gunnar Bittersmann
    1. 0
      Sophie
      1. 0
        Gunnar Bittersmann
        1. 0
          Sophie
          1. 0
            Gunnar Bittersmann
            1. 0
              Gunnar Bittersmann
  2. 0
    at
    1. 0
      Gunnar Bittersmann
      1. 0
        at
        1. 0
          Gunnar Bittersmann
          1. 1
            at
            1. 0
              Gunnar Bittersmann
              1. 1
                at
                1. 0
                  Gunnar Bittersmann
                  1. 1
                    at
                    1. 1
                      Gunnar Bittersmann
                      1. -1
                        at
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Gunnar Bittersmann
                            1. 0
                              at
                            2. 0
                              Mitlesender Dummer
                              1. 0
                                Gunnar Bittersmann
                                1. 2
                                  Mitlesender Dummer
                                  1. 0
                                    marctrix
                                  2. 0
                                    Gunnar Bittersmann
                              2. 0
                                TS
                                1. 1
                                  Rolf ẞ
                                  1. 0
                                    TS
                                    1. 1
                                      Matthias Scharwies
                                      1. 1
                                        Mitlesender Dummer
                                        1. 0
                                          Gunnar Bittersmann
                                        2. 2

                                          Grid Layout im Wiki

                                          Matthias Scharwies
                                        3. 4

                                          Grid im Self-Wiki

                                          Matthias Scharwies
                                          • css
                                          • grid
                                          • html
                                          1. 1
                                            marctrix
                                            1. 1
                                              Gunnar Bittersmann
                                              • css
                                              • grid
                                              1. 0
                                                marctrix
                                                1. 0
                                                  marctrix
                                                  1. 1
                                                    Gunnar Bittersmann
                                                    1. 0
                                                      marctrix
                                                  2. 0
                                                    marctrix
                                                2. 0
                                                  Gunnar Bittersmann
                                                  1. 1
                                                    JürgenB
                                                    1. 0
                                                      marctrix
                                                      1. 0
                                                        Gunnar Bittersmann
                                                        • html
                                                        1. 0
                                                          marctrix
                                                    2. 0
                                                      Gunnar Bittersmann
                                                  2. 0
                                                    marctrix
                                                    1. 0
                                                      Gunnar Bittersmann
                                                      1. 0
                                                        marctrix
                                                        1. 0
                                                          Gunnar Bittersmann
                                                          1. 0
                                                            marctrix
                                                      2. 0
                                                        Gunnar Bittersmann
                                                        1. 0
                                                          marctrix
                                                          1. 0
                                                            Gunnar Bittersmann
                                                            1. 0
                                                              marctrix
                                                              1. 0
                                                                Gunnar Bittersmann
                                                                1. 0
                                                                  marctrix
                                                                  1. 0
                                                                    Gunnar Bittersmann
                                                                    1. 0
                                                                      marctrix
                                            2. 0
                                              Matthias Scharwies
                                              1. 0
                                                Julius
                                                • browser
                                                • microsoft
                                                1. 0
                                                  Matthias Scharwies
                                                  1. 0
                                                    Auge
                                                    1. 0
                                                      Sophie
                                                      1. 0
                                                        Auge
                                              2. 0
                                                marctrix
                                                1. 0
                                                  Christian Kruse
                                                  1. 0
                                                    marctrix
                                                    1. 0
                                                      Christian Kruse
                                                  2. 0
                                                    Gunnar Bittersmann
                                                  3. 0
                                                    Gunnar Bittersmann
                                                  4. 2
                                                    MudGuard
                                                2. 0
                                                  marctrix
                                                  1. 0
                                                    Gunnar Bittersmann
                                                3. 0
                                                  Gunnar Bittersmann
                                                  1. 0
                                                    marctrix
                                                    1. 1
                                                      MudGuard
                                    2. 2
                                      Rolf ẞ
                                      • css
                                      • html
                                      • humor
                                      1. 0
                                        TS
                                        • css
                                        • html
                                        1. 0
                                          Rolf ẞ
                                          1. 0
                                            Tabellenkalk
                                      2. 0
                                        marctrix
                            3. 0
                              Sophie
                              1. 0
                                Julius
                          2. 0
                            at
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                at
                                1. 0
                                  Gunnar Bittersmann
                                  1. 0
                                    at
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 1
                                        at
                                        1. 1
                                          Gunnar Bittersmann
                                          1. 0
                                            at
                                            1. 0
                                              Sophie
                            2. 0
                              marctrix
                              1. 1
                                at
                                1. 0
                                  marctrix
                                  1. 0
                                    at
                                  2. 0
                                    Gunnar Bittersmann
                                    • zu diesem forum
                                    1. 0
                                      marctrix
                                      1. 3
                                        at
                                        1. 0
                                          marctrix
                                          1. 2
                                            Christian Kruse
                                            1. 0
                                              marctrix
                                              1. 0
                                                Christian Kruse
                                                1. 1
                                                  marctrix
                                                  1. 0
                                                    Gunnar Bittersmann
                                                    1. 1
                                                      marctrix
                                                      1. 3
                                                        Gunnar Bittersmann
                                                        1. 0
                                                          marctrix
                                                2. 0
                                                  marctrix
                                                  1. 0
                                                    at
                                                    1. 0
                                                      marctrix
                                                      1. 0
                                                        at
                                                        1. 0
                                                          marctrix
                                                    2. 0
                                                      Gunnar Bittersmann
                                                      1. 1
                                                        Gunnar Bittersmann
                                                        1. 0
                                                          JürgenB
                                                          1. 0
                                                            marctrix
                                                      2. 0
                                                        at
                                                        1. 1
                                                          Gunnar Bittersmann
                2. 0
                  marctrix
                  1. 0
                    at
                    1. 0
                      marctrix
                      1. 0
                        at
                        1. 0
                          marctrix
                          1. 0
                            at
                            1. 0
                              marctrix
                              1. 2
                                Christian Kruse
                                1. 0
                                  marctrix
                                  1. 0
                                    at
                                2. 0
                                  Pronnewoppen
                                  • meinung
                                  1. 0
                                    marctrix
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        Matthias Apsel
                                        • menschelei
                                      2. 1
                                        marctrix