Grid(CSS)
二維方式定位模型
使用display: grid定義主容器顯示類型
預設為單列,依據內容調整行數,
宣告長寬
寬高可使用空行區隔,指定每行/列內的各空間寬度
亦可使用repeat(4, 2rem)一次建立4行2rem寬度的空間
repeat()內可使用auto-fill填滿所有空間
或auto-fit填滿至指定空間
可以使用grid-auto-columns、grid-auto-rows快速指定版型
grid-auto-columns: 60px;
分配元素
區塊
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));
}