翻译 CSS 技巧:网格项目的纵横比

kjtrtm0 · 2017年12月05日 · 360 次阅读

本文转载自:众成翻译
译者:chaussen
审校: huangxiaolu
链接:http://www.zcfy.cc/article/4585
原文:https://css-tricks.com/aspect-ratios-grid-items

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

要降低这一风险,有一种方法,那就是伪元素(Psuedo Element)策略,让伪元素顶住其上一层元素,撑起纵横比。但是如果元素里的内容将元素顶得更高,那元素也会变得更高,纵横比就完蛋了。

这一技巧可以用在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。

这个例子强迫网格区域大小固定,然后让其中的元素拉伸填充这个区域,不过我们大可把元素的大小也固定下来。

实际应用的例子

Ben Goshow留言说要完成这个例子,于是促成了现在这个效果:

这个问题一部分在于不但要给方框加上纵横比,还要在方框内实现对齐功能。有几种方法可以实现,但我认为最简单的方法是网格套网格。给网格元素加上display: grid;规则,然后利用那个内部网格的对齐功能来实现。

看看Pen网站CodePenCSS网格项目的纵横比和内部元素对齐这个例子,作者Chris Coyier。

注意这个演示网页中所有元素都明确定位,没有跨行。这种做法不是必须的,只是作为另一种布局方法的例子而已。

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册