CSS网格项目的纵横比技巧有哪些
导读:本文共1826字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 情形1) 只是内部的元素需要设纵横比。好,这个可能比较容易一些。 只要保证元素的宽度和网格区域的宽度100%相同,然后加上伪元素来处理拉伸高度的纵横比。<divclass="grid"><divstyle="--aspect-ratio:2/1;">2/1</div><divs... ...
目录
(为您整理了一些要点),点击可以直达。好,这个可能比较容易一些。 只要保证元素的宽度和网格区域的宽度100%相同,然后加上伪元素来处理拉伸高度的纵横比。
注意,应用纵横比并不一定要通过自定义属性。可以看到,这里的脏活累活都是由底部填充(padding-bottom)这条规则完成的,它的值也可以直接用固定值或别的什么。
我觉得,其实大家想要的更可能是这样的效果,就是设一个2:1的纵横比,然后元素就能确确实实地跨两列,而不是局限在一列里。做法和上面的差不多,但要加规则来实现跨列。
如果再加进一条grid-auto-flow: dense;规则,我们还可以让不同网格项目有不同的纵横比,它们可以整齐地相互包围,显得很协调。
到了这里,就该讲讲哪些做法会把准确的纵横比搞砸。有些文字的行高line-height属性可能会把方框顶得过高;要用网格间距grid-gap这个属性也可能会弄乱纵横比。如果纵横比例要求一定超准,可能就要多试几个固定值,碰运气了。
如果网格本身没有固定数量的行,做跨列也会变得比较麻烦。大家做的可能是重复函数repeat加自动填充auto-fill的效果,这样最后遇到的情况可能是有几个列不相等,那它们的纵横比也好不到哪里去。这个问题也许下次我们再来深入研究一下。
情形 3) 硬来
网格有能力进行二维布局。真想做的话,只要强迫网格区域高和宽符合纵横比就可以了。比如,给列和行直接设定固定的值,这种做法也不是不行:
我们一般不会考虑这种方法,因为都希望元素大小灵活易变,正是由于这个原因,上面的纵横比例子里用的技术都是基于百分比的。但是固定值仍然不失为另一种选择。
看看Pen网站CodePen上纵横比方框填充这个例子,作者Chris Coyier。
这个例子强迫网格区域大小固定,然后让其中的元素拉伸填充这个区域,不过我们大可把元素的大小也固定下来。
这个问题一部分在于不但要给方框加上纵横比,还要在方框内实现对齐功能。有几种方法可以实现,但我认为最简单的方法是网格套网格。给网格元素加上display: grid;规则,然后利用那个内部网格的对齐功能来实现。
CSS网格项目的纵横比技巧有哪些的详细内容,希望对您有所帮助,信息来源于网络。