- Grid 布局只對項目生效
- 劃分網格的線，稱為"網格線"（grid line）。水平網格線劃分出行，垂直網格線劃分出列。
容器
display: grid指定一個容器采用網格布局
- inline-grid
- 容器子元素（項目）的float、display: inline-block、display: table-cell、vertical-align和column-*等設置都將失效
- grid-template-columns屬性定義每一列的列寬
grid-template-columns: subgrid;
- 延續父級的列布局，例如某個子項目跨越3列，在子項上使用該屬性，則子項目中依然會按父級的列布局分為3列
grid-template-columns: 100px 100px 100px;- 除了使用絕對單位，也可以使用百分比。
grid-template-columns: 33.33% 33.33% 33.33%;
- 重復寫同樣的值非常麻煩，尤其網格很多時。這時，可以使用repeat()函數。
grid-template-columns: repeat(3, 33.33%);
- repeat()重復某種模式也是可以的。
grid-template-columns: repeat(2, 100px 20px 80px);
- 單元格的大小是固定的，但是容器的大小不確定。如果希望每一行（或每一列）容納盡可能多的單元格，這時可以使用auto-fill關鍵字表示自動填充。
grid-template-columns: repeat(auto-fill, 100px);
- auto-fit則會盡量擴大單元格的寬度
- 為了方便表示比例關系，網格布局提供了fr關鍵字（fraction 的縮寫，意為"片段"）。如果兩列的寬度分別為1fr和2fr，就表示后者是前者的兩倍。
- 分成3份
grid-template-columns: 1fr 2fr;
- fr可以與絕對長度的單位結合使用，這時會非常方便
- minmax()函數產生一個長度范圍，表示長度就在這個范圍之中。它接受兩個參數，分別為最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
- auto關鍵字表示由瀏覽器自己決定長度
grid-template-columns: 100px auto 100px;
- grid-template-columns屬性和grid-template-rows屬性里面，還可以使用方括號，指定每一根網格線的名字
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];- 網格布局允許同一根線有多個名字，比如[fifth-line row-5]
- grid-template-rows屬性定義每一行的行高
grid-template-rows: 100px 100px 100px;
- row-gap屬性設置行與行的間隔（行間距）
row-gap: 20px;- 可以理解為項目周圍有一圈10px的margin
- column-gap屬性設置列與列的間隔（列間距）
- 網格布局允許指定"區域"（area），一個區域由單個或多個單元格組成。grid-template-areas屬性用于定義區域
- 如果某些區域不需要利用，則使用"點"（.）表示
- 區域的命名會影響到網格線。每個區域的起始網格線，會自動命名為區域名-start，終止網格線自動命名為區域名-end
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a a a'
'd . f'
'g h i';
- grid-auto-flow屬性決定，默認值是row，即"先行后列"。也可以將它設成column，變成"先列后行"
- 劃分網格以后，容器的子元素會按照順序，自動放置在每一個網格。默認的放置順序是"先行后列"，即先填滿第一行，再開始放入第二行
- row dense和column dense。這兩個值主要用于，某些項目指定位置以后，剩下的項目怎么自動放置。
- 設為row dense，表示"先行后列"，并且盡可能緊密填滿，盡量不出現空格
- 注釋：網格布局會按照子項順序一個個塞入網格中，遵循從左到右或從上到下放到最后一個空網格中，設置了 dense 后會放在從左到右或從上到下可能存在的空格中。
- justify-items屬性設置單元格內容的水平位置（左中右）
justify-items: start | end | center | stretch;- stretch：拉伸，占滿單元格的整個寬度（默認值）。
- align-items屬性設置單元格內容的垂直位置（上中下）
align-items: start | end | center | stretch;
- justify-content屬性是整個內容區域在容器里面的水平位置（左中右）
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;- space-around - 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。
- space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。
- space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。
- 注釋：并不一定是整個容器的位置，而是容器內行和列的位置
- align-content屬性是整個內容區域的垂直位置（上中下）
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
- grid-auto-columns屬性和grid-auto-rows屬性用來設置，瀏覽器自動創建的多余網格的列寬和行高。
- 有時候，一些項目的指定位置，在現有網格的外部。比如網格只有3列，但是某一個項目指定在第5行。這時，瀏覽器會自動生成多余的網格，以便放置項目。
- 它們的寫法與grid-template-columns和grid-template-rows完全相同
- 如果不指定這兩個屬性，瀏覽器完全根據單元格內容的大小，決定新增網格的列寬和行高。
grid-auto-rows: 50px指定新增的行高統一為50px
簡寫
- grid屬性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性的合并簡寫形式
- place-items屬性是align-items屬性和justify-items屬性的合并簡寫形式
place-items: <align-items> <justify-items>;place-items: start end;- 如果省略第二個值，則瀏覽器認為與第一個值相等。
- place-content屬性是align-content屬性和justify-content屬性的合并簡寫形式
- 如果省略第二個值，瀏覽器就會假定第二個值等于第一個值
- gap屬性是column-gap和row-gap的合并簡寫形式
gap: <row-gap> <column-gap>;- 如果gap省略了第二個值，瀏覽器認為第二個值等于第一個值
- grid-template屬性是grid-template-columns、grid-template-rows和grid-template-areas這三個屬性的合并簡寫形式
項目
- grid-column-start屬性：左邊框所在的垂直網格線
grid-column-start: 2;- 這四個屬性的值，除了指定為第幾個網格線，還可以指定為網格線的名字
grid-column-start: header-start;
- 這四個屬性的值還可以使用span關鍵字，表示"跨越"，即左右邊框（上下邊框）之間跨越多少個網格。
grid-column-start: span 2;左邊框距離右邊框跨越2個網格
- grid-column-end屬性：右邊框所在的垂直網格線
- grid-row-start屬性：上邊框所在的水平網格線
- grid-row-end屬性：下邊框所在的水平網格線
- grid-area屬性指定項目放在哪一個區域
- justify-self屬性設置單元格內容的水平位置（左中右）
- start：對齊單元格的起始邊緣。
- end：對齊單元格的結束邊緣。
- center：單元格內部居中。
- stretch：拉伸，占滿單元格的整個寬度（默認值）。
- align-self屬性設置單元格內容的垂直位置（上中下）
簡寫
- grid-column屬性是grid-column-start和grid-column-end的合并簡寫形式
grid-column: 1 / 3;- 這兩個屬性之中，也可以使用span關鍵字，表示跨越多少個網格
grid-column: 1 / span 2;
- grid-row屬性是grid-row-start屬性和grid-row-end的合并簡寫形式。
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
grid-area: 1 / 1 / 3 / 3;
- grid-area屬性還可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并簡寫形式，直接指定項目的位置。
- place-self屬性是align-self屬性和justify-self屬性的合并簡寫形式
- 如果省略第二個值，place-self屬性會認為這兩個值相等
浙公網安備 33010602011771號