马黑黑 发表于 2022-10-17 07:37
.head {
grid-area: header;
}
合并过的地方好像线型加粗了呢。
红影 发表于 2022-10-17 21:04
合并过的地方好像线型加粗了呢。
是的，相连两根线并排了。如果需要细线，也就是一像素的，那需要额外设置边框：左边的没有、下边的没有什么的
红影 发表于 2022-10-17 21:04
header等等的名称是固定的么？可以改成自己要的么，比如改成拼音
.tou {
grid-area: tou;
名称是自己定义的
马黑黑 发表于 2022-10-17 21:49
名称是自己定义的
哦哦，还以为是固定的，嗯，知道了。
马黑黑 发表于 2022-10-17 21:48
是的，相连两根线并排了。如果需要细线，也就是一像素的，那需要额外设置边框：左边的没有、下边的没有什 ...
所以现在这个合并不一样呢，前面的选择横竖线的那种合并就不会多出线来。
红影 发表于 2022-10-17 21:56
所以现在这个合并不一样呢，前面的选择横竖线的那种合并就不会多出线来。
其实是一样的，只是之前的边框线形态、颜色不同而已
红影 发表于 2022-10-17 21:55
哦哦，还以为是固定的，嗯，知道了。
这和 #papa、.mama 之类的东东一样，都是自己命名的
马黑黑 发表于 2022-10-17 21:58
其实是一样的，只是之前的边框线形态、颜色不同而已
哦，还以为是命令不同带来的区别呢。
红影 发表于 2022-10-18 12:04
哦，还以为是命令不同带来的区别呢。
好像我有说是命名吧。什么叫命名，这就是。
用grid-area + grid-template-areas 怎样做34楼的5、6、9、10合并那样的效果？
红影 发表于 2022-10-18 12:17
用grid-area + grid-template-areas 怎样做34楼的5、6、9、10合并那样的效果？
要先命名单元格。例如，将 5、6、9、10 命名为 cc，然后去拼装就好。
grid-template-areas:
'cc cc . .'
'cc cc . .';
加入 cc 依托的命名元素是 .CC，则HTML代码：
<!-- 父元素代码略 -->
<div class="CC"></div>
<!-- 父元素代码结尾符 -->
<style>
#grid_papa { margin: auto; width: 740px; min-height: 400px; position: relative; }
#grid_papa > p, #grid_papa > h2 { padding: 8px 0; }
.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_fixed {
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_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_papa">
<h2>第八讲：grid-template-areas布局的行高列宽问题</h2>
<p>在上一讲，我们讲解了如何在子元素使用 grid-area 命名网格，并通过主元素的 grid-template-areas 属性组合排列网格名达到布局的目的，为了简化以突出主要内容，我们省略了网格布局中的行高与列宽问题。</p>
<p>考虑一下以下代码：</p>
<pre>
<style>
<span style='color: red;'>#grid_box </span>{
<span style='color: blue;'>margin</span>: auto;
<span style='color: blue;'>width</span>: 300px;
<span style='color: blue;'>height</span>: 300px;
<span style='color: blue;'>border</span>: 1px solid tan;
<span style='color: blue;'>display</span>: grid;
<span style='color: blue;'>grid-template-areas</span>:
<span style='color: magenta'>'t4 t1 t1'</span>
<span style='color: magenta'>'t4 t2 t2'</span>
<span style='color: magenta'>'t4 t3 t3'</span>;
<span style='color: blue;'>position</span>: relative;
}
<span style='color: red;'>#grid_box > div </span>{ <span style='color: blue;'>border</span>: 1px solid pink; <span style='color: blue;'>display</span>: grid; <span style='color: blue;'>place-items</span>: center center; }
<span style='color: red;'>#t1 </span>{ <span style='color: blue;'>grid-area</span>: t1; }
<span style='color: red;'>#t2 </span>{ <span style='color: blue;'>grid-area</span>: t2; }
<span style='color: red;'>#t3 </span>{ <span style='color: blue;'>grid-area</span>: t3; }
<span style='color: red;'>#t4 </span>{ <span style='color: blue;'>grid-area</span>: t4; }
</style>
<<span style='color:darkred'>div</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"grid_box"</span>>
<<span style='color:darkred'>div</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"t1"</span>>顶部栏<<span style='color: darkred'>/div</span>>
<<span style='color:darkred'>div</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"t2"</span>>中间栏<<span style='color: darkred'>/div</span>>
<<span style='color:darkred'>div</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"t3"</span>>底部栏<<span style='color: darkred'>/div</span>>
<<span style='color:darkred'>div</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"t4"</span>>左侧栏<<span style='color: darkred'>/div</span>>
<<span style='color: darkred'>/div</span>>
</pre>
<p>这将得出如下效果：</p>
<div class="grid_box">
<div class="t1">顶部栏</div>
<div class="t2">中间栏</div>
<div class="t3">底部栏</div>
<div class="t4">左侧栏</div>
</div>
<p>因为没有规范网格内部项目的行高、列宽，在实际应用时可能会存在许多不确定性问题，例如，一种可能的现象是，内部项目的子元素如果尺寸偏大会直接影响相应行的行高和相应列的列宽，进而影响整体布局。我们可以设定内部项目子元素的定位（position: absolute，需要其上元素设定relative定位）与尺寸，藉此保持网格布局的完整性和统一性，但总不如采用了grid布局的主元素主动设定行高列宽来得干脆，就是，利用之前介绍过的 grid-template-rows 和 grid-template-columns 设定行高与列宽：</p>
<pre>
<span style='color: blue;'>grid-template-rows</span>: 1fr 6fr 1fr;
<span style='color: blue;'>grid-template-columns</span>: 1fr repeat(2, 1.5fr);
</pre>
<p>上面，我们将网格区域做了行高与列宽的尺寸定义，纵向方向（grid-template-rows）分为8个等分（fr），一、三两行行高各占1等分，中间行行高占6等分；水平方向（grid-template-columns）划分4个等分，第一列列宽占1等分，第二、三列各占1.5等分。这两行代码放在主元素 grid-template-areas 的上方即可：</p>
<pre>
<span style='color: blue;'>display</span>: grid;
<span style='color: blue;'>grid-template-rows</span>: 1fr 6fr 1fr;
<span style='color: blue;'>grid-template-columns</span>: 1fr repeat(2, 1.5fr);
<span style='color: blue;'>grid-template-areas</span>:
<span style='color: magenta'>'t4 t1 t1'</span>
<span style='color: magenta'>'t4 t2 t2'</span>
<span style='color: magenta'>'t4 t3 t3'</span>;
</pre>
<p>效果：</p>
<div class="grid_box grid_fixed">
<div class="t1">顶部栏</div>
<div class="t2">中间栏</div>
<div class="t3">底部栏</div>
<div class="t4">左侧栏</div>
</div>
<p>本讲小结：</p>
<p>使用 grid-template-areas 属性将事先通过子元素命名的 grid-area 网格名进行组合排列达到布局网格区域的目的，但如果需要保证布局尺寸的稳定性，则需要在布局之前设置好行高与列宽，分别使用属性 grid-template-rows 和属性 grid-template-columns 加以定义。</p>
</div>
头有点晕。我慢慢学习吧。
马黑黑 发表于 2022-10-18 12:26
要先命名单元格。例如，将 5、6、9、10 命名为 cc，然后去拼装就好。
grid-template-areas:
原来也可以用两个小点点来代替不使用的区域的啊。
我之前想得挺复杂，黑黑这个居然这么简单就实现了{:4_173:}
马黑黑 发表于 2022-10-18 12:43
#grid_papa { margin: auto; width: 740px; min-height: 400px; position: relative; }
#grid_papa > p, ...
黑黑的讲解深入浅出，果然，先弄明白不设置宽高的，再来理解不同宽高下的效果，会觉得功能被更进一步完善了，对网格布局能做细调感觉更明显了{:4_187:}
红影 发表于 2022-10-18 15:58
原来也可以用两个小点点来代替不使用的区域的啊。
我之前想得挺复杂，黑黑这个居然这么简单就实现了{:4_ ...
讲座里讲到那个点的额
加林森 发表于 2022-10-18 13:36
头有点晕。我慢慢学习吧。
不急不急慢慢来
马黑黑 发表于 2022-10-18 18:16
讲座里讲到那个点的额
的确讲过，我是说这个直接就把这块区域拿出来了，我总是习惯以为要一个个顺序下来，才能到这个区域{:4_173:}
红影 发表于 2022-10-18 22:13
的确讲过，我是说这个直接就把这块区域拿出来了，我总是习惯以为要一个个顺序下来，才能到这个区域{:4_17 ...
多尝试就知道的更清楚
马黑黑 发表于 2022-10-18 22:48
多尝试就知道的更清楚
嗯嗯，每次看看试试都觉得挺有收获的。