User:李皇谛/Help/CSS Grid

网格式布局
层叠样式表HTML/CSS/JavaScript

合理利用网格式布局，可以为你的排版效果锦上添花。

我发现以自己的口吻做介绍很简单，但要做到是谁都能一读就懂就很困难，尤其是对于那些初来乍到的编辑者来说，他们本来就没有MediaWiki的编程基础，除非同时很想学HTML，基本上都是“翻书马冬梅，合书麻冬妹”。

要花几个小时的时间重新组织语言，但准备提交草稿的时候才发现严重离题，是阿斯伯格综合征侯群的痛。

所以我还是以自己的理解把CSS的网格式布局说好先……

向display属性指定该框架类型为Grid表格。
指示为Inline-Grid属性的网格是内联样式，不会另起一行。
设为网格布局以后，除非重新定义单元的框架类型（display），float inline-block display: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 提前结束

然后效果是这样的……

<标题>

<副标题>

<内容>

这玩意是临时加进去
没打标签的

看到没有，这还不算一个网格，因为还有些关键声明还没有设置好导致网格上的单元被平分摆放，如果有些内容过多或者过少，就会给人一种头重脚轻的感觉。

所以咱们需要为网格设置每个单元的行大小和列大小。

在框架上用grid-template-rows指定每个单元在框架上各自的行大小。
在框架上用grid-template-columns指定每个单元在框架上各自的列大小。

fr

minmax(<最小值> <最大值>)

grid-template-rows:minmax(2em 90%) auto calc(20% - 14px);

在单元上用grid-area指定这个单元在网格上对应的标签
支持其他格式的文字而非HTML控制字

可统一在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>

<标题>

<副标题>

<内容>

这玩意是临时加进去的，没打标签就算了还给我塞了很多无意义的文字

虽然确实做到了手动调整行大小和列大小，避免了头重脚轻的现象，但是临时加进去的文字居然成了疙瘩，就很麻烦，所以稍微动下手把新添加的单元指定好标签然后放在内容的右侧，标题和副标题都要延伸到底，偷偷把副标题的高度（行大小）改一遍……

<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>

<标题>

<副标题>

<内容>

这玩意是临时加进去的，起码比硬塞还好很多了，虽然文字还是很长。

怎么样，指定单元位置还有行列大小是不是很麻烦？你们可能会说，都无纸化时代了还要用纸和笔打草稿，不很扯蛋嘛！

不过难熬的日子也总该结束了，因为你可以直接拿着这些小抄交作业，满分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>

条目预览

Warma

Warma是活跃于哔哩哔哩弹幕视频网的个人特色频道Up主。

Warma因其丰富的想象力、可爱的声线和绘画风格、多样的视频形式和新奇不断的视频内容深得观众喜爱。

本命介绍

User:李皇谛/Help/CSS Grid

网格式布局层叠样式表HTML/CSS/JavaScript

导航菜单

搜索

网格式布局
层叠样式表HTML/CSS/JavaScript