Grid(CSS)
Grids - Learn web development | MDN
Grid
二維方式定位模型
並非用於取代Flexbox(CSS),而是補足flexbox的不足
使用display: grid定義主容器顯示類型
搭配grid-template(CSS)定義版型結構
2023-11-21 An Interactive Guide to CSS Grid
預設為單列,依據內容調整行數,
2021-05-12 A Complete Guide to CSS Grid
2020-12-04 最新版、レスポンシブ対応のレイアウト・グリッドデザイン徹底解説 | コリス
CSS Grid Areas
宣告長寬
grid-template-columns(CSS)
grid-template-rows(CSS)
寬高可使用空行區隔,指定每行/列內的各空間寬度
亦可使用repeat(4, 2rem)一次建立4行2rem寬度的空間
repeat()內可使用auto-fill填滿所有空間
或auto-fit填滿至指定空間
可以使用grid-auto-columns、grid-auto-rows快速指定版型
grid-auto-columns: 60px;
分配元素
grid-auto-flow(CSS)
grid-template-areas(CSS)
grid-area(CSS)
grid-gap(CSS)
區塊
grid-column(CSS)
grid-row(CSS)
justify-self(CSS)、align-self(CSS)
Subgrid(CSS)
響應式
@alicalimli_dev: Responsive grid with 1 line of CSS 🔥
https://video.twimg.com/amplify_video/1696772808972361729/vid/836x720/3yBSfV4JixcLmQco.mp4?tag=14#.mp4
code:css
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
CSS