DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft grid-auto-columns ist Teil der CSS Grid Layout-Spezifikation und gibt die Größe von Grid-Spalten an, die ohne explizite Größenangabe erstellt wurden. Mit anderen Worten, diese Eigenschaft legt die Größe von impliziten Spalten und allen anderen Spalten fest, die nicht explizit in der Eigenschaft grid-template-columns dimensioniert wurden.
.grid-container {
display: grid;
grid-template-areas: "media detail detail";
grid-template-columns: 200px 400px;
grid-auto-columns: 150px;
}Dieses Beispiel erstellt einen Grid-Container mit drei Spalten, die durch grid-template-areas definiert sind. Die ersten beiden Spalten haben eine explizite Größe, die durch grid-template-columns festgelegt ist, die letzte Spalte jedoch nicht. Hier kommt grid-auto-columns ins Spiel und legt die Größe dieser Spalte auf 150px fest.
Anwendungsfälle für grid-auto-columns
Wie bereits erwähnt, legt grid-auto-columns die Größe aller Spalten fest, die keine explizite Größe haben. Nun stellt sich die Frage, welche Spalten keine explizite Größe haben? Oder wie erstellt ein Grid Spalten ohne explizite Größe?
Hier sind einige Situationen, in denen dies vorkommen kann.
Spalten, die durch grid-template-areas definiert sind und keine explizite Größe durch grid-template-columns haben
Der erste Fall ist der, den wir am Anfang dieses Artikels gesehen haben. Ein Grid kann eine explizite Spalte haben, die durch grid-template-areas definiert ist, ohne dass ihre Größe explizit durch die Eigenschaft grid-template-columns festgelegt wird.
.grid-container {
display: grid;
grid-template-areas: "media detail detail"; /* 3 columns */
grid-template-columns: 200px 150px; /* 2 sizes */
}Die erste Spalte ist auf 200px gesetzt und die zweite hat ihre Größe auf 150px gesetzt. Da die letzte Spalte nicht explizit dimensioniert ist, wird sie auf auto gesetzt und nimmt den verfügbaren Platz ein, der von den anderen beiden Spalten übrig bleibt.
Wenn wir grid-auto-columns zum obigen Beispiel hinzufügen, können wir auch die Größe der letzten Spalte steuern.
.grid-container {
display: grid;
grid-template-areas: "media detail detail";
grid-template-columns: 200px 150px;
grid-auto-columns: 150px;
}Wie Sie im folgenden Bild sehen können, ist die Größe der letzten Spalte auf 150px eingestellt.
grid-auto-columns auf 150px gesetzt ist.Beachten Sie, dass die Tracks, die keine explizite Größe haben, auto-dimensioniert sind.
Implizite Spalten werden erstellt, wenn mehr Grid-Elemente als Zellen vorhanden sind
Ein Grid, das durch grid-template-columns, grid-template-rows oder/und grid-template-areas definiert ist, wird als explizites Grid bezeichnet, was bedeutet, dass alle Grid-Tracks eine festgelegte Größe haben. Nehmen wir zum Beispiel an, wir haben 12 HTML-Kindelemente in einem übergeordneten Grid-Container und definieren explizit drei Spalten und vier Zeilen im Grid.
.grid {
display: grid;
grid-template-rows: repeat(4, auto);
grid-template-columns: repeat(3, auto);
}Wir haben implizite Grid-Tracks für diese Spalten und Zeilen, da keine Größeninformationen vorhanden sind. Nur die Anzahl der Spalten und die Anzahl der Zeilen.
Eine Situation, in der Sie implizite Spalten finden, ist, wenn mehr Grid-Elemente vorhanden sind als definierte Spalten. Stellen Sie sich in unserem letzten Beispiel vor, wir haben jetzt mehr als 12 HTML-Elemente. Wir haben zuvor drei Spalten und vier Zeilen eingerichtet, sodass es genau 12 Zellen im Grid gibt – die perfekte Anzahl für unsere 12 Elemente. Aber mit mehr als 12 Elementen haben wir plötzlich ein Überlaufproblem, richtig?
Überhaupt nicht! Der Auto-Placement-Algorithmus von CSS Grid erstellt zusätzliche Zeilen oder Spalten, um die zusätzlichen Elemente aufzunehmen. Diese zusätzlichen Spalten und Zeilen werden als implizite Tracks bezeichnet.
Standardmäßig erstellt der Auto-Placement-Algorithmus Zeilen-Tracks, um zusätzliche Elemente aufzunehmen. Im folgenden Beispiel fordern wir unser Grid auf, die zusätzlichen Elemente in Spalten (nicht Zeilen) anzuordnen, sodass wir den Auto-Placement-Algorithmus auf column setzen müssen. Fantastisch, jetzt kann unser Grid alles aufnehmen, egal wie viele Elemente wir hineinwerfen.
Die impliziten Spalten werden jedoch automatisch basierend auf dem verbleibenden Platz dimensioniert. Deshalb ist grid-auto-columns so nützlich – wir können all diesen Spalten eine Größe geben, und CSS Grid hört auf, Spalten zu füllen, wenn es das letzte Element erreicht, auch wenn die letzte Spalte in der letzten Zeile des Grids nicht die volle Breite des Grids erreicht,
Sagen wir, wir dimensionieren diese impliziten Grid-Spalten auf 250px.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 150px);
grid-auto-flow: column; /* Set the auto-placement algorithm to column */
grid-auto-columns: 250px;
}Jetzt, egal wie viele implizite Spalten erstellt werden, sie alle haben ihre Größe auf 250px gesetzt.
Implizite Spalten werden erstellt, wenn wir ein Element außerhalb des expliziten Grids positionieren
Ein weiteres Szenario, in dem die Eigenschaft grid-auto-columns nützlich ist, ist, wenn implizite Tracks erstellt werden, wenn wir ein Element außerhalb des expliziten Grids positionieren. Die impliziten Tracks werden automatisch erstellt, um Platz für dieses Element zu schaffen.
.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px; /* 3 explicit columns */
grid-auto-columns: 150px; /* Size of the implicit columns */
}
.grid-item:last-child {
grid-column: 5; /* Placed in 5th column in a 3-column grid */
grid-row: 3;
}Was wir dort getan haben, war, das letzte .grid-item-Kind in die fünfte Spalte zu setzen… aber es gibt keine fünfte Spalte in unserem Drei-Spalten-Grid! Das platziert das letzte Grid-Element außerhalb des expliziten Grids, was zwei implizite Spalten-Tracks erzeugt. Auch wenn diese Spalten für uns erstellt wurden, können wir ihnen mit der Eigenschaft grid-auto-columns eine Größe von 150px geben.
grid-auto-columns auf 150px dimensioniert.Syntax
grid-auto-columns: <track-size>+Vollständige Definition
where
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto <inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
where
<length-percentage> = <length> | <percentage>- Anfangswert:
auto - Gilt für: Grid-Container
- Vererbt: nein
- Berechneter Wert: Wie angegeben, jedoch mit relativen Längen, die in absolute Längen umgewandelt wurden
- Prozentangaben: beziehen sich auf die entsprechende Dimension des Inhaltsbereichs
- Animationstyp: wenn die Listenlängen übereinstimmen, nach dem berechneten Werttyp pro Element in der berechneten Track-Liste; ansonsten diskret
Mehrere Track-Größen
Wir können mehrere Spaltengrößen für Grid-Tracks mit der Eigenschaft grid-auto-columns angeben. In diesem Fall funktioniert die mehrfache Track-Größe als Muster und wird bei Bedarf wiederholt.
.grid-container {
display: grid;
grid-template-columns: 150px 150px;
grid-auto-columns: 50px 100px 200px;
}
.grid-item:last-child {
grid-column: 8;
}Hier verschieben wir das letzte Element unseres Grids aus den expliziten Spalten, und unser Grid erstellt daraufhin implizite Spalten, um dieses Element aufzunehmen. Dieses Grid hat zwei explizite Spalten (150px 150px) und da das letzte Element in der achten Spalte liegen soll (grid-column: 8), werden sechs implizite Spalten automatisch im Grid generiert.
grid-auto-columns setzt die erste implizite Spaltengröße auf 50px, die zweite auf 100px und die dritte Spalte auf 200px. Da wir mehr als drei implizite Spalten haben, wiederholt unser Grid dieses Muster, um sie zu dimensionieren.
Wenn wir eine weitere implizite Spalte hätten, wie groß wäre diese Spalte dann?
Zeigen Sie mir die Antwort!
Sie wäre 150px, aber ich wette, das wussten Sie auch ohne Nachzudenken. 😀
Werte
Die Werte von grid-auto-columns sind fast identisch mit den Werten der Eigenschaft grid-template-columns, außer dass Sie in grid-auto-columns die folgenden Werte nicht verwenden können
none[linename]repeat()subgridmasonry
/* Keyword values */
grid-auto-columns: auto;
grid-auto-columns: min-content;
grid-auto-columns: max-content;
/* single track-size values */
grid-auto-columns: 200px;
grid-auto-columns: 30vmin;
grid-auto-columns: 50%;
grid-auto-columns: 1.5fr;
grid-auto-columns: minmax(100px, 2fr);
grid-auto-columns: minmax(min-content, 1fr);
grid-auto-columns: fit-content(15rem);
/* multiple track-size values */
grid-auto-columns: 100px 1fr;
grid-auto-columns: 200px min-content 1fr;
grid-auto-columns: 100px 200px 50px 10%;
grid-auto-columns: minmax(100px, auto) auto max-content fit-content(200px);
/* Global values */
grid-auto-columns: inherit;
grid-auto-columns: initial; /* same as `auto` */
grid-auto-columns: revert;
grid-auto-columns: revert-layer;
grid-auto-columns: unset;<length>
Dieser Wert kann jede gültige und nicht-negative CSS-Länge sein, wie z. B. px, em und rem, um die Track-Größe (d. h. Breite) der Spalte anzugeben.
<percentage>
Dies ist ein nicht-negativer Wert, der sich auf die innere Inline-Größe des Grid-Containers bezieht. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, dann muss die Prozentangabe genauso behandelt werden, als würde auto deklariert.
Ein Nachteil bei der Verwendung eines Prozentwerts ist, dass, wenn Sie Abstände zwischen den Tracks hinzufügen, die Größe der Abstände zur Größe der Tracks hinzugefügt wird, was zu einem Überlauf führen kann. Verwenden Sie die fr-Einheit oder das Schlüsselwort auto, um die Tracks zu größenmäßig festzulegen und dies zu verhindern.
<flex>
Dies ist ein nicht-negativer Wert, der in fr-Einheiten ausgedrückt wird und es Ihnen ermöglicht, flexible Grid-Tracks zu erstellen, indem die Größe eines Tracks als Bruchteil des verfügbaren Platzes im Grid-Container angegeben wird. So ändern sich die Spalten, wenn sich die Breite des Grids ändert, was zu einem reaktionsfähigeren Grid führt.
Betrachten Sie zum Beispiel einen Grid-Container mit einer Breite von 900px und drei impliziten Spalten. Nehmen wir an, die Breite der ersten (linken) impliziten Spalte ist fest (d. h. sie ändert sich nicht) bei 300px, während die zweite Spalte eine Fraktionseinheit (1fr) einnimmt und die dritte Spalte zwei Fraktionseinheiten (2fr) ausmacht.
.grid-container {
display: grid;
width: 900px;
grid-auto-columns: 300px 1fr 2fr;
}Die zweiten beiden Spalten sind bruchstückhaft, daher nehmen sie den gesamten verbleibenden verfügbaren Platz ein. Und in diesem Fall ist der verfügbare Platz alles, was nach Abzug der festen 300px Breite der ersten Spalte übrig bleibt. Danach verteilen sich die beiden Spalten auf das, was übrig bleibt, entsprechend der Anzahl der Fraktionen, die sie erhalten.
In diesem Beispiel beträgt der verbleibende und verfügbare Platz 600px (d. h. 900px abzüglich 300px). Die zweite Spalte erhält eine Fraktion (1fr) dieses Platzes und die dritte Spalte erhält zwei Fraktionen (2fr). Lassen Sie uns einen Moment lang rechnen, um die Breite einer Fraktion von 600px zu ermitteln.
1fr = ([Grid Container Width] - [Fixed Column Width]) / [Sum of the flex factors]
1fr = (900px - 300px) / 3
1fr = 600px / 3
1fr = 200pxAha! Eine Fraktion sind 200px. Und da die zweite Spalte 1fr ist, muss sie ebenfalls 200px betragen. Das lässt uns mit 400px verfügbarem Platz (d. h. 900px – 300px – 200px), was zufällig doppelt so groß ist wie die zweite Spalte. Und doppelt so groß wie die zweite Spalte ist 2fr (1fr(2))!
minmax(min, max)
Die Funktion minmax() akzeptiert zwei Argumente: einen minimalen Längenwert und einen maximalen Längenwert. Und das sagt einem Grid-Container, dass grid-auto-columns nicht schmaler als der Mindestwert sein kann, aber nicht breiter als der Höchstwert. Unser Leitfaden zu CSS-Funktionen enthält eine umfassendere, detaillierte Erklärung, wie die Funktion funktioniert.
Nehmen Sie das folgende Beispiel
grid-auto-columns: 200px minmax(100px, 400px);Hier gibt es zwei Spalten: eine, die 200px breit ist, und eine andere, die als minmax(100px, 400px) ausgedrückt wird. Sieht seltsam aus, oder? Aber das besagt nur, dass die zweite Spalte mindestens 100px Platz einnehmen muss, aber nicht mehr als zwei Bruchteile des verfügbaren Platzes nach Abzug der 200px der ersten Spalte.
Anders ausgedrückt: Solange mehr als 100px verfügbarer Platz vorhanden ist, kann die zweite Spalte bis zu 400px flexen, muss aber dort stoppen. Andernfalls ist die Spalte 100px breit.
Die Argumente min und max akzeptieren alle folgenden Werte, mit der Ausnahme, dass der min-Wert kein Flex-Wert sein kann (z. B. 1fr)
<length-percentage> | <flex> | min-content | max-content | autoDaher ist dies ungültig, da der min-Wert ein Flex-Wert ist
grid-auto-columns: minmax(1fr, 500px) 3fr;Aber diese sind völlig gültig
grid-auto-columns: minmax(auto, 1fr) 3fr;
grid-auto-columns: minmax(200%, 1fr) 1fr;auto
Das Schlüsselwort auto verhält sich in den meisten Fällen ähnlich wie minmax(min-content, max-content).
Da auto-Track-Größen von den Eigenschaften align-content und justify-content gestreckt werden können, nehmen sie standardmäßig jeden verbleibenden Platz im Grid-Container ein (Sie wissen schon, auto-matisch). Dennoch können auto-Track-Größen einen Kampf gegen fr-Einheiten beim Zuweisen des verbleibenden Platzes nicht gewinnen – sie passen sich an die maximale Größe ihres Inhalts an.
Schauen Sie sich das Ergebnis dieser beiden Track-Beispiele an
grid-auto-columns: auto auto auto;
grid-auto-columns: auto 1fr auto;Wenn alle drei Spalten auf auto gesetzt sind (was wir auch als repeat(3, auto) hätten schreiben können – aber dazu später mehr), teilen sie sich nur den gleichen Platz. Aber wenn wir eine fraktionelle Einheit in der Mitte als zweite Spalte einfügen, sind die auto-Spalten nur so breit wie der Inhalt darin, und die 1fr-Spalte nimmt den verbleibenden Platz ein.
min-content
Das Schlüsselwort min-content repräsentiert die kleinstmögliche Fläche, die ein Element in einem Grid-Container einnehmen kann, ohne dass sein Inhalt überläuft. Der Inhalt kann Text, Bilder oder Videos sein.
Nehmen wir an, der Inhalt ist „CSS is awesome.“. Der min-content ist die Breite des Wortes „awesome“, da dies der breiteste Teil des Inhalts ist (breiter als „CSS“ und „is“ zusammen). Wenn die Spalte schmaler wird, beginnt der Text über den Container hinauszufließen.
Im Code sieht das so aus
.grid {
display: grid;
grid-auto-columns: min-content 1fr;
gap: 1rem;
}…was zu etwas wie diesem führt
max-content
Das Schlüsselwort max-content repräsentiert die kleinste Größe, die erforderlich ist, damit ein Element all seinen Inhalt ohne Umbruch oder Überlauf aufnehmen kann. Ich weiß, ein Name, der „max“ enthält, lässt es so klingen, als würden wir uns mit einer maximalen Größe befassen, daher kann dieser Wert ein kleiner Gehirnjogger sein.
Wenn wir unser min-content-Beispiel von oben wieder aufgreifen, wächst ein Grid-Track mit dem Größenwert max-content, bis sein Inhalt in eine einzige Zeile passt. Im Fall von „CSS ist fantastisch“ ist max-content so viel Platz, wie diese drei Wörter zusammen auf einer Zeile einnehmen.
.grid {
display: grid;
grid-auto-columns: max-content 1fr;
gap: 1rem;
}
fit-content(<length-percentage>)
Die Funktion fit-content() (es gibt eine solide Erklärung dafür in unserem Leitfaden zu CSS-Funktionen) verwendet den verfügbaren Platz und akzeptiert einen percentage oder length Wert als maximale Größe für einen Grid-Track, während sichergestellt wird, dass der Track niemals über max-content hinausgeht und niemals unter ein Minimum schrumpft. Das Minimum ist oft, aber nicht immer, gleich min-content.
.grid {
display: grid;
grid-auto-columns: fit-content(700px) fit-content(700px) 1fr;
gap: 1rem;
}In der folgenden Abbildung dehnt sich die erste Spalte nicht über ihre max-content-Größe (d. h. die Breite der Wörter „fit-content(700px)“ auf einer einzigen Zeile) hinaus – sie dehnt sich nur aus, um ihren Inhalt aufzunehmen. Die zweite Spalte hat jedoch viel mehr Inhalt und hört auf, sich zu dehnen, sobald sie eine Breite von 700px erreicht, was das Limit ist, das für die Funktion festgelegt wurde.
700px. Wenn sie den gesamten Inhalt innerhalb dieses Limits aufnehmen können, großartig, stoppen Sie dort, wo die max-content ist. Andernfalls zeigen Sie so viel wie möglich bis zu 700px an und beginnen dann mit zusätzlichen Zeilen.Beispiele
Erstellen wir eine Galerie mit drei Bildern in drei Spalten, und falls weitere Bilder hinzugefügt werden, möchten wir, dass sie auf eine neue Zeile und Spalte übergehen. Dazu müssen wir drei explizite Spalten erstellen und die zusätzlichen Elemente außerhalb dieser drei Spalten platzieren, da dies implizite Spalten verursachen kann und wir hypothetisch nicht wissen, wie viele Spalten generiert werden. Wir können die Größe dieser impliziten Spalten mit grid-auto-columns steuern.
.gallery {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
grid-auto-columns: minmax(100px, 200px);
gap: 1rem;
}
grid-auto-columns auf minmax(100px, 200px).Spezifikationen
CSS Grid Layout Module 1 (Candidate Recommendation)
Browser-Unterstützung
Weitere Informationen
CSS Grid Layout Guide
Der Unterschied zwischen expliziten und impliziten Grids
Eine weitere Sammlung interessanter Fakten über CSS Grid
Verständnis des Unterschieds zwischen grid-template und grid-auto
IE10-kompatible Grid-Autoplatzierung mit Flexbox
Automatische Spaltengröße in CSS Grid: `auto-fill` vs `auto-fit`
Schau mal, Mama, keine Media Queries! Responsive Layouts mit CSS Grid
Verwandt
display
.element { display: inline-block; }
gap
.element { gap: 20px 30px; }
grid-template
.element { grid-template: 100px 1fr / 300px 1fr; }
grid-template-areas
.element { grid-template-areas: "header header" "sidebar main"; }
grid-template-columns
.element { grid-template-columns: 300px 1fr; }
grid-template-rows
.element { grid-template-rows: minmax(auto, 1fr) 3fr; }