在网站布局的设计中，很多时候需要实现不等高的布局效果，这在传统的网页布局中比较难以实现，但是在 CSS Grid 布局的应用下却变得非常方便。下面将会介绍如何使用 CSS Grid 实现不等高布局的技巧，包括示例代码，详细解析以及学习和指导意义。
CSS Grid 布局概述
CSS Grid 是由 W3C 开发的一种新的布局模式，可以让我们更加简单而有效地设计网页布局。其最重要的特点是利用网格系统将页面分隔成多个区域，然后在这些区域内排列元素。这种布局模式不但可以实现传统的行布局和列布局，还可以实现更加复杂的布局，例如将一个区域分别设置为五分之二和三分之二的比例等等。同时，CSS Grid 强调了响应式设计的概念，可以方便地实现不同窗口大小下的布局自适应。这些特点使 CSS Grid 成为现代网页布局的首选工具，也为我们实现不等高布局提供了一个很好的基础。
实现不等高布局的技巧
实现不等高布局的关键在于将网格分隔成不同的行，并在每一行中安排元素的位置，这样不同高度的元素可以在一个网格系统内自由排列。下面是 CSS Grid 中实现不等高布局的一些技巧：
确定网格行数
在布局之前，首先要确定网格系统中需要多少个行。因为每一行的高度有多少是固定的，所以需要提前对元素进行分类，可以通过以下两种方式来划分元素：
首先是按照宽度划分，将相同宽度的元素排成一排，然后在这些元素中找出最高的一个，以这个元素高度为基准，在每个宽度等分布局下计算需要多少行。
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(1px, auto); }
其次是按照元素的分组来划分，如果一个区块内的元素高度相同，可以将这些元素排成一行，然后再将不同高度的元素单独分为一行。
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; }
确定元素的位置
在确定行数之后，就需要考虑如何将元素放置在相应的行内。这里分为两个步骤：
首先确定元素所在的列，可以利用 grid-column-start 和 grid-column-end 来设置元素的列数，这里需要注意的是元素并不能跨列。
其次是在每一行中，依照高度从小到大依次放置元素。可以使用 grid-row-start 和 grid-row-end 来设置元素的起始和终止行数，在这些行数内按照一定的规则排列元素。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- --------------- ----------- ------ ---------------- ----- ------------- ----- - ---- - -------- ----- ----------------- ----- - --------- - ------------- ---- -- - -------- - ------------- ---- -- - ---------- - ------------- ---- -- -展开代码
示例演示
下面给出一个具体的实例演示 CSS Grid 如何实现不等高布局的效果。如下面的代码所示，我们将一个容器水平分为三等分，然后将容器内的元素按照高度分为三种：高的、中等的和低的元素。
<div class="container"> <div class="box box-tall"> 高 </div> <div class="box box-small"> 矮 </div> <div class="box box-small"> 矮 </div> <div class="box box-tall"> 高 </div> <div class="box box-med"> 中 </div> <div class="box box-med"> 中 </div> </div>
然后利用 CSS Grid 布局将这些元素按照高度依次排列，如下图所示：
学习与指导意义
CSS Grid 布局是一种非常强大的网页布局工具，它的出现给设计师和开发者带来了许多便利，为实现不等高布局提供了很好的基础。在学习了本文中介绍的技巧后，不但可以更加高效地完成网页布局的设计，而且还可以提高自己的技能水平。最后，建议大家在应用这些技巧的同时，也要关注自己的视觉表达和用户体验，优化页面效果和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c8ce60e46428fe9ef94ed0
