web-dev-qa-db-ger.com

CSS-Gitterumhüllung?

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

In meinem Fall habe ich eine nicht deterministische Anzahl von Elementen, die ich in ein Raster einfügen möchte, und ich möchte, dass dieses Gitter umbrochen wird. Mit der Flexbox kann ich Dinge nicht zuverlässig verlässlich platzieren. Ich möchte auch eine Reihe von Medienanfragen 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>

Und hier ist ein Gif:

 gif of what I'm seeing

Als Nebenbemerkung, wenn mir jemand sagen kann, wie ich es vermeiden könnte, die Breite aller Elemente wie bei grid-template-columns anzugeben, wäre das toll. Ich würde es vorziehen, wenn die Kinder ihre eigene Breite angeben.

57
kentcdodds

Verwenden Sie entweder auto-fill oder auto-fit als Wiederholungsnummer der repeat() -Notation.

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

auto-fill

Wenn auto-fill als Wiederholungsnummer angegeben ist, wenn das Raster Container hat eine bestimmte Größe oder maximale Größe in der betreffenden Achse, dann Die Anzahl der Wiederholungen ist die größtmögliche positive ganze Zahl Dies führt nicht dazu, dass das Raster 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>

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

Using auto-fill as the repetition number of the repeat() notation

In diesem Fall können im obigen Beispiel (siehe Bild) nur 5 Spuren in den Grid-Container passen, ohne zu überlaufen. Es gibt nur 4 Elemente in unserem Raster, sodass ein fünfter als leere Spur innerhalb des verbleibenden Platzes erstellt wird.

Der Rest des verbleibenden Speicherplatzes (Spur 6) beendet das explizite Gitter. Dies bedeutet, dass nicht genügend Platz für eine andere Spur vorhanden war.


auto-fit

Das Schlüsselwort auto-fit verhält sich wie auto-fill, nur dass nach Rasterelement-Platzierungsalgorithmus leere Spuren im verbleibenden Speicherplatz auf 0 reduziert werden.

.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>

Das Raster wiederholt immer noch so viele Spuren wie möglich, ohne dass der Container überläuft. Die leeren Spuren werden jedoch auf 0 reduziert.

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

Using auto-fit as the repetition number of the repeat() notation

Im Gegensatz zum auto-fill-Bildbeispiel 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 fällt auf, wenn die Funktion minmax() verwendet wird.

Verwenden Sie minmax(186px, 1fr), um die Elemente von 186px bis 186px plus einem Bruchteil des verbleibenden Speicherplatzes im Gittercontainer zu sortieren.

Wenn Sie auto-fill verwenden, werden die Elemente größer, sobald keine leeren Spuren mehr vorhanden sind.

.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>

Bei Verwendung von auto-fit füllen die Elemente den verbleibenden Speicherplatz, da alle leeren Spuren auf 0px reduziert werden.

.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>


Spielplatz:

CodePen

Überprüfen der automatischen Füllspuren

auto-fill


Überprüfen von automatisch angepassten Spuren

auto-fit

93
Ricky

Sie möchten entweder auto-fit oder auto-fill in der Funktion repeat():

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

Der Unterschied zwischen beiden wird deutlich, wenn Sie auch eine minmax() verwenden, um flexible Spaltengrößen zu berücksichtigen:

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

Dadurch können sich Ihre Säulen in der Größe verändern, von 186 Pixel bis zu gleich breiten Säulen, die sich über die gesamte Breite des Containers erstrecken. auto-fill erstellt so viele Spalten, wie in die Breite passen. Wenn beispielsweise fünf Spalten passen, obwohl Sie nur vier Rasterelemente haben, wird eine fünfte leere Spalte angezeigt:

 enter image description here

Wenn Sie stattdessen auto-fit verwenden, werden leere Spalten vermieden und Ihre Spalte bei Bedarf noch weiter gedehnt:

 enter image description here

13
keithjgrant

suchen Sie nach 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 minmax verwenden und auto als zweites Argument übergeben:

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-fit anstelle von auto-fill verwenden.

6
alanbuchanan

Ich hatte eine ähnliche Situation. Zusätzlich zu Ihrer Arbeit wollte ich meine Spalten im Container zentrieren, ohne zuzulassen, dass leere Spalten nach links oder rechts verschoben werden:

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

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

Meine Methode ist ein übergeordnetes div mit festDimensionen. Der Rest passt nur den Inhalt in das Div entsprechend.

Dies wird neu skalieren die Bilder unabhängig vom 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>
0
I haz kode