webentwicklung-frage-antwort-db.com.de

Füllen Sie die Spalten des Raster-Containers nicht die Zeilen

Ich möchte, dass sich mein Raster vertikal ausfüllt:

1 4 7 
2 5 8
3 6 9
... arbitrary number of additional rows.

Stattdessen füllt es sich horizontal wie folgt aus:

1 2 3
4 5 6
7 8 9

Ich möchte die Anzahl der Spalten in meinem Raster angeben, nicht die Anzahl der Zeilen.

So sieht mein div beim Inline-CSS-Styling aus:

<div style="display:grid; grid-template-columns:1fr 1fr 1fr;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Es ist wichtig, dass mein Raster 3 Spalten breit ist, aber ich möchte, dass die Elemente nach Spalten und nicht nach Zeilen gefüllt werden. Ist das in CSS Grid möglich? Ich habe dieses https://css-tricks.com/snippets/css/complete-guide-grid/ gelesen, aber nichts über die Bestellung gesehen.

CSS Flexbox hat flex-direction, gibt es nicht ein solches Attribut für CSS Grid?

16
Glen Pierce

Für ein vertikal fließendes Raster, das nach Bedarf neue Spalten erstellt und Zeilen nicht definiert werden, sollten Sie CSS - Mehrspaltiges Layout ( example ) verwenden. CSS-Rasterlayout (zumindest die aktuelle Implementierung - Level 1 ) kann diese Aufgabe nicht ausführen. Hier ist das Problem:

Im CSS-Raster-Layout besteht eine umgekehrte Beziehung zwischen den Eigenschaften grid-auto-flow und grid-template-rows/grid-template-columns.

Mit grid-auto-flow: row (der Standardeinstellung) und grid-template-columns, die beide definiert sind, fließen die Rasterelemente gut in horizontaler Richtung und erstellen bei Bedarf automatisch neue Zeilen. Dieses Konzept wird im Code in der Frage veranschaulicht.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Mit einem Wechsel zu grid-template-rows stapeln sich Rasterelemente jedoch in einer einzelnen Spalte.

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Es werden keine automatischen Spalten mit grid-auto-flow: row und grid-template-rows erstellt. grid-template-columns muss definiert sein (daher die umgekehrte Beziehung zu grid-auto-flow).

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Dasselbe Verhalten trifft auf das umgekehrte Szenario zu.

Wenn sowohl grid-auto-flow: column als auch grid-template-rows definiert sind, werden die Gitterelemente in vertikaler Richtung fließend verschoben und bei Bedarf automatisch neue Spalten erstellt.

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Bei einem Wechsel zu grid-template-columns stapeln sich Rasterelemente jedoch in einer einzigen Zeile. (Dies ist das Problem, nach dem die meisten Leute fragen, auch in dieser Frage.)

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Es werden keine automatischen Zeilen erstellt. Dies erfordert, dass grid-template-rows definiert wird. (Dies ist die Lösung, die am häufigsten bereitgestellt wird, wird jedoch normalerweise abgelehnt, da die Layouts eine variable Anzahl von Zeilen haben.)

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Betrachten Sie daher eine mehrspaltige Layoutlösung , wie oben vorgeschlagen.

Spec Referenz: 7.7. Automatische Platzierung: Die grid-auto-flow-Eigenschaft

14
Michael_B

Eine andere Option ist das Löschen von CSS-Grids und das Verwenden von CSS-Spalten, die genau das tun, was Sie verlangen, und eine wesentlich bessere Browserunterstützung bieten.

.csscolumn {
  -webkit-column-count: 3;  /* Chrome, Safari, Opera */
  -moz-column-count: 3;     /* Firefox */
  column-count: 3;
}

/* styling for this demo */
.csscolumn {
  width: 50%;
}
.csscolumn + .csscolumn {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid;
}
<div class="csscolumn">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

<div class="csscolumn">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="csscolumn">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

7
LGSon

Sie sind eher eine technische Übung als eine praktische Lösung. Je nach Anzahl der Elemente können Sie Ihr Ergebnis mit bestimmten Stilen irgendwie erzielen

Mal sehen, wie es funktioniert:

.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6) ~ .item:nth-child(n+3)

der erste Wähler 

.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6)

ist aktiv ist unsere Liste hat zwischen 4 und 6 Elemente. In diesem Fall befindet sich ein Artikel sowohl im ersten als auch im zweiten Zustand.

In diesem Fall möchten wir, dass sich 2 Elemente in der ersten Spalte befinden. ziele auf die verbleibenden Gegenstände (ab dem dritten) mit 

~ .item:nth-child(n+3)

und setzen Sie sie in die zweite Spalte. Eine ähnliche Regel jetzt für den 5. und darüber

~ .item:nth-child(n+5)

fügt die anderen Elemente in die dritte Spalte ein. Diese beiden Regeln haben dieselbe Priorität und zielen auf beide Elemente ab. Daher ist es wichtig, dass sie in dieser Reihenfolge angezeigt werden.

Wir müssen ähnliche Regeln bis zur maximalen Anzahl an Elementen wiederholen, die vorhanden sein können (wahrscheinlich ein Job für einen Präprozessor). 

var elements = 5;

function add () {
    var ctn = document.getElementById("container");
    var ele = document.createElement("div");
    elements ++;
    ele.innerHTML = elements;
    ele.className = "item";
    ctn.appendChild (ele);
}
#container {
  width: 90%;
  border: solid 1px red;
  display: grid;
  grid-template-rows: 33% 33% 33%;
  grid-auto-flow: column dense;
}

.item {
  width: 90%;
  height: 80px;
  background-color: lightgreen;
  margin: 10px;
  grid-column: 1;
}

.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6) ~ .item:nth-child(n+3) {
  background-color: yellow;
  grid-column: 2;
}

.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6) ~ .item:nth-child(n+5) {
  background-color: tomato;
  grid-column: 3;
}

.item:first-child:nth-last-child(n+7):nth-last-child(-n + 9) ~ .item:nth-child(n+4) {
  background-color: burlywood;
  grid-column: 2;
}

.item:first-child:nth-last-child(n+7):nth-last-child(-n + 9) ~ .item:nth-child(n+7) {
  background-color: blueviolet;
  grid-column: 3;
}

.item:first-child:nth-last-child(n+10):nth-last-child(-n + 12) ~ .item:nth-child(n+5) {
  background-color: darkcyan;
  grid-column: 2;
}

.item:first-child:nth-last-child(n+10):nth-last-child(-n + 12) ~ .item:nth-child(n+9) {
  background-color: chartreuse;
  grid-column: 3;
}

.item:first-child:nth-last-child(n+13):nth-last-child(-n + 15) ~ .item:nth-child(n+6) {
  background-color: yellow;
  grid-column: 2;
}

.item:first-child:nth-last-child(n+13):nth-last-child(-n + 15) ~ .item:nth-child(n+11) {
  background-color: tomato;
  grid-column: 3;
}
<button onclick="add()">Add</button>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>

4
vals

Die einfachste Methode, die ich je gesehen habe:

.grid {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 1px;
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: repeat(5, auto);    
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
</div>

2
RayYates

Hier ist ein auf CSS Grid basierender Ansatz, der Javascript und CSSOM verwendet, um ein Paar einzufügen:

transform: translate(x, y)

regeln in ein generiertes Stylesheet.

Die beiden Transformationsregeln (es gibt nur zwei, basierend auf dem Gitter, das 3 Spalten breit ist, verschieben die unteren Elemente des ursprünglichen einspaltigen Gitters und verschieben die Elemente nach oben und nach rechts.

Folglich können Sie dem einspaltigen Raster eine beliebige Anzahl von Elementen hinzufügen, und das Skript passt das Raster immer so an, dass es drei Spalten hat, die mehr oder weniger gleich groß sind.

Wenn die Spalten nicht exakt gleich groß sein können, ist die größere Spalte immer die erste und/oder die zweite Spalte (niemals die rechte, dritte Spalte). 

Arbeitsbeispiel (9 Gittereinheiten):

var numberOfColumns = 3;

document.head.appendChild(document.createElement('style'));
var newStyles = document.styleSheets[(document.styleSheets.length - 1)];

var myGrid = document.getElementsByClassName('my-grid')[0];
var myGridUnits = myGrid.getElementsByTagName('div');

var tallColumn = Math.ceil(myGridUnits.length /  numberOfColumns);
var shortColumn = Math.floor(myGridUnits.length / numberOfColumns);

var nextUnit = 1;
var unitsRemaining = myGridUnits.length;
var xTranslate, yTranslate;
var columns = [];

for (var i = 0; i < (numberOfColumns - 1); i++) {


    if (unitsRemaining % shortColumn === 0) {
    
        columns.Push(shortColumn);
    }

    else {

        columns.Push(tallColumn);
    }
    
    nextUnit += columns[(columns.length - 1)];
    unitsRemaining -= columns[(columns.length - 1)];
    
    xTranslate = ((i + 1) * 48);
    yTranslate = 0;
    columns.forEach(function(columnHeight){yTranslate += (columnHeight * 48);});
                         
    newStyles.insertRule('.my-grid div:nth-of-type(n+' + nextUnit + ') {transform: translate(' + xTranslate + 'px, ' + (0 - (yTranslate)) + 'px);}', newStyles.cssRules.length);

}
.my-grid {
display: inline-grid;
grid-row-gap: 6px;
}

.my-grid div {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid rgb(127, 127, 127);
}
<div class="my-grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>


Arbeitsbeispiel (10 Gittereinheiten):

var numberOfColumns = 3;

document.head.appendChild(document.createElement('style'));

var newStyles = document.styleSheets[(document.styleSheets.length - 1)];

var myGrid = document.getElementsByClassName('my-grid')[0];
var myGridUnits = myGrid.getElementsByTagName('div');

var tallColumn = Math.ceil(myGridUnits.length /  numberOfColumns);
var shortColumn = Math.floor(myGridUnits.length / numberOfColumns);

var nextUnit = 1;
var unitsRemaining = myGridUnits.length;
var xTranslate, yTranslate;
var columns = [];

for (var i = 0; i < (numberOfColumns - 1); i++) {


    if (unitsRemaining % shortColumn === 0) {
    
        columns.Push(shortColumn);
    }

    else {

        columns.Push(tallColumn);
    }
    
    nextUnit += columns[(columns.length - 1)];
    unitsRemaining -= columns[(columns.length - 1)];
    
    xTranslate = ((i + 1) * 48);
    yTranslate = 0;
    columns.forEach(function(columnHeight){yTranslate += (columnHeight * 48);});
                         
    newStyles.insertRule('.my-grid div:nth-of-type(n+' + nextUnit + ') {transform: translate(' + xTranslate + 'px, ' + (0 - (yTranslate)) + 'px);}', newStyles.cssRules.length);

}
.my-grid {
display: inline-grid;
grid-row-gap: 6px;
}

.my-grid div {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid rgb(127, 127, 127);
}
<div class="my-grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>


Arbeitsbeispiel (11 Gittereinheiten):

var numberOfColumns = 3;

document.head.appendChild(document.createElement('style'));

var newStyles = document.styleSheets[(document.styleSheets.length - 1)];

var myGrid = document.getElementsByClassName('my-grid')[0];
var myGridUnits = myGrid.getElementsByTagName('div');

var tallColumn = Math.ceil(myGridUnits.length /  numberOfColumns);
var shortColumn = Math.floor(myGridUnits.length / numberOfColumns);

var nextUnit = 1;
var unitsRemaining = myGridUnits.length;
var xTranslate, yTranslate;
var columns = [];

for (var i = 0; i < (numberOfColumns - 1); i++) {


    if (unitsRemaining % shortColumn === 0) {
    
        columns.Push(shortColumn);
    }

    else {

        columns.Push(tallColumn);
    }
    
    nextUnit += columns[(columns.length - 1)];
    unitsRemaining -= columns[(columns.length - 1)];
    
    xTranslate = ((i + 1) * 48);
    yTranslate = 0;
    columns.forEach(function(columnHeight){yTranslate += (columnHeight * 48);});
                         
    newStyles.insertRule('.my-grid div:nth-of-type(n+' + nextUnit + ') {transform: translate(' + xTranslate + 'px, ' + (0 - (yTranslate)) + 'px);}', newStyles.cssRules.length);

}
.my-grid {
display: inline-grid;
grid-row-gap: 6px;
}

.my-grid div {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid rgb(127, 127, 127);
}
<div class="my-grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>

Arbeitsbeispiel (14 Gittereinheiten):

var numberOfColumns = 3;

document.head.appendChild(document.createElement('style'));

var newStyles = document.styleSheets[(document.styleSheets.length - 1)];

var myGrid = document.getElementsByClassName('my-grid')[0];
var myGridUnits = myGrid.getElementsByTagName('div');

var tallColumn = Math.ceil(myGridUnits.length /  numberOfColumns);
var shortColumn = Math.floor(myGridUnits.length / numberOfColumns);

var nextUnit = 1;
var unitsRemaining = myGridUnits.length;
var xTranslate, yTranslate;
var columns = [];

for (var i = 0; i < (numberOfColumns - 1); i++) {


    if (unitsRemaining % shortColumn === 0) {
    
        columns.Push(shortColumn);
    }

    else {

        columns.Push(tallColumn);
    }
    
    nextUnit += columns[(columns.length - 1)];
    unitsRemaining -= columns[(columns.length - 1)];
    
    xTranslate = ((i + 1) * 48);
    yTranslate = 0;
    columns.forEach(function(columnHeight){yTranslate += (columnHeight * 48);});
                         
    newStyles.insertRule('.my-grid div:nth-of-type(n+' + nextUnit + ') {transform: translate(' + xTranslate + 'px, ' + (0 - (yTranslate)) + 'px);}', newStyles.cssRules.length);

}
.my-grid {
display: inline-grid;
grid-row-gap: 6px;
}

.my-grid div {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid rgb(127, 127, 127);
}
<div class="my-grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
</div>

0
Rounin