李皇谛>帮助页面>网格式布局

網格式布局
層疊樣式表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因其豐富的想象力、可愛的聲線和繪畫風格、多樣的視頻形式和新奇不斷的視頻內容深得觀眾喜愛。

本命介紹

李皇谛>帮助页面>网格式布局

網格式布局層疊樣式表HTML/CSS/JavaScript

導覽選單

搜尋

網格式布局
層疊樣式表HTML/CSS/JavaScript