CSS Grid 中的手风琴行

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

我敢打赌,grid-template-columns 的使用频率大约是 grid-template-rows 的 10 倍,但也许每个人都错过了它。 Eric Meyer 将一堆行线添加到他的主要站点布局网格中,如下所示

grid-template-rows: repeat(7, min-content) 1fr repeat(3, min-content);

这样,如果您需要使用它们,它们就会为您准备好了。

喜欢这种模式。对我来说,感觉很好,有两组行,其中各个行可以根据需要展开以接受内容,并在不需要时折叠为零高度,并且在两组之间有一个“空白”行将它们分开。它很灵活,甚至允许我在不重写所有布局样式的情况下向集合中添加更多行。

直接链接 →