CSS Almanac → Eigenschaften → G → grid-template-columns

grid-template-columns

Avatar of Mojtaba Seyedi
Mojtaba Seyedi am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Die CSS-Eigenschaft grid-template-columns ist Teil der CSS Grid Layout-Spezifikation und definiert die Spalten eines Grid-Containers, indem sie die Größe der Rasterspuren und deren Liniennamen angibt.

.sidebar-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
}

Es lohnt sich, den Unterschied zwischen Grid-Linien und Grid-Spuren zu beachten, wenn wir uns mit der Eigenschaft grid-template-columns befassen. Grid-Linien beziehen sich auf die Namen der Linien, die die Spalten und Zeilen des Rasters definieren. Grid-Spuren beziehen sich auf die Länge des Abstands zwischen den Grid-Linien.

In this example of a CSS grid layout, the grid lines are exposed and numbered along the bottom (the vertical grid column lines) and the right (the horizontal grid row lines). The track sizes are labeled along the top and left edges.

Syntax

grid-template-columns: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

Vollständige Definition

 
where:
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> = [ <line-names> | <name-repeat> ]+

where:
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

where:
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>
  • Initialwert: none
  • Gilt für: Grid-Container
  • Vererbt: nein
  • Berechneter Wert: Wie angegeben, jedoch mit relativen Längen, die in absolute Längen umgewandelt wurden
  • Animationstyp: einfache Liste von Längen, Prozentsätzen oder Berechnungen, vorausgesetzt, die einzigen Unterschiede sind in den Werten der Längen-, Prozent- oder Berechnungsbestandteile in der Liste.

Werte

/* Keyword value */
grid-template-columns: none;

/* <track-list> values */
grid-template-columns: 200px 1fr 180px;
grid-template-columns: [linename col1] 250px [line2];
grid-template-columns: [sidebar] 1fr [content] 2fr;
grid-template-columns: fit-content(50%);
grid-template-columns: minmax(200px, 1fr) minmax(100px, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/* <auto-track-list> values */
grid-template-columns: 100px repeat(auto-fill, 100px) 200px;
grid-template-columns: 100px repeat(2, 1fr auto) 200px repeat(3, 5fr);
grid-template-columns: minmax(150px, max-content) repeat(auto-fill, 180px) 15%;
grid-template-columns: [col1] 100px [col1-end] repeat(auto-fit, [line3] 400px);

/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial; /* same as `none` */
grid-template-columns: revert;
grid-template-columns: unset;

none

Dies ist der Standardwert. Die Verwendung des Werts none bedeutet, dass grid-template-columns keine expliziten Rasterspuren generiert, was wiederum bedeutet, dass Spalten implizit generiert werden (d.h. für Sie erstellt werden, ohne dass Sie sie explizit definieren müssen) und die Spurengröße durch die Eigenschaft grid-auto-columns definiert wird.

Beachten Sie, dass grid-template-columns nicht der einzige Weg ist, explizite Grid-Spaltenspuren zu erstellen. Dies kann auch über die Eigenschaft grid-template-areas erfolgen, die Rasterbereiche mit benutzerdefinierten Namen (z.B. sidebar, main usw.) ermöglicht.

Der Unterschied zwischen impliziten und expliziten Rastern wird in diesem Beitrag von Manuel Matuzovic gut zusammengefasst.

<length>

Dieser Wert kann jede gültige und nicht-negative CSS-Länge sein, wie z. B. px, em und rem, unter anderem, um die Spurengröße (d. h. die 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 Rasterspuren zu erstellen, indem Sie die Größe einer Spur als Bruchteil des verfügbaren Platzes im Raster-Container angeben. Auf diese Weise ändern sich die Spalten, wenn sich die Breite des Rasters ändert, was zu einem reaktionsfähigeren Raster führt.

Betrachten Sie zum Beispiel einen dreispaltigen Raster-Container, der 900px breit ist. Nehmen wir an, die Breite der ersten (linken) Spalte ist fest (d. h. sie ändert sich nicht) auf 300px, während die zweite Spalte eine fraktionale Einheit (1fr) und die dritte Spalte zwei fraktionale Einheiten (2fr) einnimmt.

.grid {
  display: grid;
  width: 900px;
  grid-template-columns: 300px 1fr 2fr;
}

Die zweiten beiden Spalten sind fraktional, daher nehmen sie den verbleibenden verfügbaren Platz ein. Und in diesem Fall ist der verfügbare Platz alles, was nach Abzug der festen Breite von 300px der ersten Spalte übrig bleibt. Danach verteilen sich die zweiten beiden Spalten auf das Übrige, je nachdem, wie viele Brüche sie erhalten.

In diesem Beispiel beträgt der verbleibende und verfügbare Platz 600px (d. h. 900px minus 300px). Die zweite Spalte erhält einen Bruch (1fr) dieses Platzes und die dritte Spalte erhält zwei Brüche (2fr). Lassen Sie uns einen Moment lang rechnen, um die Breite eines Bruchs von 600px zu ermitteln.

1fr = ([Grid Container Width] - [Fixed Column Width]) / [Sum of the flex factors]
1fr = (900px - 300px) / 3
1fr = 600px / 3
1fr = 200px

Aha! Ein Bruch ist 200px. Und da die zweite Spalte 1fr beträgt, muss sie ebenfalls 200px sein. Das lässt uns mit 400px verfügbarem Platz (900px – 300px – 200px), was zufällig doppelt so groß ist wie die zweite Spalte.

Aber warten Sie! Da ist noch mehr.

Denken Sie daran, dass ein Raster alle Lücken berücksichtigt, die zwischen den Rasterspuren hinzugefügt wurden, wenn es berechnet, wie viel verfügbarer Platz für die fraktionalen Spalten verteilt werden kann. Der Vorteil hierbei ist natürlich, dass unsere Spalten niemals den Raster-Container überlaufen.

Fügen wir dem vorherigen Beispiel eine Lücke hinzu.

.grid {
  display: grid;
  width: 900px;
  grid-template-columns: 300px 1fr 2fr;
  gap: 15px;
}

Ich weiß, dass wir hier einmal eine Lücke deklariert haben, aber es ist, als hätten wir zwei Lücken deklariert. Das liegt daran, dass es eine 15px Lücke zwischen jeder Spalte gibt (eine zwischen Spalte 1 und Spalte 2 und eine weitere zwischen Spalte 2 und Spalte 3). Das bedeutet, wir haben 30px an Lücken in unserem Raster, die in den verfügbaren Platz eingerechnet werden müssen.

1fr = ([Grid Container Width] - [Gaps] - [Fixed Column Width]) / [Sum of the flex factors]
1fr = (900px - 30px - 300px) / 3
1fr = 570px / 3
1fr = 190px

Ich weiß nicht, wie es Ihnen geht, aber ich mag keine manuelle Mathematik. Deshalb ist CSS Grid großartig – es kümmert sich um alles!

minmax(min, max)

Die Funktion minmax() akzeptiert zwei Argumente: einen minimalen Längenwert und einen maximalen Längenwert. Und das sagt einem Raster-Container, dass grid-template-columns nicht schmaler als der Mindestwert, aber nicht breiter als der Höchstwert sein kann. Unsere Anleitung zu CSS-Funktionen enthält eine ausführlichere Erklärung, wie die Funktion funktioniert.

Nehmen Sie das folgende Beispiel

grid-template-columns: 200px minmax(100px, 400px);

Hier gibt es zwei Spalten: eine, die 200px breit ist, und eine weitere, die als minmax(100px, 400px) ausgedrückt wird. Sieht seltsam aus, oder? Aber alles, was damit gesagt wird, ist, dass die zweite Spalte mindestens 100px Platz einnehmen muss, aber nicht mehr als 400px, nachdem die 200px der ersten Spalte berücksichtigt wurden.

Einfacher ausgedrückt: Solange mehr als 100px verfügbarer Platz vorhanden ist, kann die zweite Spalte bis zu 400px flexen, muss aber dort aufhören. 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 | auto

Daher ist dies ungültig, da der min-Wert ein Flex-Wert ist

grid-template-columns: minmax(1fr, 500px) 3fr;

Aber diese sind völlig gültig

grid-template-columns: minmax(auto, 1fr) 3fr;
grid-template-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-Spurengrößen durch die Eigenschaften align-content und justify-content gedehnt werden können, nehmen sie standardmäßig den verbleibenden Platz im Raster-Container ein (manuell, auto-matisch). Nichtsdestotrotz können auto-Spurengrößen einen Kampf gegen fr-Einheiten bei der Zuweisung des verbleibenden Platzes nicht gewinnen – sie passen sich der maximalen Größe ihres Inhalts an.

Schauen Sie sich das Ergebnis dieser beiden Track-Beispiele an

grid-template-columns: auto auto auto;
grid-template-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 einfach den gleichen Platz. Aber wenn wir in der Mitte eine fraktionale Einheit 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.

Two rows each containing three white boxes against an orange background. The top row boxes are evenly spaced with the auto keyword in them. The second row shows the two outer boxes squished toward the edges against the middle box that is labelled with 1 fractional unit, showing how those units affect the grid-template-columns property..
Veranschaulichung des Verhaltens der fr-Einheit neben Auto-Spuren.

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.“ (CSS ist großartig). Der min-content ist die Breite des Wortes „awesome“, da dies der breiteste Teil des Inhalts ist (breiter als „CSS is“). Wenn die Spalte schmaler wird, beginnt der Text, den Container zu überlaufen.

Im Code sieht das so aus

.grid {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 1rem;
}

…was zu etwas wie diesem führt

One row containing two boxes. The first box says CSS is Awesome and is as wide as the word awesome. The rest of the row is taken up by the box on the right that is sized with one fractional unit.
Veranschaulichung des Verhaltens des Schlüsselworts min-content in einem Raster-Layout.

max-content

Das Schlüsselwort max-content repräsentiert die kleinste Größe, die erforderlich ist, damit ein Element seinen gesamten Inhalt aufnehmen kann, ohne umgebrochen oder überlaufen zu werden. Ich weiß, ein Name, der „max“ enthält, lässt es so klingen, als ob wir es mit einer maximalen Größe zu tun haben, daher kann dieser Wert ein kleiner Denksport 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-template-columns: max-content 1fr;
  gap: 1rem;
}
A row containing two white boxes against an orange background. The box on the left says CSS is Awesome all on a single line and the box is as wide as the content. The box on the right fills up the remaining space in the row and is labelled with one fractional unit.
Veranschaulichung des Verhaltens des Schlüsselworts max-content in einem Raster-Layout.

fit-content( <length-percentage> )

Die Funktion fit-content() (es gibt eine solide Erklärung dazu in unserem Guide zu CSS-Funktionen) nutzt den verfügbaren Platz und akzeptiert einen Wert als prozentualen Anteil oder Länge als maximal zulässige Größe für eine Rasterspur, wobei sichergestellt wird, dass die Spur niemals über max-content hinausgeht und niemals unter ein Minimum schrumpft. Das Minimum ist oft, aber nicht immer, gleich dem min-content.

.grid {
  display: grid;
  grid-template-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 hinaus (d. h. die Breite der Wörter „fit-content(700px)“ in einer einzigen Zeile) – sie dehnt sich nur aus, um ihren Inhalt aufzunehmen. Die zweite Spalte hat jedoch viel mehr Inhalt und hört auf, sich auszudehnen, sobald sie eine Breite von 700px erreicht, was die für die Funktion festgelegte Grenze ist.

Three white boxes in a single row against an orange background. The first box is labeled fit-content(700px). The second box is labelled fit-content(700px) but with more content so it expands until it hits the 700px limit. The third box is labeled with one fractional unit.
Was wir hier also für die ersten beiden Spalten sagen, ist, dass sie so breit wie ihr maximaler Inhalt sein sollen, aber nur bis zu 700px. Wenn sie den gesamten Inhalt innerhalb dieser Grenze unterbringen können, großartig, hören Sie dort auf, wo max-content ist. Andernfalls zeigen Sie so viel wie möglich bis zu 700px an und brechen dann in zusätzliche Zeilen um.

[linename]

Obwohl Grid-Linien immer über ihre impliziten numerischen Namen referenziert werden können, können wir ihnen auch benutzerdefinierte Namen geben, um den Code in einem komplexeren Raster leichter verständlich zu machen. Jeder Linienname kann dann beim Positionieren von Grid-Elementen anhand von Liniennamen referenziert werden.

Grid-Linien können mehr als einen Namen haben, indem Namen in eckigen Klammern hinzugefügt und durch ein Leerzeichen getrennt werden.

grid-template-columns: [first content-start] 1fr [content-end sidebar-start] 300px [lastline];
Two white boxes in a single row against an orange background. The left box is labeled with one fractional unit. The right box is labeled with 300px. Black dashed lines indicate where the line tracks are and they are labeled with custom names, content-start, content-end, lastline.
Veranschaulichung von Liniennamen und numerischem Index eines Raster-Layouts. Die ersten beiden Linien haben mehr als einen Namen.

Beachten Sie, dass ein Linienname ein <custom-ident> ist, ein generischer Datentyp, der jede gültige CSS-Identifikation darstellt, die nicht als vordefiniertes Schlüsselwort in der Wertdefinition dieser Eigenschaft missverstanden werden könnte. Wir können also eine Linie super-awesome-spider-monkey nennen, aber keine globalen CSS-Werte, die Konflikte verursachen könnten, wie span, auto, inherit, initial und so weiter.

Auch solche Identifikatoren sind vollständig **fall-sensitiv**. Zum Beispiel behandelt CSS sidebar-end und Sidebar-Name als zwei völlig unterschiedliche, nicht zusammenhängende Liniennamen. Liniennamen können auch explizit mit der Eigenschaft grid-template-columns oder implizit durch benannte Rasterbereiche mit der Eigenschaft grid-template-areas zugewiesen werden.

repeat([ <positive-integer> | auto-fill | auto-fit ] , <track-list>)

Die Funktion repeat() ist eine effiziente Möglichkeit, die Anzahl der grid-template-columns zu definieren, wenn die Spalten gleich sind. Die Funktion nimmt die Anzahl der Spalten gefolgt von der Spaltengröße.

/* Writing this */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

/* is the same as this: */
grid-template-columns: repeat(5, 1fr);

Ein weiteres Beispiel, diesmal aus der Spezifikation.

grid-template-columns: 10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end] 10px;

/* same Ss above, except easier to write */
grid-template-columns: repeat(4, 10px [col-start] 250px [col-end]) 10px;

auto-fill und auto-fit

Neben einer Ganzzahl, die die Anzahl der Wiederholungen angibt, sind auch die beiden Schlüsselwörter auto-fill und auto-fit als erstes Argument der Funktion repeat() zulässig.

Im Gegensatz zu einer festen Anzahl von Wiederholungen ermöglichen diese Schlüsselwörter, so viele Spalten einer bestimmten Größe anzuzeigen, wie in eine Zeile eines Raster-Containers passen.

Die beiden Schlüsselwörter auto-fill und auto-fit sind sich ziemlich ähnlich. Beide versuchen, so viele Grid-Elemente wie möglich automatisch in eine Rasterspalte einzupassen, bevor sie zu einer neuen Zeile umbrechen. Der Unterschied? auto-fill füllt so viele Spalten aus, wie es kann, und wenn ihm die Elemente ausgehen, lässt es den verbleibenden Platz leer. auto-fit hingegen vergrößert die Breite der Spalten, sodass kein leerer Platz übrig bleibt.

Two rows office white boxes against an orange background. Both have an example of grid-template-columns, but one uses the auto-fill keyword and the other uses auto-fit.
Veranschaulichung, wie auto-fill leere Spalten erstellt, auto-fit aber bestehende dehnt.

Es gibt ein paar Einschränkungen bei der Verwendung der Funktion repeat(), die erwähnenswert sind.

  • Es ist nicht möglich, eine repeat()-Funktion innerhalb einer repeat()-Funktion zu verschachteln.
/* This is invalid */
grid-template-columns: repeat(4, 1fr repeat(5, 1fr));
  • Es akzeptiert keine intrinsischen oder flexiblen Längenwerte (z. B. fr-Einheiten) bei Verwendung von auto-fill oder auto-fit. Es akzeptiert nur eine explizite Spurengröße, damit die Anzahl der in den Raster-Container passenden Spalten berechnet werden kann.
/* This is invalid */
grid-template-columns: repeat(auto-fit, 1fr);
  • Es ist jedoch in Ordnung, intrinsische oder flexible Größen als zweiten Wert der Funktion zu verwenden, solange der erste Wert eine positive Zahl ist.
/* These are invalid */
grid-template-columns: repeat(auto-fit, 1fr);
grid-template-columns: repeat(min-content, 1fr);

/* This is valid */
grid-template-columns: repeat(6, 1fr);
  • Es kann nur einmal in der grid-template-columns-Spurenliste verwendet werden, wenn auto-fill oder auto-fit verwendet wird. Wir können jedoch mehrere repeat()-Funktionen verwenden, solange der zweite Wert fest ist.
/* These are invalid */
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(auto-fill, minmax(5rem, auto));
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(3, 1fr);

/* This is valid */
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(3, 200px);

subgrid

Subgrid gilt als experimentell und wird zum Zeitpunkt der Erstellung dieses Textes nur in Firefox unterstützt.

Kann man ein Raster innerhalb eines Rasters haben? Natürlich können wir das! Das ist dank des Schlüsselworts subgrid möglich. Die Deklaration dieses Wertes ermöglicht es dem inneren (Kind-)Raster, die Spurenlinien des äußeren (Eltern-)Rasters zu teilen, was konsistentere Spurenlinien ohne Neudeklaration ermöglicht.

Nehmen wir also an, wir haben ein Raster in einem Raster.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.grid-container .grid-item {
  display: grid;  
}

Wir können dieses verschachtelte Raster in ein subgrid umwandeln, um die Spurenlinien mit dem Elternraster zu teilen.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.grid-container .grid-item {
  display: grid;  
  grid-template-columns: subgrid;
}

Nun werden die Elemente des Kind-Rasters gemäß der Positionierung und Größenbestimmung des Hauptraster-Containers platziert und dimensioniert. Betrachten wir zum Beispiel das folgende HTML.

<div class="grid">
  <div class="item"></div>

  <div class="item subgrid">
    <div class="subitem"></div>
    <div class="subitem"></div>
  </div>

  <div class="item"></div>
  <div class="item"></div>
</div>

Jetzt machen wir ein Subgrid.

 .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Establish a grid with 4 tracks */
}
.item {  
  grid-column: 1/-1; /* Make all items as wide as the 4 tracks */
}
.subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 3/-1; /* Make the subgrid item size, half of the other items */
}

Hier sehen Sie, dass sich die Subgrid-Elemente an die Spurengrößen des Elternrasters anpassen.

A four-by-four grid of white boxes. The second row contains two subgrid items that are flush to the third and four tracks of the parent grid. All of the track lines are labeled and show how the subgrid items use the parent tracks but still start with a track line of one.
Ein Subgrid-Layout.

Die Lücken in einem Subgrid werden vom Elternteil geerbt, können aber durch einen anderen gap-Wert auf dem Subgrid-Element überschrieben werden.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem; /* This is inherited by the child grid */
}
.grid-container .grid-item {
  display: grid;  
  grid-template-columns: subgrid;
  gap: 0.5rem; /* This overrides the parent grid's gap */
}

Ein Subgrid hat seine eigenen Liniennummern. Wenn Sie beispielsweise die Liniennummer 1 in Ihrem Subgrid verwenden, verweist diese auf die erste Linie des Kind-Rasters, nicht des Elternteils. Selbst wenn ein Subgrid an der dritten Spurenlinie des Elternrasters beginnt, ist die erste Spurenlinie des Subgrids immer noch 1 und nicht 3.

Und natürlich können wir in einem Subgrid auch benutzerdefinierte Rasterliniennamen deklarieren.

.grid-container .grid-item {
  display: grid;  
  grid-template-columns: subgrid [sidebar-start] [sidebar-end] [main-start] [main-last];
}

Oh, und wir können die repeat()-Funktion hier ebenfalls verwenden, um Spurenliniennamen anzugeben.

.grid-container .grid-item {
  display: grid;  
  grid-template-columns: subgrid repeat(2, [a] 1fr [b]);
}

Eine Sache, die Sie dabei beachten sollten, ist, dass die Funktion repeat() nebeneinander liegende Spurenliniennamen zusammenführt.

/* These are equivalent */
grid-template-columns: repeat(2, [a] 1fr [b]);
grid-template-columns: [a] 1fr [b a] 1fr [b];

Beachten Sie, dass in einem Subgrid keine impliziten Spuren in dieser Dimension vorhanden sein können. Wenn Sie also mehr Grid-Elemente hinzufügen, werden diese in den vorhandenen expliziten Spuren des Subgrids platziert. Sie können das Ergebnis des Hinzufügens eines weiteren Kindes zum Subgrid des vorherigen Beispiels im folgenden Bild sehen.

The same subgrid illustration but showing three grid items on two rows that are squished together with no vertical spacing.
Subgrid generiert keine impliziten Spuren.

masonry

Sie wissen, was wir mit Masonry meinen, oder? Es ist dieses coole Layout, bei dem Elemente in einem Raster sozusagen gekachelt und zusammengesetzt werden, basierend auf dem vertikalen Platz, der in einer Spalte verfügbar ist. Es wurde vor Jahren von David DeSandro's JavaScript-Bibliothek mit demselben Namen populär gemacht.

An illustration of a five-column masonry layout of photos with thick rounded white borders against an orange background.
Ein Masonry-Layout.

Dank CSS Grid wird Masonry etwas sein, das wir ohne JavaScript realisieren können. Zum Zeitpunkt der Erstellung dieses Textes ist es jedoch noch ein weiter Weg, da es Teil von Level 3 der CSS Grid-Spezifikation ist, die sich derzeit im Editor's Draft befindet. Es ist jedoch in Firefox hinter einem Flag verfügbar.

Screenshot of the Firefox about:config settings with a search for masonry and the option to enable the masonry flag.

Wir werden wahrscheinlich Änderungen an der Spezifikation sehen, bis sie tatsächlich veröffentlicht wird. Aber so sieht es derzeit aus.

.container {
  display: grid;
  grid-template-columns: masonry;
  grid-template-rows: repeat(4, 1fr);
}

Beispiele

Juhu, Demo-Zeit! Ich habe ein paar Beispiele, die die Leistungsfähigkeit der Eigenschaft grid-template-columns zeigen, auf die Sie bei der Arbeit mit einem CSS Grid-Layout wahrscheinlich stoßen werden.

Ein einfaches Sidebar-Layout kann mit folgendem CSS erreicht werden.

.layout {
  display: grid;
  grid-template-columns: 1fr 250px;
}

Und hier ist das Ergebnis.

Responsives und flexibles Kartenlayout mit dynamischer Anzahl von Elementen

Dies ist vielleicht der magischste Ausschnitt von allen. Sagen wir, Sie möchten so viele Spalten wie möglich in eine Rasterzeile packen, bevor diese zu einer neuen Zeile umbricht. Mit diesem Ausschnitt kombinieren wir die Kräfte von repeat(), auto-fit und minmax(), um genau das zu tun.

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Auf diese Weise erhalten wir eine sich wiederholende Anzahl von Spalten (dank repeat()), die den gesamten verfügbaren Platz des Rasters ausfüllen (dank auto-fit), während sie niemals schmaler als 250px werden und jede einen gleichen Anteil am Platz einnimmt (dank minmax()).

Ausrichtung von Formularelementen

Haben Sie sich jemals mit CSS herumgeschlagen, um Formularsteuerelemente auszurichten? Der klassische Fall ist ein Formular mit gestapelten Texteingaben, bei denen die Eingabebezeichnung links und die Eingabe rechts steht. Wenn die Bezeichnungen ungleichmäßig sind, ist auch der Startpunkt der Eingaben ungleichmäßig, was dazu führt, dass die Dinge eher wie eine versetzte Treppe aussehen als wie ein ordentlich gestapeltes Formular.

Mit CSS Grid können wir jedoch der linken Spalte, die die Eingabebezeichnung enthält, sagen, dass sie max-content anzeigen soll, und der rechten Spalte, die die Eingaben enthält, dass sie den Rest des Platzes einnehmen soll.

grid-template-columns: max-content 1fr;

Keine zusätzlichen Elemente oder Wrapper erforderlich!

Gleiche Spalten

Wenn Sie die fr-Einheit verwenden, um die Spalten eines Rasters zu skalieren, wird der verfügbare Platz nachdem der Inhalt bestimmt hat, wie viel Platz jede Spalte benötigt, verteilt. Wenn Sie drei gleich große Spalten wünschen, denken Sie vielleicht so:

grid-template-columns: 1fr 1fr 1fr;

Und das ist nicht ganz falsch! Aber da die Mindestgröße eines Raster-Layouts auto ist, hängt es von der Länge des Inhalts ab, um wirklich gleiche Spalten zu erhalten. Also nehmen wir die Mindestgröße heraus, indem wir bei jeder Spalte einen Nullwert in den minmax()-Funktionen angeben, wie hier:

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);

Browser-Unterstützung

Weitere Informationen

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.
Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.

© .