Vic Lin的沙龍

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

Vic Lin
Vic Lin
閱讀時間約 1 分鐘
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
css grid colspan sample code:
grid-column: xxx / span xxx; =>表示從第幾欄開始往右佔幾欄
以上述 grid-column: 2 / span 2; 來說結果如下: 其實寫成grid-column: span 2;也可以達到一樣效果，因為本身就是第2欄了，有點贅述。
接著改成 grid-column: 1 / span 2; ，結果如下:
因為本身是第2欄卻說要從第1欄開始，因此會換一行再往右佔兩欄。
接著改成 grid-column: 3 / span 2; ，結果如下:
因為本身是第2欄卻說要從第3欄開始，所以原本第2欄會空一格。
接著看看rowspan範例:
結果如下:
grid-column: 2;
grid-row: 2 / span 2;
這段其實可以簡化成: grid-row: span 2; 意思一樣。
接著改成:
grid-column: 1;
grid-row: 2 / span 2;
結果如下:
本筆記參考:
1. https://blog.boggy.tw/2021/07/08/grid-column/
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
Vic Lin的沙龍
20會員
161Content count
留言0
查看全部
發表第一個留言支持創作者！
Vic Lin的沙龍 的其他內容
用 CSS grid 來實作 RWD
css grid在排版非常好用，搭配media query即可達到RWD的效果，以下直接附上sample code: E 結果如下: width > 1200px: width width width 接著刻意讓第三個框框高度設為400px，畫面結果如下: 可以看到第二列的格
#RWD#cssgrid
Laravel collection filter count
E
#Laravel
PHP 生日西元年轉民國年
E 本筆記參考: 1. https://hivenson.pixnet.net/blog/post/191702742
#PHP
Laravel collection distinct values
collection concat找出不重複的值: ->unique('id')->pluck('id'); 本筆記參考: 1. https://stackoverflow.com/questions/42447682/distinct-values-with-pluck
#Laravel
PHP calculate days in year/month
取得2021年11月共有幾天: $total_days = cal_days_in_month(CAL_GREGORIAN, 11, 2021);   // $total_days=30 本筆記參考: 1. https://www.codegrepper.com/code-examples/php
#PHP
PHP sort two-dimensional array by column
  // $data is a two-dimensional array array_multisort(array_column($data, 'column_name'), SORT_ASC, $data); array_multisort(array_column($data, 'colum
用 CSS grid 來實作 RWD
css grid在排版非常好用，搭配media query即可達到RWD的效果，以下直接附上sample code: E 結果如下: width > 1200px: width width width 接著刻意讓第三個框框高度設為400px，畫面結果如下: 可以看到第二列的格
#RWD#cssgrid
Laravel collection filter count
E
#Laravel
PHP 生日西元年轉民國年
E 本筆記參考: 1. https://hivenson.pixnet.net/blog/post/191702742
#PHP
Laravel collection distinct values
collection concat找出不重複的值: ->unique('id')->pluck('id'); 本筆記參考: 1. https://stackoverflow.com/questions/42447682/distinct-values-with-pluck
#Laravel
PHP calculate days in year/month
取得2021年11月共有幾天: $total_days = cal_days_in_month(CAL_GREGORIAN, 11, 2021);   // $total_days=30 本筆記參考: 1. https://www.codegrepper.com/code-examples/php
#PHP
PHP sort two-dimensional array by column
  // $data is a two-dimensional array array_multisort(array_column($data, 'column_name'), SORT_ASC, $data); array_multisort(array_column($data, 'colum
你可能也想看
avatar
台中散戶の交易日常
2024/09/08
Thumbnail
操盤手の交易週報與展望(Sep.W2)
1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
avatar
美股韭菜王
2024/09/18
Thumbnail
Fed 9月會議：傳達「不想要落後給曲線」的正向信號，著手管理市場的衰退預期
重點摘要： 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
#聯準會#Fed#降息
avatar
方格子 vocus 官方沙龍
2024/08/27
Thumbnail
「相簿裡最捨不得刪的 N 張照片！」：完成任務抽富士即可拍！
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？ 新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
#相簿裡最捨不得刪的照片
avatar
SEO大師筆記的沙龍
2024/05/30
CSS在現代網站設計中扮演的關鍵角色
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
#css#網站優化#網站設計
avatar
郭欣玫的沙龍
2024/05/11
CSS - margin、padding
CSS Box Model 是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片: 簡單來說margin就是一個是外邊距，與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
avatar
郭欣玫的沙龍
2024/05/11
CSS-position
今天來介紹一下比較常用的4種定位方式 其中讓我最搞混的是relative跟absolute position: relative 還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
avatar
蕭宇廷的沙龍
2023/12/07
Thumbnail
CSS Grid 學習筆記 (二)
CSS Grid 基礎學習筆記第二彈
#CSS#程式學習#切版
avatar
蕭宇廷的沙龍
2023/12/06
Thumbnail
CSS Grid 學習筆記 (一)
紀錄 CSS Grid 的基礎用法。
#CSS#程式學習#RWD切版
avatar
Amber hh的沙龍
2022/06/14
Thumbnail
CSS筆記 ▎還分不清楚 transform 和 transition 嗎?
自學程式的過程中，你總是把transform、transition，甚至是translate搞混嗎！為了分辨「轉變」的三個關係字，並理解到底什麼時候要用哪個屬性才正確，這篇筆記誕生了！
#CSS#網頁開發#前端
avatar
Yi-Ming Ou的沙龍
2022/03/14
CSS - @import的使用
@import可以將一個style sheet 導入另一個style sheet example: 匯入式: 連結式: 顧名思義，就是創造一個css的stylesheet，然後進行連結(link) 再來我們開啟***.css的頁面，再進行匯入 讀取順位請將@import放在css頁面的最前列。
#CSS
avatar
Yi-Ming Ou的沙龍
2022/03/08
CSS - 乘號(*)的作用
突然看到有人在CSS的Tutorial放入這個符號，一下子把我弄迷糊了。 搞了半天*{}是全局佈署，只要有連接到該css的都會賦予相同屬性，不知道效果跟 html{}是不是一樣的？
#CSS
avatar
Kate Liu的沙龍
2022/03/08
Thumbnail
【CSS必學屬性】box-sizing
都市傳說：「網頁跑版時，設定 box-sizing: border-box一切搞定！」
#boxsizing#css
avatar
Allison的沙龍
2022/01/09
Thumbnail
[CSS筆記] transition、transform、animation 動畫屬性
這是一篇關於 CSS 動畫屬性的學習筆記，如果你剛好也在學習的話，歡迎進來看看！
#CSS#動畫#程式
avatar
台中散戶の交易日常
2024/09/08
Thumbnail
操盤手の交易週報與展望(Sep.W2)
1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
avatar
美股韭菜王
2024/09/18
Thumbnail
Fed 9月會議：傳達「不想要落後給曲線」的正向信號，著手管理市場的衰退預期
重點摘要： 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
#聯準會#Fed#降息
avatar
方格子 vocus 官方沙龍
2024/08/27
Thumbnail
「相簿裡最捨不得刪的 N 張照片！」：完成任務抽富士即可拍！
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？ 新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
#相簿裡最捨不得刪的照片
avatar
SEO大師筆記的沙龍
2024/05/30
CSS在現代網站設計中扮演的關鍵角色
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
#css#網站優化#網站設計
avatar
郭欣玫的沙龍
2024/05/11
CSS - margin、padding
CSS Box Model 是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片: 簡單來說margin就是一個是外邊距，與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
avatar
郭欣玫的沙龍
2024/05/11
CSS-position
今天來介紹一下比較常用的4種定位方式 其中讓我最搞混的是relative跟absolute position: relative 還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
avatar
蕭宇廷的沙龍
2023/12/07
Thumbnail
CSS Grid 學習筆記 (二)
CSS Grid 基礎學習筆記第二彈
#CSS#程式學習#切版
avatar
蕭宇廷的沙龍
2023/12/06
Thumbnail
CSS Grid 學習筆記 (一)
紀錄 CSS Grid 的基礎用法。
#CSS#程式學習#RWD切版
avatar
Amber hh的沙龍
2022/06/14
Thumbnail
CSS筆記 ▎還分不清楚 transform 和 transition 嗎?
自學程式的過程中，你總是把transform、transition，甚至是translate搞混嗎！為了分辨「轉變」的三個關係字，並理解到底什麼時候要用哪個屬性才正確，這篇筆記誕生了！
#CSS#網頁開發#前端
avatar
Yi-Ming Ou的沙龍
2022/03/14
CSS - @import的使用
@import可以將一個style sheet 導入另一個style sheet example: 匯入式: 連結式: 顧名思義，就是創造一個css的stylesheet，然後進行連結(link) 再來我們開啟***.css的頁面，再進行匯入 讀取順位請將@import放在css頁面的最前列。
#CSS
avatar
Yi-Ming Ou的沙龍
2022/03/08
CSS - 乘號(*)的作用
突然看到有人在CSS的Tutorial放入這個符號，一下子把我弄迷糊了。 搞了半天*{}是全局佈署，只要有連接到該css的都會賦予相同屬性，不知道效果跟 html{}是不是一樣的？
#CSS
avatar
Kate Liu的沙龍
2022/03/08
Thumbnail
【CSS必學屬性】box-sizing
都市傳說：「網頁跑版時，設定 box-sizing: border-box一切搞定！」
#boxsizing#css
avatar
Allison的沙龍
2022/01/09
Thumbnail
[CSS筆記] transition、transform、animation 動畫屬性
這是一篇關於 CSS 動畫屬性的學習筆記，如果你剛好也在學習的話，歡迎進來看看！
#CSS#動畫#程式