Coole kleine CSS -Gittertricks für Ihren Blog

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="https://www.php.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!