html5取消纵横比,CSS技巧：网格项目的纵横比

之前，我们讲了纵横比方框，谈到一个技巧，就是运用填充来随心所欲地调整一个元素的长宽比例。这个技巧并不是经常能用到的，因为修整一个元素的高度是自找麻烦，但也不是没有这种情况出现。

要降低这一风险，有一种方法，那就是伪元素(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，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括我自己整理的一份前端资料和零基础入门教程，欢迎初学者和在进阶中的小伙伴。