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

要降低這一風(fēng)險，有一種方法，那就是偽元素(Psuedo Element)策略，讓偽元素頂住其上一層元素，撐起縱橫比。但是如果元素里的內(nèi)容將元素頂?shù)酶?#xff0c;那元素也會變得更高，縱橫比就完蛋了。

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

記住，網(wǎng)格區(qū)域和占據(jù)區(qū)域的元素并不一定大小一致。

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

情形1) 只是內(nèi)部的元素需要設(shè)縱橫比。

好，這個可能比較容易一些。 只要保證元素的寬度和網(wǎng)格區(qū)域的寬度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)));}

結(jié)果就是這樣：

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

情形2) 跨列求寬

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

[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;}

如果再加進(jìn)一條grid-auto-flow: dense;規(guī)則，我們還可以讓不同網(wǎng)格項目有不同的縱橫比，它們可以整齊地相互包圍，顯得很協(xié)調(diào)。

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

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

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

情形 3) 硬來

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

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

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

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

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

實際應(yīng)用的例子

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。