display:grid 布局

最新推荐文章于 2025-05-16 17:36:05 发布

原创最新推荐文章于 2025-05-16 17:36:05 发布 · 432 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

网络编程专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一位初学者从table布局转向CSS Grid布局的体验。通过实际案例，展示了如何使用Grid布局将一维数组数据分为两列显示，以及如何利用fr单位实现容器宽度的均分。此外，还探讨了如何设定每行高度，包括使用grid-auto-rows属性和minmax()函数，以适应不同内容长度。最后，提到了Grid布局在网页整体设计中的应用潜力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我果然是个菜鸟。。一直只知道table布局，突然发现这个grid布局很好用啊。一开始是我们的设计图上有需要把数据分成两列显示的需求。类似这样：

然后我的数据是一个一维数组。用grid布局完美解决：

.container {
  display: grid;
  grid-template-columns: 50% 50%;
}

如果想要均分容器的宽度，那么可以使用新引入的单位fr，新的fr单位代表网格容器中可用空间的一等份。上面的也可写成：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

也可写成：

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

每行高度

如果想确定使用每行高度，可以使用grid-auto-rows: 100px;来确定每行只有100px

minmax()

如果想让每行的高度随着内容自动填充，那么可以使用minmax()来确定最小值与最大值，例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

上面的样式规定了一个3列布局，每行的高度最少为100px的网格。

似乎也可以用在网页的整体布局上（或者说这才是人家的最正经用途？）未完待续