CSS Grid 是一种强大的布局方式，可以用来创建网格布局，同时也是实现两栏自适应布局的理想选择。
什么是两栏自适应布局？
两栏自适应布局通常指的是左侧固定宽度、右侧自适应宽度的两栏布局。这种布局适用于很多场合，例如网站的主内容区域和侧边栏、博客的文章列表和文章内容等。
如何使用 CSS Grid 实现两栏自适应布局？
在 CSS Grid 中，可以通过设置网格的行和列来实现布局。
首先，在父元素上设置 display: grid，表示使用网格布局。然后，使用 grid-template-columns 属性设置列的宽度，其中一个列的宽度需要设置为固定值，例如左侧栏的宽度，另一个列的宽度使用剩余空间自适应，并且可以使用 fr 单位，例如右侧栏的宽度。最后，在子元素上设置 grid-column 属性，表示子元素在网格中所在的列。
以下是一个简单的示例代码：
---- ------------------ ---- ---------------------- ---- ----------------------- ------
---------- - -------- ----- ---------------------- ----- ---- - ----- - ------------ - - -- - ------ - ------------ - - -- -
在上面的示例代码中，.container 是父元素，设置了网格布局并设置了 2 列，其中左侧栏的宽度为 200px，右侧栏的宽度使用剩余空间自适应。.left 和 .right 分别是两个子元素，通过设置 grid-column 属性，指定它们在网格中所在的列。
注意事项
需要注意的是，为了支持旧版本的浏览器，需要添加一些前缀，例如 -ms-grid、-webkit-grid、-moz-grid 等。同时，如果左侧栏不是固定宽度，而是自适应宽度，可以使用 minmax 函数，例如：
---------------------- ------------- ---- ----
总结
CSS Grid 提供了一种简单而强大的方式来实现两栏自适应布局。使用 grid-template-columns 属性可以轻松实现列的宽度设置，使用 grid-column 属性可以轻松定位子元素在网格中所在的列。使用 CSS Grid 实现两栏自适应布局，可以提升页面的布局效果和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647d4576968c7c53b0815070