前言
在前端开发中，实现布局是非常重要的一环。而在布局中，左右两栏自适应布局是一种非常常见的布局方式，尤其是在网站的主页、详情页等场景中。
在过去，实现左右两栏自适应布局主要靠浮动、定位等方式，但这些方式都有它们各自的缺点，比如浮动容易造成布局错乱，定位需要手动计算位置等。
而现在，随着 CSS Grid 技术的发展，实现左右两栏自适应布局变得更加简单、高效、灵活。
本文将详细介绍 CSS Grid 实现左右两栏自适应布局的方法，包括基本的两栏布局、三栏布局、媒体查询等。
基本的两栏布局
基本的两栏布局是指左右两栏宽度固定，其中一栏宽度为固定值，另一栏则是通过 CSS Grid 实现自适应宽度。
下面是一个示例代码：
<div class="container"> <div class="left">左侧栏</div> <div class="right">右侧栏</div> </div>
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-columns: 200px auto;
}
.left {
background-color: #ccc;
}
.right {
background-color: #eee;
}上面的代码中，我们定义了一个 .container 容器，使用 display: grid 将其设置为网格布局。
接着，使用 grid-template-columns 定义了两列，第一列宽度为 200px，第二列宽度为自适应宽度。
最后，我们定义了两个子元素 .left 和 .right，并设置了不同的背景颜色，以便更好地区分两栏。
通过上面的代码，我们已经实现了一个基本的两栏自适应布局。
三栏布局
在实际开发中，我们可能需要实现三栏布局，其中左右两栏宽度固定，中间一栏则是自适应宽度。这个布局可以通过 CSS Grid 非常方便地实现。
下面是一个示例代码：
<div class="container"> <div class="left">左侧栏</div> <div class="middle">中间栏</div> <div class="right">右侧栏</div> </div>
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-columns: 200px auto 200px;
}
.left {
background-color: #ccc;
}
.middle {
background-color: #eee;
}
.right {
background-color: #ccc;
}在上面的代码中，我们定义了一个 .container 容器，并使用 display: grid 将其设置为网格布局。
接着，使用 grid-template-columns 定义了三列，分别为宽度为 200px、自适应宽度、宽度为 200px。
最后，我们定义了三个子元素 .left、.middle 和 .right，并设置了不同的背景颜色。
通过上面的代码，我们已经实现了一个三栏自适应布局。
媒体查询
在实际开发中，我们需要考虑不同设备宽度下的布局问题。这时，媒体查询可以帮助我们实现响应式布局。
下面是一个示例代码：
<div class="container"> <div class="left">左侧栏</div> <div class="middle">中间栏</div> <div class="right">右侧栏</div> </div>
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.left {
background-color: #ccc;
}
.middle {
background-color: #eee;
}
.right {
background-color: #ccc;
}
@media screen and (max-width: 768px) {
.container {
display: block;
}
.left, .right {
width: 100%;
}
}在上面的代码中，我们定义了一个 .container 容器，并使用 display: grid 将其设置为网格布局。同时，我们使用了 1fr 和 2fr 分别表示两栏的比例关系。
接着，我们定义了三个子元素 .left、.middle 和 .right，并设置了不同的背景颜色。
最后，我们使用媒体查询，在屏幕宽度小于 768px 时，将容器设置为块级元素，并将左右两栏的宽度设置为 100%。
通过上面的代码，我们已经实现了一个响应式的三栏自适应布局。
总结
通过本文的介绍，我们了解了 CSS Grid 实现左右两栏自适应布局的方法，包括基本的两栏布局、三栏布局、媒体查询等。
在实际开发中，我们可以根据具体需求选择适合的布局方式，并结合媒体查询实现响应式布局，以便更好地适应不同设备的屏幕尺寸。
希望本文能够对大家在前端开发中实现布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6577d8a3d2f5e1655d198f4b