這是我在學習MDN內CSS Grids教程的學習筆記，教程地址：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
注：這個筆記之能做溫習只用，看教程請上以上地址學習或者其他教學資源，
容器上設定display: grid;就成為了grid容器，
Grid容器上設定：
grid-template-column: 200px auto 1fr;可以設定各個列，1fr是占比，空間先被200px這樣的固定寬度占用，剩下的再按各自fr的占比分配，
grid-column-gap或column-gap設定列之間的間隔寬度，不能使用fr，
grid-row-gap或row-gap設定行之間的間隔寬度，不能使用fr，
grid-gap或gap可以同時設定行和列的間隔寬度，不能使用fr，
grid-template-column: repeat(3, 1fr)可以設定三個各為1fr的列，
隱形grid和顯性grid的區分：
隱形grid是指指定列，沒有指定行數，寬度大小都是默認auto，當溢位時就變成和flexbox差不多一樣的排列顯示方式，
顯性grid是指指定了列和行，使用grid-auto-rows和grid-auto-columns屬性指定行和列的大小，
Grid-auto-rows: minmax(100px, auto);可以設定行高最小100px,最大auto，
Grid-auto-columns: repeat(auto-fill, minmax(200px, 1fr));可以設定列最小為200px，自動列數，有多余空間就使用掉，(好像要配合以上的grid-auto-rows才有效果！！！)
Grid元素上設定：
grid-column: 1 / 3;可以設為1到3列的橫跨排布；-1為最后一列
grid-row: 2;可以設為在第二行的排布；-1為最后一行
grid-column-start，grid-column-end，grid-row-start，grid-row-end為以上的拆分，
以下屬性放在grid容器上可以設定排布模板（只能是矩形，可以使用點符號 . 來代替空白）：
grid-template-areas:
“header header”
“sidebar content”
“footer footer”；
然后再各個grid元素上設定：grid-area: header;這樣，
Grid可以代替像bootstrap這樣的框架，可以設定12列，以下是line-based的圖：
如下代碼設定每個grid元素的位置和占比，
header { grid-column: 1 / 13; grid-row: 1; } article { grid-column: 4 / 13; grid-row: 2; } aside { grid-column: 1 / 4; grid-row: 2; } footer { grid-column: 1 / 13; grid-row: 3; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/125599.html
標籤：Html/Css