使用CSS Grid创建多列文章布局需设置display: grid，通过grid-template-columns用百分比或fr单位定义列宽，如三等列用33.33%或1fr 1fr 1fr，主内容居中可用20% 60% 20%，结合gap设间距，配合媒体查询在小屏下改为100%单列，实现响应式布局。
使用CSS Grid创建多列文章布局非常直观，关键是合理设置grid-template-columns来控制每列的宽度。通过百分比单位，可以让布局具有响应性，适应不同屏幕尺寸。
要启用Grid布局，先在父容器上设置display: grid，然后使用grid-template-columns定义列宽。例如，创建一个三列等宽布局：
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
gap: 20px;
}
这里将容器分为三列，每列占总宽度的约三分之一，gap用于设置列之间的间距。
如果想让中间一列更宽，适合主内容，两侧为侧边栏，可以这样设置：
立即学习“前端免费学习笔记（深入）”；
.article-layout {
display: grid;
grid-template-columns: 20% 60% 20%;
gap: 15px;
}
左侧和右侧各占20%，中间主内容区占60%。这种结构适合典型的三栏文章页面，如博客或新闻站点。
纯百分比在小屏幕上可能造成内容挤压。可以结合minmax()和fr单位增强弹性：
.responsive-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
虽然这没用百分比，但效果类似且更灵活：fr单位按比例分配剩余空间，避免溢出。也可以混合使用：
.mixed-columns {
grid-template-columns: 15% 1fr 1fr;
}
第一列固定为15%，其余两列平分剩余空间。
在小屏幕上，多列可能影响阅读体验。可通过媒体查询改为单列：
@media (max-width: 768px) {
.container {
grid-template-columns: 100%;
}
}
当屏幕宽度小于768px时，所有内容堆叠成单列，提升可读性。
基本上就这些。使用百分比设置grid-template-columns能快速构建多列文章布局，再结合gap和媒体查询，就能实现美观又实用的响应式设计。不复杂但容易忽略细节，比如间隙和断点选择。
以上就是如何在CSS中使用Grid制作多列文章布局_grid-template-columns百分比设置的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
448
收藏
