2025年grid布局自适应（grid布局居中）

编程日记 • 2025-03-02 23:40 • 阅读 24

　　作者 | YJ 责编 | 欧阳姝黎

　　前言

　　周日在家看 Web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在。

注意：下面大部分代码已经由各大主流最新浏览器实现，切记不要使用在 production 当中。

　　
超级居中

　　在没有 flex 和 grid 之前，垂直居中一直不能很优雅的实现。而现在，我们可以结合 grid 和 place-items 优雅的同时实现水平居中和垂直居中。

/p>

p>MDN, place-items 属性详解

/p>

可解构的自适应布局(The Deconstructed Pancake)

/p>

p>这种布局经常出现在电商网站：

/p>

/p>

/code>

img src="http://dingyue.ws.126.net/2021/0526/cdfb36d3g00qtplb700hdd200hr00ckg00hr00ck.gif"/>

img src="http://dingyue.ws.126.net/2021/0526/c24eb558g00qtplb700jad200hr00ckg00hr00ck.gif"/>

br/>

strong>经典的 sidebar

/strong>

br/>

img src="http://dingyue.ws.126.net/2021/0526/c7c082cag00qtplb800gcd200hr0097g00hr0097.gif"/>

固定的 header 和 footer

　　固定高度的 header 和 footer，占据剩余空间的 body 是经常使用的布局，我们可以利用 grid 和 fr 单位完美实现。

　　.ex4 .parent {
display: grid;
grid-template-rows: auto 1fr auto;

　　经典的圣杯布局(classical holy Grail layout)

　　我们可以轻松的使用 Grid 布局来实现圣杯布局，并且是弹性的。

　　
有意思的叠块

　　使用 grid-template-columns 和 grid-column 可以实现如下图所示的布局。这进一步说明了 repeat 和 fr 的便捷性。

　　
RAM 技巧

　　Una Kravets 称之为 repeat, auto, minmax 技巧。这在弹性布局图片/box 之类非常有用(一行可以摆放的卡片数量自动适应)。

　　无论是宽度或高度的收缩还是延展，都可以完美的展现 card 的布局。

　　
使用 clamp 实现 fluid typography

　　使用最新的 clamp() 方法可以一行代码实现 fluid typography。提高 UX，非常适合包含阅读内容的 card，因为我们不希望一行字太短或太长。

　　MDN, clamp() 详解

　　
完美实现比例

　　在展现 CMS 或其他设计内容时，我们会期望图片、video、卡片能够按照固定的比例进行布局。而最新的 aspect-ratio 就能优雅的实现该功能(使用 chrome 84+)