之前，我們講了縱橫比方框，談到一個技巧，就是運用填充來隨心所欲地調整一個元素的長寬比例。這個技巧并不是經常能用到的，因為修整一個元素的高度是自找麻煩，但也不是沒有這種情況出現。

要降低這一風險，有一種方法，那就是偽元素(Psuedo Element)策略，讓偽元素頂住其上一層元素，撐起縱橫比。但是如果元素里的內容將元素頂得更高，那元素也會變得更高，縱橫比就完蛋了。

這一技巧可以在CSS網格布局中，應用到網格項目上去！當然，應用的方法有幾種，都值得我們思考。

記住，網格區域和占據區域的元素并不一定大小一致。

知道了這一點，就引申出兩個問題：是需要網格區域本身有個縱橫比，然后里面的元素跟著拉伸？還是不管元素所在的網格區域如何，僅元素需要縱橫比？

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

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

class="grid">

2/1 3/1 1/1

.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;規則，我們還可以讓不同網格項目有不同的縱橫比，它們可以整齊地相互包圍，顯得很協調。

推薦下我的前端群：589651705，不管你是小白還是大牛，小編我都歡迎，不定期分享干貨，包括我自己整理的一份前端資料和零基礎入門教程，歡迎初學者和在進階中的小伙伴。

到了這里，就該講講哪些做法會把準確的縱橫比搞砸。有些文字的行高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。

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

實際應用的例子

Ben Goshow留言說要完成這個例子，于是促成了現在這個效果：

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

推薦下我的前端群：589651705，不管你是小白還是大牛，小編我都歡迎，不定期分享干貨，包括我自己整理的一份前端資料和零基礎入門教程，歡迎初學者和在進階中的小伙伴。

總結

以上是生活随笔為你收集整理的html5取消纵横比,CSS技巧：网格项目的纵横比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。