我有一個設置為auto-fill列的 CSS 網格，以便在一行中顯示盡可能多的項目。這是通過以下方式完成的：grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));我希望能夠調整所選網格項目的大小，我正在嘗試使用：resize: both;
overflow: auto;這在基本級別上有效，但是當水平調整大小時，內容將重疊/拉伸相鄰的網格項：當垂直調整大小時，下面的行會被向下推，因此不會重疊： 這也是我想要的水平行為。我知道這可能與使用auto-fill列有關，因為當顯式定義軌道時，拉伸在兩個軸上的工作方式相同。.grid { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fill, 10em); /* grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); */}.grid>div { background-color: #eeeeff; padding: 0.5rem;}.resize { resize: both; overflow: auto;}<div class="grid"> <div class="resize">Resize Me</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div></div>JSFiddle
2 回答
婷婷同學_
TA貢獻1844條經驗 獲得超8個贊
您可以使用flex來實現(xiàn)這一點：
.grid {
? display: flex;
? flex-wrap: wrap;
}
.grid>div {
? border: 1px solid red;
? width: 150px;
}
.grid>div {
? background-color: #eeeeff;
? margin: 1em;
? padding: 10px;
}
.resize {
? resize: both;
? overflow: auto;
? border: 1px solid red;
}
<html>
<body>
? <div class="grid">
? ? <div class="resize">Resize Me</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? ? <div>Item</div>
? </div>
</body>
</html>
人到中年有點甜
TA貢獻1895條經驗 獲得超7個贊
按照您定義的方式，調整大小適用于項目，但不適用于列軌道。這就是為什么您在水平調整大小時會看到重疊。根據grid-template-columns規(guī)則1 ，將柱子固定到位。
使列軌道隨項目調整大小的唯一方法是將列設置為（基于內容的大小調整），但這不能與或2auto共存。auto-fillauto-fit
您在垂直方向上不存在調整大小的問題，因為您尚未定義任何行。因此，網格默認為grid-auto-rows: auto（同樣，基于內容的大小調整），并且項目和行軌道協(xié)調地調整大小。
但由于您需要水平換行，因此不能對列使用此技術。這顯然是網格布局的限制。
嘗試使用 flexbox，在這種情況下這不是一個很好的選擇（特別是因為它仍然不支持屬性gap3 ），但它可能會讓你更接近你的目標。
.grid {
display: flex;
flex-wrap: wrap;
}
.grid > div {
width: 10em;
margin: 5px;
background-color: #ccc;
padding: 0.5rem;
}
.resize {
resize: both;
overflow: auto;
border: 1px solid red;
}
<div class="grid">
<div class="resize">Resize Me</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
jsFiddle 演示
- 2 回答
- 0 關注
- 183 瀏覽
添加回答
舉報
0/150
提交
取消