這裡研究了一些問題，但它們並不能完全解決我正在尋找的問題。
假設我有一個網站並且我想要。在桌面上我想要這個：
這很容易。 grid-template-columns: 重複(3, 33%) (基本上)
但是，在行動裝置上，我想要這個
我遇到的情況發生在它翻轉到單一列之前：
我正在嘗試 clamp()、minmax() 以及各種各樣的東西，但沒有任何東西能按我想要的方式工作。是的，我完全可以使用媒體查詢，但我希望使用現代CSS（如clamp、grid、minmax等）創建真正流暢的網格/柔性佈局，這樣就不需要媒體查詢來進行基本佈局更改。 < /p>
我知道這不起作用，但作為請求的起點，這是我100 次嘗試之一的簡單版本:) 在這個版本中，我嘗試使用箝位從重複（3）切換到重複（1） ）。
.wrapper {
display: grid;
gap: 15px;
grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: blue;
}
<div class="wrapper"> <div class="item one"><h3>Example A</h3></div> <div class="item two"><h3>Example Two</h3></div> <div class="item three"><h3>Third Example</h3></div> </div>
P粉0709187772023-12-24 11:12:44
包含更通用規則的完整文章：https:// css-tricks.com/responsive-layouts-fewer-media-queries/
這是一個在 flex-basis 中使用 max(0px, (400px - 100vw)*1000) 的想法。如果100vw（螢幕尺寸）大於400px，則此公式將給出0px，或在相反情況下給出一個非常大的值，為每個元素提供一個big flex-basis 並建立一個包裝。只要調整 400px 即可扮演 @media (max-width:400px)
.container {
display:flex;
flex-wrap:wrap;
}
.container div {
height:100px;
border:2px solid;
background:red;
flex-basis:max(0px, (400px - 100vw)*1000);
flex-grow:1;
}<div class="container">
<div></div>
<div></div>
<div></div>
</div>使用 CSS 網格，它可以如下所示：
.container {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(clamp(30%, (400px - 100vw)*1000, 100%),1fr));
grid-gap:5px;
}
.container div {
height:100px;
border:2px solid;
background:red;
}<div class="container">
<div></div>
<div></div>
<div></div>
</div>一個類似的問題，我控制沒有媒體查詢的最大列數：CSS網格 - 沒有媒體查詢的最大列數< /a>
我們可以擴展上述解決方案以考慮更複雜的情況。
從 6 列移動到 3 列到 1 列的範例：
.container {
display:grid;
grid-template-columns:
repeat(auto-fill,
minmax(clamp(clamp(15%,(800px - 100vw)*1000, 30%), (400px - 100vw)*1000, 100%)
/* if(screen> 800px) 15% elseif(screen> 400px) 30% else 100% */
,1fr));
grid-gap:5px;
}
.container div {
height:100px;
border:2px solid;
background:red;
}<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>要了解這些值，請考慮以下範圍：
100%/7 100%/6 100%/5 100%/4 100%/3 100%/2 100%/1 14.3% 16.7% 20% 25% 33.3% 50% 100%
要取得 6 列，我們需要 ]14.3% 16.7%] 範圍內的值（我考慮的是 15%）
要獲得 3 列，我們需要 ]25% 33.3%] 範圍內的值（我考慮的是 30%）
我們只是避開邊緣以確保我們考慮到間隙。
使用 CSS 變數的更通用的解決方案，其中我將添加 0.1% 以確保該值足夠大以獲得所需的列數並且可以容納間隙。