网格式布局
层叠样式表HTML/CSS/JavaScript
层叠样式表HTML/CSS/JavaScript
合理利用网格式布局，可以为你的排版效果锦上添花。
我发现以自己的口吻做介绍很简单，但要做到是谁都能一读就懂就很困难，尤其是对于那些初来乍到的编辑者来说，他们本来就没有MediaWiki的编程基础，除非同时很想学HTML，基本上都是“翻书马冬梅，合书麻冬妹”。
要花几个小时的时间重新组织语言，但准备提交草稿的时候才发现严重离题，是阿斯伯格综合征侯群的痛。
所以我还是以自己的理解把CSS的网格式布局说好先……
- 向
display属性指定该框架类型为Grid表格。
指示为Inline-Grid属性的网格是内联样式，不会另起一行。
设为网格布局以后，除非重新定义单元的框架类型（display），floatinline-blockdisplay:table-cellvertical-align和column-*等设置都不起作用。
- 向
<div style="display:grid;"> <……> </div>
然后声明每个单元在网格中的位置……
- 在框架上用
grid-template-areas指定每个单元在网格上的位置
前后都用单引号以包住一行，用空格区分两个单元。
如果这个单元要占用多个位置也就是延伸大小，可以输入相同的关键词。
留空以输入不被打标签的其他元素可以输入一个半角句号代替。 - 在单元上用
grid-area指定这个单元在网格上对应的标签
支持其他格式的文字而非HTML控制字
- 在框架上用
<div style="display:grid; border:0.4em dashed Black; grid-template-areas:'头像 标题' '头像 副标题' '内容 内容'"> <div style="grid-area:标题; border:0.2em solid Orange;"><标题></div> <div style="grid-area:副标题;border:0.2em solid Green;"><副标题></div> <div style="grid-area:内容;border:0.2em solid Blue;"><内容></div> <div style="grid-area:头像;border:0.2em solid Red;"><img src= …… /></div> <div !--临时加进去的div--><span>这玩意是临时加进去<br>没打标签的</span></div> </div>
以下为错误用法：
<div style="display:grid; grid-template-areas:'头像 标题' '头像 副标题' '内容 头像';"> 不能跨区域使用同一元素 <div style="display:grid; grid-template-areas:'头像 标题' '头像 副标题' '内容 内容' '内容 .';"> 十字展开不能缺角 <div style="display:grid; grid-template-areas:"头像 标题" "头像 副标题" "内容 ." "副标题 .";"> 你百特色。 从外挂样式抄作业填了内联样式的空，结果双引号导致 style 提前结束
然后效果是这样的……
<标题>
<副标题>
<内容>
<img src= …… />
这玩意是临时加进去
没打标签的
没打标签的
看到没有，这还不算一个网格，因为还有些关键声明还没有设置好导致网格上的单元被平分摆放，如果有些内容过多或者过少，就会给人一种头重脚轻的感觉。
所以咱们需要为网格设置每个单元的行大小和列大小。
- 在框架上用
grid-template-rows指定每个单元在框架上各自的行大小。 - 在框架上用
grid-template-columns指定每个单元在框架上各自的列大小。 延伸区域的单元最终的行大小和列大小是随着区域定位而叠加的。 - 在单元上用
grid-area指定这个单元在网格上对应的标签
支持其他格式的文字而非HTML控制字
用空格隔开不同行大小和列大小。
可以使用fr单位来设置参照大小，取最小fr的量为最小公倍数，最大的fr量为最大公约数，与其他单元格一起平分大小，支持小数点。
可以使用minmax(<最小值> <最大值>)计算式来对有效值进行约束，支持不同单位。比如grid-template-rows:minmax(2em 90%) auto calc(20% - 14px);。- 在框架上用
可统一在grid-template这函数上一起设置每个单元在框架上的位置和大小，效果是这样的：
不能在这个函数用minmax算法
<div style="display:grid; grid-template:'头像 标题' 1.4em '头像 副标题' 1em '内容 头像' / 2em 1fr;"> ↓ <div style="display:grid; grid-template-rows: 1.4em 1em auto; grid-template-columns:2em 1fr; grid-template-areas: '头像 标题' '头像 副标题' '内容 头像';">
然后咱们设置好行大小和列大小，提交上去……
<div style="display:grid; border:0.4em dashed Black; text-indent:0px; grid-template-rows: 1.4em 1em auto; grid-template-columns:12em 1fr; grid-template-areas:'头像 标题' '头像 副标题' '内容 内容';"> <div style="grid-area:标题; border:0.2em solid Orange;"><标题></div> <div style="grid-area:副标题;border:0.2em dashed Green; border-bottom-style:dotted;"><副标题></div> <div style="grid-area:内容;border:0.2em dashed Blue; border-top-style:dotted;"><内容></div> <div style="grid-area:头像;border:0.2em solid Red;"><img src= …… /></div> <div !--临时加进去的div--><span>这玩意是临时加进去的，没打标签就算了还给我塞了很多无意义的文字</span></div> </div>
<标题>
<副标题>
<内容>
<img src= …… />
这玩意是临时加进去的，没打标签就算了还给我塞了很多无意义的文字
虽然确实做到了手动调整行大小和列大小，避免了头重脚轻的现象，但是临时加进去的文字居然成了疙瘩，就很麻烦，所以稍微动下手把新添加的单元指定好标签然后放在内容的右侧，标题和副标题都要延伸到底，偷偷把副标题的高度（行大小）改一遍……
<div style="display:grid; border:0.4em dashed Black; text-indent:0px; grid-template:'头像 标题 标题' 2em '头像 副标题 副标题' max-content '内容 内容 附加' auto / 12em 1fr；"> <div style="grid-area:标题; border:0.2em solid Orange;"><标题></div> <div style="grid-area:副标题;border:0.2em solid Green;"><副标题></div> <div style="grid-area:内容;border:0.2em solid Blue;"><内容></div> <div style="grid-area:头像;border:0.2em solid Red;"><img src= …… /></div> <div style="grid-area:附加;"><span>这玩意是临时加进去的，起码比硬塞还好很多了，虽然文字还是很长。</span></div> </div>
<标题>
<副标题>
<内容>
<img src= …… />
这玩意是临时加进去的，起码比硬塞还好很多了，虽然文字还是很长。
怎么样，指定单元位置还有行列大小是不是很麻烦？你们可能会说，都无纸化时代了还要用纸和笔打草稿，不很扯蛋嘛！
不过难熬的日子也总该结束了，因为你可以直接拿着这些小抄交作业，满分20分能拿14分，好过被老师批零分啊！
剩下的6分是你的卷面分
<div style="padding:0px 1em 1em 1em; border:1px solid #f14344; color:White; border-radius:1em; background-color:#750b1cdd; display:grid; grid-template:'窗口标题 窗口标题 窗口标题' 2em '图标 pad 标题' 1.8em '图标 pad 内容' auto '图标 pad 简要' 1.8em / max-content 0.5em auto;"> <div style="grid-area:窗口标题; text-align:center; font-weight:bold; font-size:0.9em;">条目预览</div> <div style="grid-area:图标;"><img src="https://img.moegirl.org.cn/common/4/44/Warma.jpg" style="width:10em; height:10em;"/></div> <!--grid-area:pad; 无内容--> <div style="grid-area:标题;font-weight:bold; color:Orange; font-size:1.6em;">Warma</div> <div style="grid-area:内容;line-height:1em; color:White;"><p>Warma是活跃于[[Bilibili|哔哩哔哩弹幕视频网]]的个人特色频道Up主。</p><p>Warma因其丰富的想象力、可爱的声线和绘画风格、多样的视频形式和新奇不断的视频内容深得观众喜爱。</p><p></div> <div style="grid-area:简要; display:flex; flex-direction:row-reverse;"><div style="width:auto; font-size:1.2em; font-weight:bold; opacity:0.8;">本命介绍</div></div></div> </div>
