使網(wǎng)格容器填充列不是行我希望我的網(wǎng)格像這樣垂直填充：1 4 7 2 5 83 6 9... arbitrary number of additional rows.相反，它會(huì)像這樣水平填充：1 2 34 5 67 8 9我想指定網(wǎng)格中的列數(shù)，而不是行數(shù)。這就是我的div使用內(nèi)聯(lián)CSS樣式的樣子：<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>重要的是我的網(wǎng)格寬3列，但我希望項(xiàng)目按列填充，而不是按行填充。CSS Grid中有可能嗎？我已經(jīng)閱讀了這篇https://css-tricks.com/snippets/css/complete-guide-grid/，但沒有看到有關(guān)訂單的任何信息。CSS Flexbox有flex-direction沒有像CSS Grid那樣的屬性？
3 回答
UYOU
TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊
對(duì)于根據(jù)需要?jiǎng)?chuàng)建新列的垂直流動(dòng)網(wǎng)格，并且未定義行，請(qǐng)考慮使用CSS多列布局（示例）。CSS網(wǎng)格布局（至少當(dāng)前實(shí)現(xiàn) - 級(jí)別1）無法執(zhí)行此任務(wù)。這是問題所在：
在CSS網(wǎng)格布局中，grid-auto-flow和grid-template-rows/ grid-template-columns屬性之間存在反比關(guān)系。
更具體地說，使用grid-auto-flow: row（默認(rèn)設(shè)置）并grid-template-columns定義兩者，網(wǎng)格項(xiàng)在水平方向上很好地流動(dòng)，根據(jù)需要自動(dòng)創(chuàng)建新行。這個(gè)概念在問題的代碼中說明。
#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>
但是，通過切換到grid-template-rows，網(wǎng)格項(xiàng)目堆疊在一列中。
#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>
沒有使用grid-auto-flow: row和自動(dòng)創(chuàng)建列grid-template-rows。grid-template-columns必須定義（因此，與之相反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>
在相反的情況下，同樣的行為也是如此。
使用grid-auto-flow: column和grid-template-rows定義的網(wǎng)格項(xiàng)在垂直方向上流動(dòng)很好，根據(jù)需要自動(dòng)創(chuàng)建新列。
#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>
但是，通過切換到grid-template-columns，網(wǎng)格項(xiàng)堆疊在一行中。（這是大多數(shù)人提出的問題，包括在這個(gè)問題中。）
#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>
沒有自動(dòng)創(chuàng)建行。這需要grid-template-rows定義。（這是最常提供的解決方案，但它通常被拒絕，因?yàn)椴季志哂锌勺償?shù)量的行。）
#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>
因此，考慮如上所述的多列布局解決方案。
規(guī)格參考：7.7。自動(dòng)放置：grid-auto-flow屬性
慕斯王
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊
另一個(gè)選擇是刪除CSS Grid并使用CSS Columns，它完全符合您的要求，并且還有更好的瀏覽器支持。
.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>
蝴蝶不菲
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
作為一種技術(shù)練習(xí)而非實(shí)際解決方案，您可以根據(jù)項(xiàng)目數(shù)量以特定樣式獲得某種結(jié)果
讓我們看看它是如何工作的：
.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6) ~ .item:nth-child(n+3)
第一個(gè)選擇器
.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6)
是活動(dòng)的是我們的列表有4到6個(gè)元素。在這種情況下，某些項(xiàng)目將同時(shí)處于第一個(gè)條件和第二個(gè)條件。
在這種情況下，我們希望第一列中有2個(gè)項(xiàng)目。使用的目標(biāo)是剩下的項(xiàng)目（從第三個(gè)開始）
~ .item:nth-child(n+3)
并將它們放在第二列。類似的規(guī)則，現(xiàn)在是第5和以后
~ .item:nth-child(n+5)
將其他項(xiàng)目放在第三列。這兩個(gè)規(guī)則具有相同的優(yōu)先級(jí)，并且針對(duì)最后一項(xiàng)，因此它們按此順序出現(xiàn)至關(guān)重要。
我們需要重復(fù)類似的規(guī)則，直到可以存在的最大項(xiàng)目數(shù)量（可能是預(yù)處理器的工作）
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>
添加回答
舉報(bào)
0/150
提交
取消