CSS網格項目的縱橫比技巧有哪些

這篇文章主要講解了“CSS網格項目的縱橫比技巧有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS網格項目的縱橫比技巧有哪些”吧！

情形1) 只是內部的元素需要設縱橫比。

好，這個可能比較容易一些。 只要保證元素的寬度和網格區域的寬度100%相同，然后加上偽元素來處理拉伸高度的縱橫比。

<div
 class="grid"> <div style="--aspect-ratio: 
2/1;">2/1</div> <div style="--aspect-ratio: 
3/1;">3/1</div> <div style="--aspect-ratio: 
1/1;">1/1</div></div>

.grid { display: grid; 
grid-template-columns: 1fr 1fr 1fr; place-items: start;}.grid > * { 
background: orange; width: 100%;}.grid > 
[style^='--aspect-ratio']::before { content: ""; display: inline-block; 
width: 1px; height: 0; padding-bottom: calc(100% / 
(var(--aspect-ratio)));}

注意，應用縱橫比并不一定要通過自定義屬性。可以看到，這里的臟活累活都是由底部填充(padding-bottom)這條規則完成的，它的值也可以直接用固定值或別的什么。

情形2) 跨列求寬

我覺得，其實大家想要的更可能是這樣的效果，就是設一個2:1的縱橫比，然后元素就能確確實實地跨兩列，而不是局限在一列里。做法和上面的差不多，但要加規則來實現跨列。

[style="--aspect-ratio:
 1/1;"] { grid-column: span 1;}[style="--aspect-ratio: 2/1;"] { 
grid-column: span 2;}[style="--aspect-ratio: 3/1;"] { grid-column: span 
3;}

如果再加進一條grid-auto-flow: dense;規則，我們還可以讓不同網格項目有不同的縱橫比，它們可以整齊地相互包圍，顯得很協調。

到了這里，就該講講哪些做法會把準確的縱橫比搞砸。有些文字的行高line-height屬性可能會把方框頂得過高；要用網格間距grid-gap這個屬性也可能會弄亂縱橫比。如果縱橫比例要求一定超準，可能就要多試幾個固定值，碰運氣了。

如果網格本身沒有固定數量的行，做跨列也會變得比較麻煩。大家做的可能是重復函數repeat加自動填充auto-fill的效果，這樣最后遇到的情況可能是有幾個列不相等，那它們的縱橫比也好不到哪里去。這個問題也許下次我們再來深入研究一下。

情形 3) 硬來

網格有能力進行二維布局。真想做的話，只要強迫網格區域高和寬符合縱橫比就可以了。比如，給列和行直接設定固定的值，這種做法也不是不行：

.grid { display: grid; grid-template-columns: 200px 100px 100px; grid-template-rows: 100px 200px 300px;}

我們一般不會考慮這種方法，因為都希望元素大小靈活易變，正是由于這個原因，上面的縱橫比例子里用的技術都是基于百分比的。但是固定值仍然不失為另一種選擇。

看看Pen網站CodePen上縱橫比方框填充這個例子，作者Chris Coyier。

這個例子強迫網格區域大小固定，然后讓其中的元素拉伸填充這個區域，不過我們大可把元素的大小也固定下來。

這個問題一部分在于不但要給方框加上縱橫比，還要在方框內實現對齊功能。有幾種方法可以實現，但我認為最簡單的方法是網格套網格。給網格元素加上display: grid;規則，然后利用那個內部網格的對齊功能來實現。

感謝各位的閱讀，以上就是“CSS網格項目的縱橫比技巧有哪些”的內容了，經過本文的學習后，相信大家對CSS網格項目的縱橫比技巧有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！