網格式佈局
層疊樣式表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.tw/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>
