CSS-Grid-in IE: Vortäuschen einer Automatischen Platzierung Raster mit Lücken

0
34

Dies ist der Dritte und Letzte Teil einer dreiteiligen Serie über die Verwendung von CSS-grid-sicher im Internet-Explorer 11 (IE11), ohne wahnsinnig zu werden.

In Teil 1 habe ich behandelt einige der häufigsten Missverständnisse, dass Menschen über IE11 die nativen CSS-grid-Implementierung. In Teil 2, ich habe der Welt gezeigt, wie einfach es eigentlich ist, zu schreiben, IE-freundliche CSS-raster-code.

Heute werde ich Schritt Weg von der CSS-raster für einen moment, um zu zeigen Sie einen flexbox-Technik, die repliziert basic-CSS-grid-auto-Platzierung von Funktionalität. Diese CSS-grid replica sogar aus wie eine Netz-Lücke angewendet wurde. Muss ich super klar, obwohl: es geht nicht darum zu machen, wie die eigentlichen CSS-grid-auto-Platzierung im IE funktioniert.

Artikel-Serie:

  1. Debunking Common IE Grid Missverständnisse
  2. CSS-Grid und der neue Autoprefixer
  3. Faking eine automatische Platzierung raster mit Lücken (Dieser Beitrag)

Wie man ein fake-Netz mit Handy-Lücken

Schritt 1: HTML

Ich werde diese grundlegenden HTML als Beispiel:

<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

Die erste Sache, die wir tun müssen, um in die CSS stellen Sie sicher, dass alle Boxen sind große, basierend auf border-box anstelle von “Inhalt” -box. Der beste Weg, dies zu tun ist mit dem box-sizing: border-box Vererbung Technik:

html – {
box-sizing: border-box;
}

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

Das wird weltweit angewendet werden. Wenn Sie ein vorhandenes Projekt, das nicht über box-sizing-set, border-box, dann ändern Sie html-snippet, um einen Selektor, der auf das element, das Sie wollen, biegen Sie in ein raster.

Schritt 3: Flex

Als Nächstes werden Sie brauchen, um auf einige flexbox-Einstellungen:

.grid {
/* Kräfte gleicher Höhe der Zelle */
display: flex;
flex-wrap: wrap;
}
Schritt 4: Breiten

Jetzt, richten Sie Ihre Spaltenbreiten. Wir werden uns ein einfaches drei-Spalten-raster:

.grid-Zelle {
/* Legt Anzahl der Spalten */
width: calc(100% / 3); /* calc () – Methode */
width: 33.33%; /* Prozentsatz-Methode */
}

Die calc () – Methode können Sie die Spaltenbreite kann geändert werden ein bisschen leichter. Geben Sie an, wie viele Spalten, die Sie wollen, und der browser übernimmt die Mathematik für Sie. Dies ist besonders praktisch, wenn Sie benötigen eine größere Anzahl von Spalten, wie 7 oder 8. Die browser-Unterstützung für calc() ist stark, aber nicht so stark wie ein raw-Prozent-Wert wurde unterstützt von den Browsern, die seit Anbeginn der CSS.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
19* 15 4* 10 12 6*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1* 46 Keine 67 67 60

Die Prozentsatz-Methode hat etwas bessere browser-Unterstützung und kann ein wenig mehr stabil im IE. Wenn Sie nicht brauchen, um Unterstützung für Opera Mini, ich würde noch empfehlen, geht mit der calc () – Methode zuerst. Test im IE, und wenn das layout bricht, versuchen Sie zunächst mit 99.999% statt 100% in der calc-Funktion (calc(99.999% / 3)). Wenn das nicht funktioniert, dann versuchen Sie die Umstellung auf die Prozentsatz-Methode. Ich werde mich mit der calc () – Methode in allen meinen Beispielen. Beachten Sie, dass wenn Sie mit einem CSS-Präprozessor wie SCSS, können Sie das beste aus beiden Welten, indem man die pre-Prozessor, um die Mathematik zu tun, für Sie. Dies geht allerdings auf Kosten der nicht so leicht in der Lage, zu Bearbeiten oder überprüfen Sie die Spalte zählt in den browser dev tools.

/* Anzahl der Spalten mit SCSS */
.grid-Zelle {
Breite: (100% / 3);
}

/* CSS-Ausgabe in den browser */
.grid-Zelle {
Breite: 33.3333333333%;
}

Geben wir der grid-Zellen an Höhe und eine innere box-shadow, so dass wir sehen können, was Los ist. Ich bin nicht hinzufügen Grenze — ich werde diesen später. 😉

.grid-Zelle {
/* Damit man sehen kann, die grid-Zellen */
box-shadow: inset 0 0 0 1px #000;
height: 100px;
}

.grid-wrapper {
/* Erlaubt es uns, die Kanten des Gitters */
box-shadow: 0 0 10px 2px grün;
}

Sie sollten nun etwas, das aussieht wie dieses:

Ein basic, 3 x 2 raster mit keine Lücken

Das ist langweilig, obwohl, Recht? Jeder weiß, wie das zu tun. Wo sind diese raster Lücken, die ich reden zu halten? Ich will meine Lücken!!!

Schritt 5: Rand

Hier kommen wir zum interessanten Teil. Da wir box-sizing auf border-box, die 33,33% – Breite-enthält nun die Grenze. Was dies bedeutet ist, dass wir beginnen können sicher mischen von festen und Prozentsatz basierend Einheiten! 😃

.grid {
/* Erzeugt eine gleiche äußere Abstand */
padding: 20px 0 0 20px;
}

.grid-Zelle {
/* Erstellt Lücken */
border: 0 solid transparent;
border-width: 0 20px 20px 0;
}

Dies resultiert in etwas, das aussieht wie ein raster mit gleichen Abständen, die überall:

Einem 3 x 2 raster mit gleich viel Raum zwischen den einzelnen Zellen und den äußeren Kanten des Gitters

Zu helfen, geben Ihnen eine bessere Idee von, was Los ist, werfen Sie einen Blick auf das folgende Bild:

Farbcodierte Diagramm des grid

Der Blaue Bereich auf der oberen und linken Seiten des Gitters ist die Polsterung für der .grid-element. Die gelben Umrisse zeigen den Bereich, dass jeder .grid-cell-element nimmt. Die roten Bereiche auf der unteren und rechten Seiten jeder Zelle sind die Grenze für jede .grid-cell-element.

Das könnte sein, das Aussehen, die Sie wirklich wollen. Auf der anderen Seite, dass ist nicht das, was ein grid mit grid-Abstand-Einstellung aussieht. Deshalb haben wir einen weiteren Schritt.

Schritt 6: Rand-und überlauf

Um das raster durch drücken hart gegen die Kanten des Containers, wir brauchen ein bisschen Hilfe von negativen Margen und überlauf: versteckt:

.grid {
/* Zieht Rasterzellen hart gegen Kanten */
margin: -20px;
}

.grid-wrapper {
/* Verhindert ungerade Marge Verhalten */
overflow: hidden;
}

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

Oben und unten negative Marge wird ignoriert, wenn der überlauf ist nicht versteckt

Die Anwendung der negativen Marge und overflow: hidden bekommen, wird uns zu diesem schönen Erholung von grundlegenden grid-gap-Funktionalität:

Einem 3 x 2 raster, das aussieht wie ein CSS-raster mit einem Abstand-Einstellung

Die top und padding auf der linken Seite auf das grid ist eigentlich optional. Sie können sich dafür entscheiden, lassen Sie die Polsterung und ändern Sie die margin-Wert, wie unten dargestellt, wenn Sie bevorzugen:

.grid {
/* Margin-Anforderungen werden diese, wenn Sie aus der oberen und linken Seite .grid Polsterung */
margin: 0 -20px -20px 0;
}

Aber, halt! Der job ist nicht ganz ausgestanden ist. Schauen Sie, was passiert, wenn wir das hinzufügen einer Hintergrundfarbe zu einem der grid-Zellen:

Ein rosa hintergrund angewendet, um die Obere linke Zelle überläufe in die grid-Lücke

Nicht genau, was wir wollen, es gibt also noch einen Schritt weiter.

Schritt 7: hintergrund-clip

Um zu verhindern, dass die Rasterzelle hintergrund von Blutungen in unserer fake-grid-Lücke, müssen wir hinzufügen, hintergrund-clip: padding-box.

.grid-Zelle {
/* Verhindert, dass hintergrund-bleed */
background-clip: padding-box;
}

Jetzt haben wir diese:

Der hintergrund Bluten wurde behoben!

Wenn Sie noch nie gehört haben, die hintergrund-clip-Eigenschaft vor, Sie könnten besorgt sein über den browser-support… auch nicht sein. background-clip gibt es schon seit dem IE9!

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
15 10.5 4 9 12 7

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
7.0-7.1 10 alle 4.4 67 60

Schritt 8: Media Queries!

Die meisten der Zeit, die Netze müssen in der Lage sein, um die Anzahl der Spalten, die Sie haben, wie Sie wachsen und schrumpfen. Mit anderen Methoden kann eine massive Schmerzen. Haben Sie vielleicht zu berechnen, die eine Reihe von N-childs, so dass Sie können entfernen Sie den rechten Rand oder was auch immer. Mit dieser Methode müssen Sie nur ändern Sie einen einzelnen Wert! 😃

.grid-Zelle {
/* Legt die standardmäßige Anzahl der Spalten */
Breite: calc(100% / 1); /* 1 Spalte */
}

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

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

3 x 2 raster mit Lücken
2 x 3-raster mit Lücken
1 x 6-raster mit Lücken

Hier ist, wie es aussieht, wenn wir es alle gemeinsam:

Finden Sie die Pen Fake raster von Daniel Tonon (@daniel-tonon) auf CodePen.

Ain ‘ T nobody got time for dat!

Das ist eine Menge Arbeit im Vergleich zu dem, was moderne Netz tun können, in nur drei Zeilen von CSS! Um die Aufgabe zu erleichtern, erstellte ich eine SCSS-powered mixin ich nenne Dachrinne, Gitter. Einmal Gosse Grid eingebaut ist, in das Projekt, erstellen Sie schnell eine drei-Spalten-raster mit 20px Lücken mit den folgenden SCSS-code:

.grid-wrapper {
overflow: hidden; /* Benötigen diese für die chrome bug */
}

.grid {
@umfassen grid($cols: 3, $Dachrinne: 20px);
}

Sie können schreiben Sie es sogar noch kürzer wie das, wenn das fühlt sich zu ausführlich:

.grid-wrapper {
overflow: hidden;
}

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

Gosse Gitter kommt fertig aufgebaut mit ein paar Sätze von breakpoints, so dass Sie kann nicht schreiben, alle Haltepunkte überhaupt, wenn Ihr Netz erstreckt sich über die ganze Seite! Wenn Sie brauchen benutzerdefinierte Haltepunkte, wenn, dann Dachrinne, Gitter können Sie einfach und passen Sie Sie, wie so:

// Verbose benutzerdefinierte Haltepunkte
@umfassen grid($cols: 7, $Dachrinne: 20px, $Haltepunkte: (
4 : 960px, // Bei 960px oder unten, gibt es 4 Spalten
2 : (max 600px), // die Sie verwenden können, mq-scss-syntax auch hier
1 : 480px,
));

// Kurz version
@zählen Gitter(7, 20px, (
4 : 960px,
2 : 600px,
1 : 480px,
));

Wie Sie vielleicht bemerkt haben in dem Beispiel, Dachrinne Grid unterstützt auch die gleichen Medien Abfrage-syntax, die dieses Ding namens mq-scss verwendet. Wenn Sie sich Fragen, was das ist, gut, es ist ein Sass mixin, die ich erstellt, die das schreiben und verwalten von media-Abfragen über eine million mal einfacher. Mit mq-scss-Anweisungen zu diktieren, Spalte zählen, ermöglicht Ihnen eine sehr feine Steuerung über, wenn die Anzahl der Spalten ändert.

Hinzufügen von Schatten zu den Rasterzellen

Da wir mit Schatten nun, ich werde das Feld Schatten aus dem Beispiel Bild. Unsere Startaufstellung sieht jetzt wie folgt aus:

Ein basic, 3 x 2 raster mit Lücken und einem grünen Rand um die Außenseite

Wenn wir versuchen, hinzufügen einer äußeren box-shadow, um jede Rasterzelle jetzt… naja, es sieht nicht so gut aus:

Hinzufügen von Schatten zu den Rasterzellen verursacht, die Schatten werden aus der Ausrichtung

Wir korrigieren.

Schritt 1: Neue HTML

Um schöne Schatten zu erzeugen, müssen wir ein zusätzliches div innerhalb der einzelnen grid-Zelle. Sie können nicht wirklich nutzen ::before oder ::after für diese, da Sie nicht in der Lage sind, enthalten den HTML-Inhalt innerhalb von Ihnen.

<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: Flex

Jetzt müssen wir jede grid-Zelle ein flex-container. Dadurch wird der innere Teil der grid-Zelle zu nehmen, bis die volle Höhe des übergeordneten Elements ein. Wir müssen auch das innere element eine Breite von 100%. Dadurch wird sichergestellt, dass es dauern wird, bis die volle Dimension seiner Eltern, die beide horizontal und vertikal:

.grid-Zelle {
/* Streitkräfte inneren voll Rasterzelle Höhe */
display: flex;
}

.grid-cell-inner {
/* Streitkräfte inneren voll Rasterzelle Breite */
width: 100%;
}

Mal sehen, was wir bekommen, wenn wir versuchen, hinzufügen von box-Schatten, um die inneren Elemente:

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

Box Schatten erscheinen um raster von Zellen, sondern werden immer abgeschnitten

Das ist viel schöner, aber es ist noch nicht ganz dort noch. Die versteckten überlauf, die wir verwenden, um zu verhindern, dass der Chrome-bug ist immer in den Weg.

Schritt 3: Hacky-Polsterung

So, wir müssen es erlauben, überlaufen-aber trotzdem vermeiden, diese Chrome-bug. Die einzige andere sichere Möglichkeit die ich gefunden habe, das zu tun, ist mit Polsterung. Durch hinzufügen von 1px der Polsterung auf der Oberseite und der Unterseite des äußeren grid-wrapper-element, es wird fix der Chrome-bug.

.grid-wrapper {
/* Verhindert ungerade Marge Verhalten in Chrome */
padding: 1px 0;
}

Dies geht auf Kosten der mit einem extra 1px Platz am oberen und unteren Rand des Rasters. Das Bild unten zeigt, wie dieses endet Suche. Die Schatten wurden aufgehellt, um zu zeigen, die 1px-Lücke mehr klar.

1px Polsterung am oberen und unteren Rand des Rasters

Hinweis: Sie können vermeiden, die 1px von top-Polsterung, indem Sie sich nicht an das top-Polsterung Lücke Wert auf das grid-element. Die 1px von unten Polsterung kann nicht vermieden werden, obwohl.

Ein Rand der Breite angewendet, um die äußeren grid-wrapper funktioniert auch, so technisch ich didn ‘ T müssen, um die Polsterung zu dem obigen Beispiel. Die meisten der Zeit, wenn wir anwenden eines Schatten -, grid-Zellen, dann werden wir wahrscheinlich nicht sehen wollen, eine Grenze, gewickelt um Sie herum. Das obige Beispiel wurde mehr demonstriert, wie gering der Abstand ist.

Dies ist, was das Netz sieht aus wie ohne den äußeren Rahmen:

3 x 2 shadow cell grid
2 x 3 Schatten-cell grid
1 x 6 shadow-cell grid

Hier ist ein Stift zeigt das fertige Produkt:

Finden Sie die Stift-Fake-Gitter mit Schatten von Daniel Tonon (@daniel-tonon) auf CodePen.

Dachrinne, Gitter-Schatten

Let ‘ s decken, wie Schatten hinzufügen, auf Dachrinne, Gitter-Zellen. Sie können verwenden die gleiche HTML-Struktur, die wir im vorherigen Beispiel verwendet.

Nun gelten diese SCSS erstellen Sie eine drei-Spalten-raster, das ist ein 20px Dachrinne:

.grid {
@umfassen raster(3, 20 px, $Glaskolben: true);
}

Diese neue $Glaskolben: true Eigenschaft teilt Gosse Grid, die grid-Zellen, die jeweils eine einzige untergeordnete element, das nehmen muss, bis die volle Höhe und Breite des übergeordneten grid-Zelle.

Anstelle der Verwendung von overflow: hidden verwenden 1px bottom-padding auf dem wrapper-element.

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

Dachrinne, Gitter-Ausgabe nicht ein top-äußere Rinne, wenn Sie es nicht müssen. Dies hilft zu vermeiden, Fragen rund um das Chrome-negativen margin-bug. Nach allem, wenn es keine top-äußere Rinne zu negieren, mit der eine fehlerhafte negative Marge, dann gibt es keine Fehler zu befürchten. Die untere äußere Rinne ist immer noch ein problem, obwohl, und das ist, warum wir müssen die 1px von unten Polsterung. Dies 1px des unteren Polsterung eher kaum spürbar (wenn überhaupt), also Mach dir keine sorgen darüber zu viel.

Fügen Sie nun Ihre Schatten und Sie haben sich eine Rinne, Gitter mit Schatten-Zellen!

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

3 x 2 shadow cell grid

Ich habe nur kratzte die Oberfläche dessen, was Dachrinne, Gitter tun kann, in diesem Artikel. Stellen Sie sicher, Lesen Sie die vollständige Dokumentation, um zu erfahren, was sonst noch in ihm steckt.

Kommen wir zum Ende unserer IE-grid-Abenteuer

Ich hoffe, Sie haben genossen diesen Ausflug in die Welt der IE und CSS-raster. Stellen Sie sicher, Lesen Sie Teil 1 und Teil 2, wenn Sie nicht bereits getan haben. Gelesen hatte, alle drei Artikel, jetzt werden Sie voll ausgestattet, um einige wirklich beeindruckende layouts, die genau so gut Aussehen in IE wie in modernen Browsern.

Wenn Sie jemals jemand beschwert über nicht in der Lage mithilfe von CSS-grid, weil der IE Sie wissen, was zu tun ist. Spielerisch Schlag auf den Kopf, weil Sie so dumm und senden Ihnen hier, die Wahrheit zu bekommen.

Jetzt gehen Sie her, meine Freunde, und bauen einige Netze! 😃🎉

Artikel-Serie:

  1. Debunking Common IE Grid Missverständnisse
  2. CSS-Grid und der neue Autoprefixer
  3. Faking eine automatische Platzierung raster mit Lücken (Dieser Beitrag)