CSS Grid in IE: Eine automatische Platzierung mit Lücken simulieren

Dies ist der dritte und letzte Teil einer dreiteiligen Serie über die sichere Verwendung von CSS Grid im Internet Explorer 11 (IE11), ohne verrückt zu werden.

In Teil 1 habe ich einige der gängigen Missverständnisse über die native CSS-Grid-Implementierung von IE11 behandelt. In Teil 2 habe ich gezeigt, wie einfach es tatsächlich ist, IE-freundlichen CSS-Grid-Code zu schreiben.

Heute trete ich kurz vom CSS Grid zurück, um Ihnen eine Flexbox-Technik zu zeigen, die die grundlegende Funktionalität der automatischen Platzierung von CSS Grid nachbildet. Diese CSS-Grid-Replik wird sogar so aussehen, als wären grid-gap angewendet worden. Ich muss jedoch sehr klar sein: Hier geht es nicht darum, wie die tatsächliche automatische Platzierung von CSS Grid in IE funktioniert.

So erstellen Sie ein Dummy-Grid mit Zelllücken

Schritt 1: HTML

Ich werde diesen einfachen HTML-Code als Beispiel verwenden

<div class="grid-wrapper">




<div class="grid">



<div class="grid-cell"></div>






<div class="grid-cell"></div>






<div class="grid-cell"></div>






<div class="grid-cell"></div>






<div class="grid-cell"></div>






<div class="grid-cell"></div>



</div>



  
</div>

Schritt 2: Border-box Box-Sizing

Das Erste, was wir im CSS tun müssen, ist sicherzustellen, dass alle Boxen anhand von border-box und nicht content-box dimensioniert werden. Der beste Weg, dies zu tun, ist die Vererbungstechnik box-sizing: border-box

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

Dies wird global angewendet. Wenn Sie an einem bestehenden Projekt arbeiten, bei dem box-sizing nicht auf border-box gesetzt ist, ändern Sie html im Snippet zu einem Selektor, der das Element auswählt, das Sie in ein Grid umwandeln möchten.

Schritt 3: Flexbox

Als Nächstes müssen Sie einige Flexbox-Einstellungen aktivieren

.grid {
  /* Forces equal cell heights */
  display: flex;
  flex-wrap: wrap;
}

Schritt 4: Breiten

Nun richten Sie Ihre Spaltenbreiten ein. Wir erstellen ein einfaches Drei-Spalten-Grid

.grid-cell {
  /* Sets column count */
  width: calc(100% / 3); /* calc() method */
  width: 33.33%; /* percentage method */
}

Die calc()-Methode ermöglicht es, die Spaltenbreiten etwas einfacher zu ändern. Sie geben die gewünschte Anzahl von Spalten an und der Browser erledigt die Berechnung für Sie. Dies ist besonders nützlich, wenn Sie eine größere Anzahl von Spalten benötigen, z. B. 7 oder 8. Die Browserunterstützung für calc() ist gut, aber nicht so stark wie bei einem reinen Prozentwert, der seit Anbeginn von CSS von Browsern unterstützt wird.

Die Prozentmethode hat eine etwas bessere Browserunterstützung und kann in IE stabiler sein. Wenn Sie Opera Mini nicht unterstützen müssen, empfehle ich dennoch, zuerst die calc()-Methode zu verwenden. Testen Sie in IE und wenn das Layout fehlschlägt, versuchen Sie zuerst, 99.999% anstelle von 100% in der Calc-Funktion zu verwenden (calc(99.999% / 3)). Wenn das nicht funktioniert, wechseln Sie zur Prozentmethode. Ich werde die calc()-Methode in all meinen Beispielen verwenden. Beachten Sie, dass Sie, wenn Sie einen CSS-Präprozessor wie SCSS verwenden, das Beste aus beiden Welten haben können, indem Sie den Präprozessor die Berechnungen für Sie durchführen lassen. Dies geht jedoch auf Kosten einer weniger einfachen Bearbeitung oder Überprüfung der Spaltenanzahl in den Browser-Entwicklertools.

/* Set column count using SCSS */
.grid-cell {
  width: (100% / 3);
}

/* CSS output into the browser */
.grid-cell {
  width: 33.3333333333%;
}

Geben wir den Grid-Zellen eine Höhe und einen inneren box-shadow, damit wir sehen können, was vor sich geht. Ich füge keine Umrandung hinzu – die werde ich später verwenden. 😉

.grid-cell {
  /* So that we can see the grid cells */
  box-shadow: inset 0 0 0 1px #000;
  height: 100px;
}

.grid-wrapper {
  /* Allows us to see the edges of the grid */
  box-shadow: 0 0 10px 2px green;
}

Sie sollten jetzt etwas haben, das so aussieht

Das ist aber langweilig, oder? Jeder weiß, wie das geht. Wo sind diese Grid-Lücken, von denen ich spreche? Ich will meine Lücken!!!

Schritt 5: Rand

Hier kommen wir zum interessanten Teil. Da wir box-sizing auf border-box gesetzt haben, beinhaltet die 33,33% Breite jetzt den Rand. Das bedeutet, wir können sicher feste und prozentuale Einheiten mischen! 😃

.grid {
  /* Creates an equal outer gap */
  padding: 20px 0 0 20px;
}

.grid-cell {
  /* Creates gaps */
  border: 0 solid transparent;
  border-width: 0 20px 20px 0;
}

Dies ergibt etwas, das wie ein Grid mit gleichmäßigen Abständen überall aussieht

Um Ihnen eine bessere Vorstellung davon zu geben, was passiert, sehen Sie sich das folgende Bild an

Der blaue Bereich oben und links im Grid ist der Innenabstand (Padding) des .grid-Elements. Die gelben Umrisse zeigen den Bereich, den jedes .grid-cell-Element einnimmt. Die roten Bereiche unten und rechts jeder Zelle sind der Rand jedes .grid-cell-Elements.

Das könnte das gewünschte Aussehen sein. Auf der anderen Seite ist das nicht das Aussehen eines Grids mit einer grid-gap-Einstellung. Deshalb haben wir noch einen Schritt.

Schritt 6: Margin und Overflow

Um das Grid bündig mit den Rändern seines Containers abschließen zu lassen, benötigen wir etwas Hilfe von negativen Rändern und overflow: hidden

.grid {
  /* Pulls grid cells hard against edges */
  margin: -20px;
}

.grid-wrapper {
  /* Prevents odd margin behavior */
  overflow: hidden;
}

Wir müssen overflow: hidden anwenden, um zu verhindern, dass dies geschieht

Die Anwendung des negativen Rands und overflow: hidden bringt uns zu dieser schönen Nachbildung der grundlegenden grid-gap-Funktionalität

Der obere und linke Innenabstand (Padding) des Grids ist optional. Sie können den Innenabstand weglassen und stattdessen den Randwert wie unten gezeigt ändern, wenn Sie möchten

.grid {
  /* Margin needs to be this if leaving off the top and left .grid padding */
  margin: 0 -20px -20px 0;
}

Aber warten Sie! Die Arbeit ist noch nicht ganz erledigt. Sehen Sie, was passiert, wenn wir einer der Grid-Zellen eine Hintergrundfarbe geben

Nicht ganz das, was wir wollen, also gibt es noch einen Schritt.

Schritt 7: background-clip

Damit der Hintergrund der Grid-Zellen nicht in unsere simulierte grid-gap fließt, müssen wir background-clip: padding-box hinzufügen.

.grid-cell {
  /* Prevents background bleed */
  background-clip: padding-box;
}

Jetzt haben wir das

Wenn Sie noch nie von der background-clip-Eigenschaft gehört haben, machen Sie sich vielleicht Sorgen um die Browserunterstützung… nun, machen Sie sich keine Sorgen. background-clip gibt es seit IE9!

Schritt 8: Media Queries!

In den meisten Fällen müssen sich Grids beim Wachsen und Schrumpfen ändern können, um die Anzahl der Spalten anzupassen. Mit anderen Methoden kann das eine enorme Plage sein. Sie müssen möglicherweise viele nth-childs berechnen, um den richtigen Rand zu entfernen oder was auch immer. Mit dieser Methode müssen Sie nur einen einzigen Wert ändern! 😃

.grid-cell {
  /* Sets the default column count */
  width: calc(100% / 1); /* 1 column */
}

@media (min-width: 400px){
  .grid-cell {
    width: calc(100% / 2); /* 2 columns */
  }
}

@media (min-width: 600px){
  .grid-cell {
    width: calc(100% / 3); /* 3 columns */
  }
}

Hier ist, wie es aussieht, wenn wir alles zusammenfügen

Siehe den Pen Fake grid von Daniel Tonon (@daniel-tonon) auf CodePen.

Keiner hat Zeit dafür!

Das ist viel Arbeit im Vergleich zu dem, was modernes Grid in nur drei Zeilen CSS leisten kann! Um die Aufgabe zu erleichtern, habe ich einen SCSS-basierten Mixin erstellt, den ich Gutter Grid nenne. Sobald Gutter Grid im Projekt installiert ist, können Sie schnell ein Drei-Spalten-Grid mit 20-Pixel-Lücken mit dem folgenden SCSS-Code erstellen

.grid-wrapper {
  overflow: hidden; /* Need this for the chrome bug */
}

.grid {
  @include grid($cols: 3, $gutter: 20px);
}

Sie können es auch noch kürzer schreiben, wenn das zu ausführlich erscheint

.grid-wrapper {
  overflow: hidden;
}

.grid {
  @include grid(3, 20px);
}

Gutter Grid wird mit einigen vorgefertigten Breakpoint-Sets geliefert, sodass Sie möglicherweise gar keine Breakpoints schreiben müssen, wenn Ihr Grid die gesamte Seite überspannt! Wenn Sie jedoch benutzerdefinierte Breakpoints benötigen, können Sie diese mit Gutter Grid einfach wie folgt anpassen

// Verbose custom breakpoints
@include grid($cols: 7, $gutter: 20px, $breakpoints: (
  4 : 960px, // At 960px or below, there will be 4 columns
  2 : (max, 600px), // You can use mq-scss syntax here as well
  1 : 480px,
));

// Short version  
@include grid(7, 20px, (
  4 : 960px,
  2 : 600px,
  1 : 480px,
));

Wie Sie vielleicht im Beispiel bemerkt haben, unterstützt Gutter Grid auch die gleiche Media-Query-Syntax, die dieses Ding namens mq-scss verwendet. Wenn Sie sich fragen, was das ist, nun, es ist ein Sass-Mixin, das ich erstellt habe und das das Schreiben und Verwalten von Media Queries um das Millionenfache erleichtert. Die Verwendung von mq-scss-Anweisungen zur Steuerung der Spaltenanzahl ermöglicht eine sehr feine Kontrolle darüber, wann sich die Spaltenanzahl ändert.

Hinzufügen von Schatten zu den Grid-Zellen

Da wir uns jetzt mit Schatten beschäftigen, nehme ich den Box-Schatten aus dem Beispielbild heraus. Unser Start-Grid sieht jetzt so aus

Wenn wir versuchen, jeder Grid-Zelle einen äußeren box-shadow hinzuzufügen, sieht das nicht so gut aus

Lassen Sie uns das beheben.

Schritt 1: Neuer HTML

Um schöne Schatten zu erstellen, müssen wir jeder Grid-Zelle ein zusätzliches Div hinzufügen. Sie können nicht wirklich ::before oder ::after dafür verwenden, da diese keine HTML-Inhalte enthalten können.

<div class="grid-wrapper">



<div class="grid">




<div class="grid-cell">



<div class="grid-cell-inner"></div>



</div>







<div class="grid-cell">



<div class="grid-cell-inner"></div>



</div>







<div class="grid-cell">



<div class="grid-cell-inner"></div>



</div>







<div class="grid-cell">



<div class="grid-cell-inner"></div>



</div>







<div class="grid-cell">



<div class="grid-cell-inner"></div>



</div>







<div class="grid-cell">



<div class="grid-cell-inner"></div>



</div>




</div>



</div>

Schritt 2: Flexbox

Nun müssen wir jede Grid-Zelle zu einem Flex-Container machen. Dies ermöglicht es dem inneren Teil der Grid-Zelle, die volle Höhe ihres Elternelements einzunehmen. Wir müssen auch dem inneren Element eine Breite von 100% geben. Dies stellt sicher, dass es die vollen Abmessungen seines Elternelements sowohl horizontal als auch vertikal einnimmt.

.grid-cell {
  /* Forces inner to take up full grid cell height */
  display: flex;
}

.grid-cell-inner {
  /* Forces inner to take up full grid cell width */
  width: 100%;
}

Sehen wir uns an, was passiert, wenn wir versuchen, Box-Schatten zu den inneren Elementen hinzuzufügen

.grid-cell-inner {
  box-shadow: 0 0 10px 3px blue;
}

Das ist schon viel besser, aber es ist noch nicht ganz perfekt. Der versteckte Überlauf, den wir verwenden, um den Chrome-Bug zu verhindern, stört.

Schritt 3: Hacky Padding

Wir müssen also Overflow zulassen, aber trotzdem dieses seltsame Margin-Verhalten vermeiden. Der einzige andere sichere Weg, den ich gefunden habe, ist mit Padding. Indem wir dem äußeren Grid-Wrapper-Element oben und unten 1px Padding hinzufügen, wird der Chrome-Bug behoben.

.grid-wrapper {
  /* Prevents odd margin behaviour in Chrome */
  padding: 1px 0;
}

Dies geht auf Kosten von zusätzlichen 1 Pixel Platz oben und unten im Grid. Das Bild unten zeigt, wie das aussieht. Die Schatten wurden aufgehellt, um die 1-Pixel-Lücke deutlicher zu zeigen.

Hinweis: Sie können den 1-Pixel-Top-Padding vermeiden, indem Sie den oberen Padding-Wert für die Lücke auf dem Grid-Element weglassen. Der 1-Pixel-Bottom-Padding kann jedoch nicht vermieden werden.

Eine Randbreite, die auf den äußeren Grid-Wrapper angewendet wird, funktioniert ebenfalls. Technisch gesehen musste ich dem obigen Beispiel kein Padding hinzufügen. Meistens, wenn wir Schatten auf Grid-Zellen anwenden, wollen wir wahrscheinlich keinen Rand darum sehen. Das obige Beispiel zeigte eher, wie gering das Padding ist.

Update: Sie können das seltsame Margin-Verhalten vollständig vermeiden, indem Sie 0,1 Pixel Padding anstelle von 1 Pixel verwenden. Dies wird im Browser auf 0px gerundet, verhindert aber dennoch das seltsame Margin-Verhalten. Das bedeutet, dass die Kanten des Grids bündig mit den Kanten seines Containers abschließen können, während überlaufende Inhalte weiterhin sichtbar sind! Vielen Dank an Lu Nelson für seinen Vorschlag in den Kommentaren! 😁

So sieht das Grid ohne den äußeren Rand aus

Hier ist ein Pen, der das Endergebnis zeigt

Siehe den Pen Fake grid with shadows von Daniel Tonon (@daniel-tonon) auf CodePen.

Gutter Grid Schatten

Lassen Sie uns besprechen, wie man Schatten auf Gutter Grid-Zellen hinzufügt. Sie können dieselbe HTML-Struktur wie im vorherigen Beispiel verwenden.

Wenden Sie nun diese SCSS an, um ein Drei-Spalten-Grid mit einer 20-Pixel-Spalte zu erstellen

.grid {
  @include grid(3, 20px, $inners: true);
}

Diese neue Eigenschaft $inners: true teilt Gutter Grid mit, dass die Grid-Zellen jeweils ein einzelnes Kindelement haben, das die volle Höhe und Breite seiner übergeordneten Grid-Zelle einnehmen muss.

Anstatt overflow: hidden zu verwenden, verwenden Sie 0,1 Pixel bottom padding auf dem Wrapper-Element (aktualisiert basierend auf Nelsons Vorschlag).

.grid-wrapper {
  padding-bottom: 0.1px;
}

Gutter Grid gibt keinen oberen äußeren Spalt aus, wenn er nicht benötigt wird. Dies hilft, Probleme mit dem negativen Margin-Eigenheiten zu vermeiden. Wenn es keinen oberen äußeren Spalt gibt, der mit einem fehlerhaften negativen Margin negiert werden muss, gibt es kein Problem. Der untere äußere Spalt ist jedoch immer noch ein Problem, weshalb wir die 0,1 Pixel bottom padding benötigen. Diese 0,1 Pixel bottom padding werden im Browser auf 0px gerundet, beheben aber dennoch die Margin-Eigenheit, die zu keiner Lücke am unteren Rand des Grids führt.

Fügen Sie nun Ihre Schatten hinzu und schon haben Sie ein Gutter Grid mit Schattenzellen!

.grid-cell-inner {
  box-shadow: 0 0 10px 3px blue;
}

Ich habe in diesem Artikel nur an der Oberfläche dessen gekratzt, was Gutter Grid leisten kann. Lesen Sie unbedingt die vollständige Dokumentation, um zu erfahren, was es sonst noch kann.

Wir kommen zum Ende unseres IE-Grid-Abenteuers

Ich hoffe, Sie haben diesen Ausflug in die Welt von IE und CSS Grid genossen. Lesen Sie unbedingt Teil 1 und Teil 2, wenn Sie dies noch nicht getan haben. Nach der Lektüre aller drei Artikel sind Sie nun bestens gerüstet, um wirklich beeindruckende Layouts zu erstellen, die in IE genauso gut aussehen wie in modernen Browsern.

Wenn Sie jemals jemanden sehen, der sich darüber beschwert, dass er CSS Grid wegen IE nicht verwenden kann, wissen Sie, was zu tun ist. Klapsen Sie ihm spielerisch auf den Kopf, weil er so töricht ist, und schicken Sie ihn hierher, um die Wahrheit zu erfahren.

Nun geht hinaus, meine Freunde, und baut einige Grids! 😃🎉