iT邦幫忙

2023 iThome 鐵人賽

DAY 15
2

Subgrid

subgrid支援度:Can I Use)

昨天了解了grid,今天來看一下subgrid

subgrid是什麼?

  • subgrid ,其實只是grid屬性中的grid-template-columnsgrid-template-rows新的值,子元素在行軸或列軸上繼承父元素的網格。
  • subgrid還可繼承父層網格、線、區域。

subgrid的發明也解決了以往一直很難解決的卡片對齊問題!

Before:卡片間是獨立的,header、footer、content會根據各自的內容而有不同的高,所以很難對齊。
https://ithelp.ithome.com.tw/upload/images/20230930/20111500uKP2tp1mNw.png
After:有了subgrid,header、footer、content的高度會自動對齊上層父層的共用軌道,如下:

Codepen範例

IT15-Day15-subgrid

參考來源


上一篇
【Day14】比Flex更方便的排版屬性!? - Grid
下一篇
【Day16】夢寐以求父層選擇器 - :has()
系列文
你應該要知道的CSS技巧:發掘被忽略但實用的屬性30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言