梅花的CSS筆記｜一行語法把「我的連結」變雙欄｜痞客邦語法實用教學 @ 梅花問路

grid-template-columns 連結區變雙欄痞客邦語法梅花問路

由於問路家族太龐大了，放個連結漏漏長~

看到了首陽問路超厲害的把它變成雙欄，就立馬向首陽問路的採藥請教

採藥也有詳細的教學文教大家利用「自訂的側欄區塊」成功達成把側欄變成雙欄式顯示的語法設定步驟

梅花採用的方式是利用痞客邦後台原先就有的「我的連結」區塊，設定這裡面的每一個連結字數都是4個字

然後直接加入以下的語法在自己的CSS最後端即可（點連結前往設定自己的樣式CSS）

#mylink.hslice.box .inner-box ul{display: grid;grid-template-columns: 50% 50%;text-align:left;} /* 把問路家族變成兩行 */

但是！如果你這一區有的連結字數比較多的話，有可能是會跑版的喔！

別擔心，遇到這種狀況的話，一樣有得救！請參考以下的教學文章～

2021/08/15 更新。。。。。。。

因為我們家族人口眾多，連結很長

我發現可以設定三個數字就變成三欄了，歡迎大家試試～

#mylink.hslice.box .inner-box ul{display: grid;grid-template-columns: 33% 33% 34%;text-align:left;} /* 把問路家族變成三行 */

如果有遇到其他的狀況，也歡迎留言詢問或是和梅花討論呦～

歡迎使用梅花提供的免費版型，如果有客製版面的需求可留言或來信討論洽談

❖ 延伸閱讀

梅花的語法筆記

檢視CSS標籤F12 (Ctrl+Shift+I) 箭頭粉.jpeg ＊開發人員工具＊

部落格整體 #body 箭頭粉.jpeg ＊換背景底圖＊＊換字體＊＊換部落格ICON＊＊設計LOGO＊

封面橫幅#banner/#header 箭頭粉.jpeg ＊換封面底圖＊＊部落格標題敘述大小位置＊

文章區塊 #content 箭頭粉.jpeg ＊改文章標題字體、背景＊

公告版面 #spotlight 箭頭粉.jpeg ＊公告版面應用＊

側欄區塊 #links 箭頭粉.jpeg ＊改側欄標題的背景＊＊Facebook粉專外掛＊＊音樂外掛＊＊YouTube外掛＊＊分享連結階層＊

痞客幫新手入門

痞客邦新手入門⑴｜新手基礎入門設定開啟部落格設定作者名稱	痞客邦新手入門⑹｜如何自訂個性化ICON圖標
痞客邦新手入門⑵｜如何編輯側欄推薦連結區	痞客邦新手入門⑺｜用語法外掛來撥放音樂
痞客邦新手入門⑶｜宣傳Facebook粉專、浮動FB粉專外掛	痞客邦新手入門⑻｜移除煩人的痞客邦廣告! 廣告__OUT!
痞客邦新手入門⑷｜利用公告版位製造多樣性	痞客邦新手入門⑼｜如何自己設定文章顯示的縮圖
痞客邦新手入門⑸｜修改版面的字體字型	痞客邦新手入門⑽｜如何在痞客邦發表文章