第八讲：grid-template-areas布局的行高列宽问题
在上一讲，我们讲解了如何在子元素使用 grid-area 命名网格，并通过主元素的 grid-template-areas 属性组合排列网格名达到布局的目的，为了简化以突出主要内容，我们省略了网格布局中的行高与列宽问题。
考虑一下以下代码：
<style>
#grid_box {
margin: auto;
width: 300px;
height: 300px;
border: 1px solid tan;
display: grid;
grid-template-areas:
't4 t1 t1'
't4 t2 t2'
't4 t3 t3';
position: relative;
}
#grid_box > div { border: 1px solid pink; display: grid; place-items: center center; }
#t1 { grid-area: t1; }
#t2 { grid-area: t2; }
#t3 { grid-area: t3; }
#t4 { grid-area: t4; }
</style>
<div id="grid_box">
<div id="t1">顶部栏</div>
<div id="t2">中间栏</div>
<div id="t3">底部栏</div>
<div id="t4">左侧栏</div>
</div>
这将得出如下效果：
因为没有规范网格内部项目的行高、列宽，在实际应用时可能会存在许多不确定性问题，例如，一种可能的现象是，内部项目的子元素如果尺寸偏大会直接影响相应行的行高和相应列的列宽，进而影响整体布局。我们可以设定内部项目子元素的定位（position: absolute，需要其上元素设定relative定位）与尺寸，藉此保持网格布局的完整性和统一性，但总不如采用了grid布局的主元素主动设定行高列宽来得干脆，就是，利用之前介绍过的 grid-template-rows 和 grid-template-columns 设定行高与列宽：
grid-template-rows: 1fr 6fr 1fr;
grid-template-columns: 1fr repeat(2, 1.5fr);
上面，我们将网格区域做了行高与列宽的尺寸定义，纵向方向（grid-template-rows）分为8个等分（fr），一、三两行行高各占1等分，中间行行高占6等分；水平方向（grid-template-columns）划分4个等分，第一列列宽占1等分，第二、三列各占1.5等分。这两行代码放在主元素 grid-template-areas 的上方即可：
display: grid;
grid-template-rows: 1fr 6fr 1fr;
grid-template-columns: 1fr repeat(2, 1.5fr);
grid-template-areas:
't4 t1 t1'
't4 t2 t2'
't4 t3 t3';
效果：
本讲小结：
使用 grid-template-areas 属性将事先通过子元素命名的 grid-area 网格名进行组合排列达到布局网格区域的目的，但如果需要保证布局尺寸的稳定性，则需要在布局之前设置好行高与列宽，分别使用属性 grid-template-rows 和属性 grid-template-columns 加以定义。
| 
楼主: 马黑黑
发表于 2022-10-17 21:04
显身卡
楼主
发表于 2022-10-18 13:36
