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