css圣杯布局与双飞翼布局_令人兴奋CSS布局展望

过去一周，浏览器供应商发布了一些令人兴奋的消息，这些消息可能会在不久的将来对CSS布局产生重大影响。

Chrome浏览器预览了新的网格检查器

我一直很喜欢Firefox的Grid inspector。 到目前为止，其他浏览器在调试CSS布局方面还差强人意。

本周，Chrome对我们进行了一次崭新的Grid检查器的预览，这可能甚至可以与Firefox的竞争对手相提并论。 不再斜视和计数行号-Chrome的检查器向您显示它们！ 尽管我是Firefox的初衷，但我仍然会给它一个提示-它肯定会使在Chrome中调试更加容易。

从Twitter：

即将发布：CSS网格工具！ 🤘

在过去的几个月中，我们与@EdgeDevTools联手开发了这一要求很高的功能。 这是一个预览。

关于未来如何使网格更容易和更容易访问，我们还有更多想法–请继续关注！ pic.twitter.com/b3u4XaEkzv

-Chrome DevTools（@ChromeDevTools） 2020年4月29日

Chrome Canary支持flexbox的'gap'

同样，Chrome在这一方面正在追赶Firefox。 在Grid布局中已经有一段时间（以前是grid-gap ）支持了gap属性，但是现在它也可以在flexbox中使用。 这使得构建算法布局变得容易得多-不再需要边际漏洞。

目前在Chrome Canary中这是一个标志-您需要启用它。

从Twitter上的Adam Argyle ：

🎉在最新版的Chrome Canary中缩小差距🎉

```css
显示：flex; 🦾
间隙：1ch; 🔥
```

早期采用者：
帮助我们进行测试不会！！

注意：
需要启用网络实验，请访问Canary中的chrome：// flags / #enable -experimental-web-platform-features以启用pic.twitter.com/lG3WusFA4X

-Adam Argyle（@argyleink） 2020年4月27日

Firefox中的砌体Nightly

这是一个很大的家伙，让我有点蒙昧。 砌体布局的事情，而作为一个开发者，我要求执行所有的时间，但是这是（目前）唯一可能使用Javascript。 有一些方法，你可以种做类似的事情纯CSS （这里有一个） ，但所有的人都有其局限性，如要求父容器上的固定高度，或者知道你的网格项目的高度提前。

能够在CSS中做到这一点一直感觉就像是遥不可及的梦想。 但是Miriam Suzanne刚刚宣布在Firefox Nightly中对砖石网格进行测试！

Firefox Nightly在功能标记后面对“砌体”网格进行了测试。

1.转到“关于：配置”
2.切换“ layout.css.grid-template-masonry-value.enabled”
3.试试吧！ https://t.co/65EW1jOMfi https://t.co/psOFPVLRk1

— [米娅| Miriam]苏珊娜？ （@MiriSuzanne） 2020年4月29日

要获得广泛的浏览器支持，可能还有很长的路要走–我们仍在等待其他浏览器效仿Firefox的领先优势，并在6个月的时间里致力于子网格支持。 但是我真的认为这有可能成为改变游戏规则的潜能-几乎与subgrid一样多。 实际上，我要说的是，与需要子网格的布局相比，我需要更频繁地构建砌体布局，因为我通常可以解决嵌套网格和一些数学运算缺乏子网格支持的问题（尽管这并不理想） ）。

很高兴看到CSS布局正在取得进展。 希望这些功能很快成为主流！

您可以为Github上的砖石讨论做贡献

翻译自: https://css-irl.info/exciting-things-on-the-horizon-for-css-layout/