在css中如何用grid-template设置固定和自适应列-css教程-PHP中文网

在css中如何用grid-template设置固定和自适应列

P粉602998670

发布： 2025-10-05 22:36:02

原创

827人浏览过

固定列与自适应列可通过grid-template-columns结合fr、minmax和auto-fit实现，如200px 1fr用于侧边栏+内容区，minmax(300px,1fr)设定最小宽度，repeat(auto-fit,minmax(200px,1fr))实现响应式均分布局。

在css中如何用grid-template设置固定和自适应列

在 CSS Grid 布局中，grid-template-columns 可以灵活设置固定宽度和自适应列，实现混合布局。关键在于合理使用长度单位（如 px、em）与弹性单位（如 fr、minmax、auto）。

通过 grid-template-columns 定义列轨道，可以将固定宽度和可伸缩部分结合使用：

grid-template-columns: 200px 1fr;

grid-template-columns: 100px 1fr 2fr;

grid-template-columns: 150px minmax(200px, 1fr);

当希望自适应列有一个最小宽度时，可以用 minmax() 函数：

grid-template-columns: 240px minmax(300px, 1fr);

这表示第二列至少 300px，浏览器变宽时可继续扩展占满剩余空间。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

如果想让某些列根据容器自动换行并均分空间，可配合 repeat() 与 auto-fit：

grid-template-columns: 120px repeat(auto-fit, minmax(200px, 1fr));

第一列固定 120px，后面每列至少 200px，在空间不足时自动换行排列。

基本上就这些。掌握 fr、minmax 和 auto-fit 的搭配，就能轻松实现固定与自适应共存的网格布局。不复杂但容易忽略细节。

以上就是在css中如何用grid-template设置固定和自适应列的详细内容，更多请关注php中文网其它相关文章！

大家都在看：