Grid 布局实现三栏布局
使用 CSS Grid 布局实现三栏布局（左右固定 100px，中间自适应）的核心原理是通过网格模板精确控制列宽分配。以下是具体实现方法及优化技巧：
一、基础实现
-
父容器设置
为外层容器添加display: grid使其成为网格容器，并通过grid-template-columns定义列宽css
.container { display: grid; grid-template-columns: 100px 1fr 100px; /* 左固定 | 中间自适应 | 右固定 */ gap: 10px; /* 列间距 */ }1fr表示中间列占据剩余空间gap控制列间距，无需计算复杂边距
-
子元素布局
直接按顺序放置子元素即可：html
<div class="container"> <div class="left">左栏（100px）</div> <div class="center">中间自适应</div> <div class="right">右栏（100px）</div> </div>
二、进阶优化
-
响应式适配
结合媒体查询实现小屏幕