什么是 CSS Grid？
CSS Grid 是一种基于网格的布局系统，它可以让我们更轻松而直观地构建网页布局。与传统的 CSS 布局系统相比，CSS Grid 具有更高的自由度和更强的灵活性，在实现复杂布局方面更为便捷。
为什么要使用百分比高度布局？
在前端开发中，经常会遇到需要给某个元素设置一个占据屏幕固定比例的高度的情况，例如实现一个两栏布局。如果只使用固定像素值作为高度单位，则会对不同尺寸屏幕下的浏览效果造成不利影响。因此，我们需要使用百分比高度布局。
CSS Grid 中如何实现百分比高度布局？
在 CSS Grid 中，我们可以使用 grid-template-rows 属性来定义网格的行高。默认情况下，grid-template-rows 的值是 auto，即自适应子元素的高度。为了实现百分比高度布局，我们需要给 grid-template-rows 指定一组百分比值。
以实现一个左栏宽度为 30%，右栏为 70% 的两栏布局为例：
<div class="wrapper"> <div class="left"></div> <div class="right"></div> </div>
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- --- ---- ------------------- ----- ------- ------ - ----- - ----------------- ---- - ------ - ----------------- ----- -
在上述代码中，我们通过将 grid-template-rows 的值设置为 100% 来实现了百分比高度布局。该值会被等分到每一行上，保证左栏和右栏的高度都是屏幕高度的 100%。
同时，为了保证父容器能够占据整个屏幕高度，我们还应该为 .wrapper 设置 height: 100vh，将其高度设置为屏幕高度。
总结
通过 CSS Grid 实现百分比高度布局，可以让我们更为方便、灵活地构建网页布局，适应不同尺寸屏幕的浏览效果。在使用时，我们需要通过 grid-template-rows 属性为网格指定一组百分比值，并保证父容器能够占据整个屏幕高度。
示例代码
<div class="wrapper"> <div class="left"></div> <div class="right"></div> </div>
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- --- ---- ------------------- ----- ------- ------ - ----- - ----------------- ---- - ------ - ----------------- ----- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64506457980a9b385b97249e