CSS-Rasterumbruch

126

Ist es möglich, einen CSS-Grid-Wrap ohne Medienabfragen zu erstellen?

In meinem Fall habe ich eine nicht deterministische Anzahl von Elementen, die in ein Raster eingefügt werden sollen, und ich möchte, dass dieses Raster umbrochen wird. Mit Flexbox kann ich die Dinge nicht zuverlässig platzieren. Ich möchte auch eine Reihe von Medienabfragen vermeiden.

Hier ist ein Beispielcode :

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Erweitern Sie das Snippet

Und hier ist ein GIF-Bild:

Als Randnotiz grid-template-columnswäre es großartig , wenn mir jemand sagen könnte, wie ich es vermeiden könnte, die Breite aller Elemente anzugeben, mit denen ich zusammen bin . Ich würde es vorziehen, wenn die Kinder ihre eigene Breite angeben.

html css css-grid kentcdodds
quelle

2

grid-template-columns: auto auto auto auto;funktioniert in diesem Fall? =)

Jakub Chlebowicz

219

Verwenden Sie entweder auto-filloder auto-fitals Wiederholungsnummer der repeat()Notation.

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

`auto-fill`

Wenn auto-fillals Wiederholungszahl angegeben wird und der Gittercontainer eine bestimmte Größe oder maximale Größe in der relevanten Achse hat, ist die Anzahl der Wiederholungen die größtmögliche positive Ganzzahl, die nicht dazu führt, dass das Gitter seinen Gittercontainer überläuft.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Erweitern Sie das Snippet

Das Raster wiederholt so viele Spuren wie möglich, ohne dass der Container überläuft.

In diesem Fall können im obigen Beispiel (siehe Bild) nur 5 Spuren in den Gittercontainer passen, ohne überzulaufen. Es gibt nur 4 Elemente in unserem Raster, sodass ein fünftes als leere Spur innerhalb des verbleibenden Bereichs erstellt wird.

Der Rest des verbleibenden Platzes, Spur 6, beendet das explizite Raster. Dies bedeutet, dass nicht genügend Platz vorhanden war, um eine andere Spur zu platzieren.

`auto-fit`

Das auto-fitSchlüsselwort verhält sich wie das gleiche auto-fill, außer dass nach dem Platzierungsalgorithmus für Rasterelemente alle leeren Spuren innerhalb des verbleibenden Bereichs reduziert werden 0.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Erweitern Sie das Snippet

Das Raster wiederholt immer noch so viele Spuren wie möglich, ohne den Container zu überlaufen, aber die leeren Spuren werden auf reduziert 0.

Eine kollabierte Spur wird so behandelt, als hätte sie eine feste Spurgrößenfunktion von 0px.

Im Gegensatz zum auto-fillBildbeispiel wird die leere fünfte Spur reduziert und das explizite Raster direkt nach dem vierten Element beendet.

`auto-fill` vs. `auto-fit`

Der Unterschied zwischen den beiden ist spürbar, wenn die minmax()Funktion verwendet wird.

Verwenden minmax(186px, 1fr) diese Option, um die Elemente von 186pxbis zu 186pxeinem Bruchteil des verbleibenden Platzes im Rastercontainer zu sortieren.

Bei der Verwendung auto-fillwachsen die Elemente, sobald kein Platz mehr für leere Spuren vorhanden ist.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Erweitern Sie das Snippet

Bei Verwendung auto-fitwerden die Elemente vergrößert, um den verbleibenden Platz zu füllen, da alle leeren Spuren reduziert sind 0px.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Erweitern Sie das Snippet

Spielplatz:

CodePen

Überprüfen der Spuren zum automatischen Ausfüllen

Überprüfen von Auto-Fit-Spuren

Ricky
quelle

3

Gibt es eine Möglichkeit, die in der nächsten Zeile stehenden zu zentrieren?

Kentcdodds

Genau wie Sie es mit Flexbox tun würden, verwenden Sie das display: gridElementjustify-content: center

Spittal

Lieber @Ricky Wie man es so macht, dass die erste Eigenschaft von minmax, z. repeat(auto-fill, minmax(186px, 1fr));ist nicht Pixel, aber nur solange das div Text enthält?

Mesqueeb

1

@mesqueeb Es ist nicht möglich, eine bestimmte Größe wird benötigt. Sie können sich diese Antwort für weitere Details ansehen .

Ricky

1

Gibt es eine Möglichkeit, es so zu gestalten, dass, wenn es in die nächste Zeile gehen muss, zwei der Elemente anstatt nur eines herunterfallen? Also wie von 4 zu 2 zu 1 und nicht 4 zu 3 zu 2 zu 1?

Sammiepls

16

Sie möchten entweder auto-fitoder auto-fillinnerhalb der repeat()Funktion:

grid-template-columns: repeat(auto-fit, 186px);

Der Unterschied zwischen den beiden wird deutlich, wenn Sie auch a verwenden minmax(), um flexible Spaltengrößen zu ermöglichen:

grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

Auf diese Weise können sich Ihre Spalten in der Größe von 186 Pixel bis zu Spalten gleicher Breite über die gesamte Breite des Containers biegen. auto-fillerstellt so viele Spalten, wie in die Breite passen. Wenn beispielsweise fünf Spalten passen, obwohl Sie nur vier Rasterelemente haben, gibt es eine fünfte leere Spalte:

Wenn Sie auto-fitstattdessen verwenden, werden leere Spalten verhindert und Ihre Spalten bei Bedarf weiter gestreckt:

keithjgrant
quelle

7

Sie suchen vielleicht auto-fill:

grid-template-columns: repeat(auto-fill, 186px);

Demo: http://codepen.io/alanbuchanan/pen/wJRMox

Um den verfügbaren Speicherplatz effizienter zu nutzen, können Sie das zweite Argument verwenden minmaxund übergeben auto:

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

Demo: http://codepen.io/alanbuchanan/pen/jBXWLR

Wenn Sie die leeren Spalten nicht möchten, können Sie auto-fitstattdessen verwenden auto-fill.

Alanbuchanan
quelle

2

Gibt es eine Möglichkeit, die in der nächsten Zeile stehenden zu zentrieren?

Kentcdodds

3

Ich hatte eine ähnliche Situation. Zusätzlich zu dem, was Sie getan haben, wollte ich meine Spalten im Container zentrieren, ohne dass leere Spalten für sie links oder rechts stehen:

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}

Farrellw
quelle

Re „und ermöglicht nicht leere Spalten für sie“ : Wollen Sie damit sagen „ während nicht leere Spalten erlauben entweder für sie“ ( → zu → entweder )? Oder „während es nicht leere Spalten für sie“ (ohne zu )? Oder etwas anderes (es scheint nicht zu rechnen)?

Peter Mortensen

1

Hier ist mein Versuch. Entschuldigen Sie den Flaum, ich fühlte mich besonders kreativ.

Meine Methode ist ein Elternteil divmit festen Abmessungen . Der Rest passt nur den Inhalt in diesem Div entsprechend an.

Dies wird neu skaliert die Bilder unabhängig von dem Seitenverhältnis. Es wird auch kein hartes Zuschneiden geben .

body {
    background: #131418;
    text-align: center;
    margin: 0 auto;
}

.my-image-parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    line-height: 300px; /* Should match your div height */
    text-align: center;
    font-size: 0;
}

/* Start demonstration background fluff */
    .bg1 {background: url(https://unsplash.it/801/799);}
    .bg2 {background: url(https://unsplash.it/799/800);}
    .bg3 {background: url(https://unsplash.it/800/799);}
    .bg4 {background: url(https://unsplash.it/801/801);}
    .bg5 {background: url(https://unsplash.it/802/800);}
    .bg6 {background: url(https://unsplash.it/800/802);}
    .bg7 {background: url(https://unsplash.it/802/802);}
    .bg8 {background: url(https://unsplash.it/803/800);}
    .bg9 {background: url(https://unsplash.it/800/803);}
    .bg10 {background: url(https://unsplash.it/803/803);}
    .bg11 {background: url(https://unsplash.it/803/799);}
    .bg12 {background: url(https://unsplash.it/799/803);}
    .bg13 {background: url(https://unsplash.it/806/799);}
    .bg14 {background: url(https://unsplash.it/805/799);}
    .bg15 {background: url(https://unsplash.it/798/804);}
    .bg16 {background: url(https://unsplash.it/804/799);}
    .bg17 {background: url(https://unsplash.it/804/804);}
    .bg18 {background: url(https://unsplash.it/799/804);}
    .bg19 {background: url(https://unsplash.it/798/803);}
    .bg20 {background: url(https://unsplash.it/803/797);}
/* end demonstration background fluff */

.my-image {
    width: auto;
    height: 100%;
    vertical-align: middle;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="my-image-parent">
    <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg4"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg5"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg6"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg7"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg8"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg9"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg10"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg11"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg12"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg13"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg14"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg15"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg16"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg17"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg18"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg19"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg20"></div>
</div>

Erweitern Sie das Snippet

Ich habe Kode
quelle

CSS-Rasterumbruch

Antworten:

auto-fill

auto-fit

auto-fill vs. auto-fit

CodePen

`auto-fill`

`auto-fit`

`auto-fill` vs. `auto-fit`