Vor zehn Jahren habe ich angefangen, CSS mit dem Ziel zu lernen, den Stil meines Blogs zu ?ndern. Bald konnte ich coolen Code mit mathematischeren, einfacheren Verst?ndnis von Funktionen wie Transformation schreiben. Andere Bereiche von CSS, wie z. B. Layout, waren jedoch mein Schmerzpunkt.

In diesem Artikel handelt es sich um ein Problem, das ich vor zehn Jahren gesto?en bin und erst kürzlich eine clevere L?sung gefunden habe. Insbesondere geht es darum, wie ich die moderne CSS-Gittertechnologie verwendet habe, um ein langj?hriges Problem zu l?sen, und dabei wurde mehr kühlere Ergebnisse als ich ursprünglich dachte.

Es ist zu beachten, dass dies kein Tutorial darüber ist, wie man CSS -Gitter am besten benutzt, sondern eher wie eine Aufzeichnung meines pers?nlichen Lernprozesses.

Frage

Einer der frühesten Beitr?ge in meinem Blog waren zuf?llige Fotos in der Stadt, daher hatte ich die Idee, ein Miniaturnagel mit fester Gr??e zu erstellen. Für die ?sthetik m?chte ich, dass dieses Netz im Verh?ltnis zu den oberen und unteren Abs?tzen vertikal zentriert ist, aber gleichzeitig m?chte ich, dass die letzte Reihe von Miniaturansichten im Verh?ltnis zum Raster links ausgerichtet ist. In der Zwischenzeit h?ngt die Breite des Artikels (und die Breite des Netzes, in dem) vom Ansichtsfenster abh?ngt.

Der HTML -Code sieht so aus:

<p></p>
<div class="grid--thumbs">
  <a href="http://m.miracleart.cn/link/19e321d9f307ccfc1c37106191cbbc74">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174381745622040.jpg" class="lazy" alt="Coole kleine CSS -Gittertricks für Ihren Blog">
  </a>
  </div>
<p></p>

Es scheint einfach zu sein, aber es wird eines der schwierigsten CSS -Probleme, die ich je gesehen habe.

Unbefriedigende L?sung

Dies sind die Methoden, die ich seit Jahren ausprobiert oder gesehen habe und das Problem nicht wirklich gel?st hat.

Einschr?nkungen der schwebenden Programme

Das schwimmende Schema ist eine Sackgasse, da ich nicht herausfinden kann, wie das Raster auf diese Weise vertikal in die Mitte kommen kann.

 .Grid-Thumbs {überlauf: versteckt; }
.Grid-Thumbs a {float: links; }

Die folgende Demonstration zeigt die Versuche schwebender Schemata. Gr??en Sie die Gr??en Sie die Gr??en Sie die Einbettungen und sehen Sie, wie sie in verschiedenen Ansichtsfenster -Breiten ausgeführt werden.

Inline-Block nicht ausreichend

Zuerst schien dies eine bessere Idee zu sein:

 .grid-thumbs {text-align: center}
.Grid-Thumbs a {Anzeige: Inline-Block}

Aber das ist nicht der Fall:

Die letzte Zeile ist in diesem Fall nicht links ausgerichtet.

Irgendwann fand ich aufgrund unerwarteter CSS-automatischer Vervollst?ndigung auf CodePen eine Eigenschaft namens text-align-last , die bestimmt, wie die letzte Zeile des Blocks ausgerichtet ist.

Leider ist das Einstellen text-align-last: left auf dem Netz ist nicht die L?sung, die ich auch m?chte:

Zu diesem Zeitpunkt erw?hne ich tats?chlich, die Idee von vertikalen Zentriernetzen aufzugeben. Kann die Kombination von text-align: justified und text-align-last: left zu besseren Ergebnissen auf dem Netz liefern?

Dies ist nicht der Fall. Es sei denn, die letzte Reihe hat nur ein Miniaturbild und die Lücke zwischen den Spalten ist nicht zu gro?. Gr??en Sie die Gr??e des Einbettes unten und sehen Sie, was ich meine.

Dies ist fast die Situation, die ich vor zwei Jahren war, und nach neun Jahren Versuch und Misserfolg kann ich immer noch keine L?sung für dieses Problem finden.

Unordentliche Flexbox -Tipps

Eine Flexbox-L?sung, die zun?chst machbar aussieht, besteht darin, dem Raster A ::after Pseudo-Element hinzuzufügen und flex: 1 auf der Miniaturansicht und dieses Pseudo-Elements zu setzen:

 .Grid-Thumbs {
  Anzeige: Flex;
  Flex-Wrap: Wrap;
  a, & :: nach {flex: 1; }
  Img {Margin: Auto; }
  &: Nach {Inhalt: 'Nach'; }
}

Die folgende Demonstration zeigt, wie dieser Ansatz funktioniert. Ich habe den Miniaturansichten lila Grenzen hinzugefügt und ::after Pseudo-Elementen, um zu erleichtern, was los ist.

Dies ist nicht das, was ich will, weil das Miniaturansichtennetz nicht vertikal zentriert ist. Das hei?t, solange die letzte Zeile ein Bild weniger als die anderen Zeilen hat, sieht es gut aus ... Wenn sich eine ?nderung gibt, wenn mehr Projekte fehlen oder keine Projekte fehlen, wird das Layout gebrochen.

Dies ist eine schlechte Idee. Ein anderer Ansatz besteht darin, keine Pseudoelemente zu verwenden, sondern nach dem Miniaturansichten so viele leere Divs hinzuzufügen, wie wir es erwarten.

Wir sollten in der Lage sein, die Anzahl der erwarteten Spalten zu approximieren, da die Gr??e des Miniaturbilds festgelegt ist und wir m?glicherweise die maximale Breite des Artikels festlegen m?chten, da der Text, der sich über die gesamte Bildschirmbreite erstreckt, Ihre Augen visuell belasten kann. Das Teilen der maximalen Breite durch eine feste Miniaturbreite sollte in diesem Fall die maximale Anzahl von Spalten ergeben.

Das erste leere Element belegt die Zeilen, die nicht vollst?ndig mit dem Miniaturbild gefüllt sind, und der Rest überflutet zu den anderen Reihen. Aber weil sie in der H?he null sind, sind sie visuell irrelevant.

Dieser Ansatz funktioniert, aber es ist wieder ungeschickt und erzeugt immer noch nicht das gewünschte Ergebnis, da es manchmal eine gro?e und h?ssliche Lücke zwischen den S?ulen hinterl?sst.

Gitterl?sung?

Angesichts des Namens haben die Gitterlayouts immer wie die Antwort klang. Das Problem ist, dass alle Beispiele, die ich zum Zeitpunkt gesehen habe, eine vordefinierte Anzahl von Spalten verwendet hat, die für dieses bestimmte Muster nicht funktionieren, wobei die Anzahl der Spalten durch die Ansichtsfensterbreite bestimmt wird.

W?hrend ich letztes Jahr eine Reihe von reinen CSS-Hintergrundmustern von Einzelelementen schrieb, dachte ich daran, eine Reihe von Medienabfragen zu generieren, die eine CSS-Variable ?ndern würden --n , die der Anzahl der Spalten entspricht, die zum Festlegen von grid-template-columns verwendet werden.

 $ w: 13em;
$ H: 19EM;
$ f: $ h/$ w;
$ n: 7;
$ g: 1em;

--h: #{$ f*$ w};
Anzeige: Grid;
Grid-Template-S?ulen: Wiederholung (var (-n, #{$ n}), var (-w, #{$ w}));
Raster-Lack: $ G;
Ort-in-intent: Zentrum;

@Für $ i von 1 bis $ n {
  @media (max -Width: ($ n - $ i 1)*$ w ($ n - $ i 2)*$ g) {
    --N: #{$ n -$ i}
  }
}

Ich war damals sehr stolz auf diese Idee, obwohl es mir peinlich ist, wenn ich jetzt zurückblicke. Eine Medienabfrage pro m?glicher Spaltenzahl ist nicht ideal, geschweige denn, dass sie nicht sehr nützlich ist, wenn die Gitterbreite nicht gleich ansichern, sondern noch etwas flexibel ist und auch von der Breite seines Geschwisterelements abh?ngt.

Magische L?sung

Am Ende habe ich eine bessere L?sung gefunden, wenn ich CSS -Gitter verwendet habe und nicht verstanden habe, warum die Funktion der repeat() in einem bestimmten Fall nicht funktioniert. Es war so frustrierend, dass ich auf die MDN-Website ging, um es auszuprobieren, und ich bemerkte zuf?llig das Keyword auto-fit , und obwohl ich die Erkl?rung nicht verstehe, hatte ich eine Vermutung, dass es bei diesem anderen Problem helfen k?nnte, also gab ich alles andere auf und ausprobiert.

Das habe ich bekommen:

 .Grid-Thumbs {
  Anzeige: Grid;
  Justify-Content: Center;
  Raster-Lack: .25em;
  Grid-Template-S?ulen: Wiederholung (automatisch, 8em);
}

Ich fand auch die Funktion minmax() , die die feste Gr??e für Netzelemente ersetzt. Ich kann immer noch nicht vollst?ndig verstehen, wie minmax() funktioniert - je mehr ich spiele, desto weniger verstehe ich es - aber in diesem Fall sieht es so aus, als würde es ein Raster erstellen und dann seine Spalten gleicherma?en dehnen, bis sie den gesamten verfügbaren Platz füllen:

 Grid-Template-S?ulen: Wiederholen (automatisch, minmax (8em, 1fr));

Eine weitere coole Sache, die wir hier tun k?nnen, besteht darin, zu verhindern, dass das Bild verschüttet wird, wenn es breiter ist als das Netzelement. Wir k?nnen dies tun, indem wir den mindestens 8EM durch min(8em, 100%) ersetzen. Dies stellt grunds?tzlich sicher, dass das Bild nie 100%überschreitet, aber niemals unter 8M. Danke Chris für den Rat!

Denken Sie daran, dass die min() -Funktion vor Chrom nicht in Rand funktioniert!

Denken Sie daran, dass dies nur gute Ergebnisse erzielen kann, wenn alle Bilder das gleiche Seitenverh?ltnis haben (wie die quadratischen Bilder, die ich hier verwende). Dies ist kein Problem für meinen Blog, da alle Fotos mit meinem Sony Ericsson W800I -Telefon aufgenommen wurden und alle das gleiche Seitenverh?ltnis haben. Wenn wir jedoch Bilder mit unterschiedlichen Seitenverh?ltnissen entfernen, sieht das Netz weniger gut aus:

Natürlich k?nnen wir die Bildh?he auf einen festen Wert einstellen, aber dies verzerrt das Bild ... es sei denn, wir setzen object-fit auf cover , was unser Problem l?st!

Eine andere Idee ist es, das erste Miniaturbild in eine Art Banner zu verwandeln, das alle Gitters?ulen umfasst. Das einzige Problem ist, dass wir die Anzahl der Spalten nicht kennen, da es vom Ansichtsfenster abh?ngt. Es gibt jedoch eine L?sung -wir k?nnen grid-column-end auf -1 einstellen!

 .Grid-Thumbs {
  / * Gleiche Stile wie zuvor */
  A: Erstkind {
    Grid -S?ule: 1/ -1;
    img {H?he: 13em}
  }
}

Die H?he des ersten Bildes ist gr??er als die der anderen Bilder.

Wenn wir m?chten, dass das Bild alle Spalten au?er der letzten Spalte erstreckt, setzen wir es auf -2 und so auf ... negative Spaltenindizierung ist in Ordnung!

auto-fill ist ein weiteres Keyword für Grid-Attribut, das ich auf MDN bemerkt habe. Die Erkl?rungen dieser beiden Schlüsselw?rter sind langlebig und haben keine visuellen Effekte, daher fand ich sie unn?tig. Schlimmer noch, wenn das Ersetzen von auto-fit durch auto-fill in jeder Gitterdemonstration oben keinen Unterschied macht. Auch nach dem Betrachten des Artikels oder nach dem Ausprobieren der Beispiele bleibt die Art und Weise, wie sie wirklich funktionieren und wie sie sich unterscheiden, ein R?tsel.

Wenn ich unterschiedliche Ans?tze ausprobiert und die Ergebnisse in verschiedenen Szenarien betrachtete, führte mich schlie?lich zu der Schlussfolgerung: Wenn wir minmax() anstelle einer festen Spaltenbreite (z. B. 8EM) minmax () verwenden, ist es besser, auto-fill anstelle von auto-fit zu verwenden, da, wenn wir nur wenige Bilder haben, besser aussehen, wie im folgenden interaktiven Demonstration gezeigt:

Ich denke, mein pers?nlicher Favorit ist die Idee des anf?nglichen Miniatursilns, das vertikal zentriert ist und eine fast feste S?ulenbreite aufweist (aber immer noch min(100%, 15em) anstelle von nur 15em). Letztendlich ist es eine Frage der pers?nlichen Pr?ferenz, und was Sie in der folgenden Demo sehen k?nnen, sieht für mich besser aus:

Ich verwende hier auto-fit da es das gleiche Ergebnis wie auto-fill und weniger Charaktere hat. Was ich jedoch nicht verstanden habe, wenn ich dies machte, ist, dass diese beiden Schlüsselw?rter das gleiche Ergebnis erzielen, da es in der Galerie mehr Elemente gibt, als wir eine Zeile füllen müssen.

Sobald es jedoch eine ?nderung gibt, werden auto-fit und auto-fill die Ergebnisse zu unterschiedlichen Ergebnissen führen, wie unten gezeigt. Sie k?nnen justify-content und die Anzahl der auf dem Netz platzierten Elemente ?ndern:

Ich bin mir nicht sicher, welches die bessere Option ist. Ich denke, es h?ngt von pers?nlichen Vorlieben ab. In Kombination mit justify-content: center scheint auto-fill eine logischere Wahl zu sein, aber gleichzeitig wird auto-fit zu besseren visuellen Effekten führen.

Das obige ist der detaillierte Inhalt vonCoole kleine CSS -Gittertricks für Ihren Blog. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!