CSS grid 達成類似 table colspan, rowspan 排版

更新於 發佈於 閱讀時間約 2 分鐘

css display grid可以達到類似table span的排版效果,但還是有些差異,table的span其實是合併,css grid比較像是要佔幾格的意思。

如下程式碼為例,colspan是要往右合併的意思,因此會少一個td。

raw-image


css grid colspan sample code:


grid-column: xxx / span xxx; =>表示從第幾欄開始往右佔幾欄

以上述 grid-column: 2 / span 2; 來說結果如下: 其實寫成grid-column: span 2;也可以達到一樣效果,因為本身就是第2欄了,有點贅述。


raw-image


接著改成 grid-column: 1 / span 2; ,結果如下:

因為本身是第2欄卻說要從第1欄開始,因此會換一行再往右佔兩欄。

raw-image


接著改成 grid-column: 3 / span 2; ,結果如下:

因為本身是第2欄卻說要從第3欄開始,所以原本第2欄會空一格。

raw-image



接著看看rowspan範例:

結果如下:

raw-image

grid-column: 2;
grid-row: 2 / span 2;

這段其實可以簡化成: grid-row: span 2; 意思一樣。


接著改成:

grid-column: 1;
grid-row: 2 / span 2;

結果如下:

raw-image


本筆記參考:
1. https://blog.boggy.tw/2021/07/08/grid-column/

留言
avatar-img
留言分享你的想法!
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
本篇教學將介紹 renpy 中網格(Grid)的基本造型特性,包括網格的定義、常見造型特性以及使用範例。透過這些內容,讀者可以更瞭解如何在 renpy 中運用網格來製作遊戲畫面。
Thumbnail
本篇教學將介紹 renpy 中網格(Grid)的基本造型特性,包括網格的定義、常見造型特性以及使用範例。透過這些內容,讀者可以更瞭解如何在 renpy 中運用網格來製作遊戲畫面。
Thumbnail
在學習 CSS 的過程中,Padding 與 Margin 是兩個經常出現的名詞,但對於初學者來說,可能會有些難以理解。因此,本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後,便能設計出更具層次或易讀的網頁。
Thumbnail
在學習 CSS 的過程中,Padding 與 Margin 是兩個經常出現的名詞,但對於初學者來說,可能會有些難以理解。因此,本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後,便能設計出更具層次或易讀的網頁。
Thumbnail
CSS 裡的「寬度,最大寬度,最小寬度」分別是什麼呢? ➊ width 用來設定元素的寬度,且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
Thumbnail
CSS 裡的「寬度,最大寬度,最小寬度」分別是什麼呢? ➊ width 用來設定元素的寬度,且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
Thumbnail
網格(Grid)是一個既普遍又隱形的存在,它以規則的排列方式存在於我們生活的各個角落。無論是在城市建築中的街區規劃,還是在數字化的屏幕上的像素點,網格都在無聲地將空間分割成方形或矩形的區域,為我們的生活和工作提供組織和結構。 除了實際的建築和數位設計,生活中還有各種各樣的網格存在。櫃子就是一個簡單
Thumbnail
網格(Grid)是一個既普遍又隱形的存在,它以規則的排列方式存在於我們生活的各個角落。無論是在城市建築中的街區規劃,還是在數字化的屏幕上的像素點,網格都在無聲地將空間分割成方形或矩形的區域,為我們的生活和工作提供組織和結構。 除了實際的建築和數位設計,生活中還有各種各樣的網格存在。櫃子就是一個簡單
Thumbnail
歡迎來到第二周,這一周我們就要進入Flexbox了。今天我們會先認識Flexbox的起手式與flex-item的伸縮規則。
Thumbnail
歡迎來到第二周,這一周我們就要進入Flexbox了。今天我們會先認識Flexbox的起手式與flex-item的伸縮規則。
Thumbnail
把文字分隔成不同欄還有第二招!歡迎來看看~
Thumbnail
把文字分隔成不同欄還有第二招!歡迎來看看~
Thumbnail
「商業簡報只等於好看專業的投影片」其實是一種誤解,我在各地跨國企業的親身經驗,在需要討論細項、數字的時候,簡報的載具也會混有試算表來作靈活運用。單一地強化投影片的技巧,就忽略了實戰中商業機構的需要。相對起投影片強調空間運用,上班族在預備試算表的時候,內容更容易出現密麻麻、難以快速看清的情況。
Thumbnail
「商業簡報只等於好看專業的投影片」其實是一種誤解,我在各地跨國企業的親身經驗,在需要討論細項、數字的時候,簡報的載具也會混有試算表來作靈活運用。單一地強化投影片的技巧,就忽略了實戰中商業機構的需要。相對起投影片強調空間運用,上班族在預備試算表的時候,內容更容易出現密麻麻、難以快速看清的情況。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News