使用CSS Grid可轻松实现两列布局，通过display: grid和grid-template-columns定义列宽，子元素自动填充网格，结合gap设置间距，并利用媒体查询实现响应式堆叠，必要时用grid-column控制项目跨列。
要实现一个简单的两列布局，CSS Grid 是最直接且灵活的方式之一。它允许你将页面划分为行和列，形成一个二维网格结构，非常适合构建现代网页布局。
1. 创建基本的两列网格容器
使用 display: grid 将元素定义为网格容器，并通过 grid-template-columns 设置两列的宽度。
例如：
.container { display: grid; grid-template-columns: 1fr 1fr; /* 两列均分容器宽度 */ gap: 20px; /* 列之间的间距 */}
上面代码中，1fr 1fr 表示两列各占可用空间的一半。你也可以设置不同比例，比如 2fr 1fr 让第一列是第二列宽度的两倍。
2. 定义网格项目（子元素）
网格容器内的直接子元素会自动成为网格项目，按顺序填入网格单元格。
立即学习“前端免费学习笔记（深入）”；
HTML 示例：
主内容区
这两个子元素会并排显示，分别位于第一列和第二列。
Fireflies.ai
自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。
145 查看详情
3. 控制响应式行为（可选）
在小屏幕上，你可以让两列变为堆叠排列。
@media (max-width: 768px) { .container { grid-template-columns: 1fr; /* 单列显示 */ }}
这样在移动设备上，侧边栏会在主内容上方或下方显示，提升可读性。
4. 额外控制：指定项目位置
如果需要更精确地控制某个项目的位置，可以使用 grid-column。
例如让主内容跨两列：
.main { grid-column: span 2; /* 跨越两列 */}
这在需要全宽展示某部分内容时非常有用。
基本上就这些。用 CSS Grid 实现两列布局简单直观，只需几行代码就能完成结构搭建，配合媒体查询还能轻松实现响应式设计。不复杂但容易忽略细节，比如 gap 的使用和 fr 单位的理解。掌握这些基础后，可以进一步尝试更复杂的网格布局。
以上就是如何使用CSS Grid实现两列布局_网格布局基础案例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/970022.html
微信扫一扫 
支付宝扫一扫 
