1.網(wǎng)格容器:通過display屬性設(shè)置屬性值為grid或inline-grid可以創(chuàng)建一個(gè)網(wǎng)格容器。網(wǎng)格容器中的所有子元素就會自動變成網(wǎng)格項(xiàng)目（grid item）

1.1網(wǎng)格項(xiàng)目默認(rèn)放在行中，并且跨網(wǎng)格容器的全寬

2.顯示網(wǎng)格:使用grid-template-columns和grid-template-rows屬性可以顯式的設(shè)置一個(gè)網(wǎng)格的列和行

2.1grid-template-rows指定的每個(gè)值可以創(chuàng)建每行的高度。行高的尺寸可以是任何非負(fù)值，長度可以是px、%、em等長度單位的值。

item1和item2具有固定的高，分別為50px和100px。因?yàn)橹欢x了兩個(gè)行的高度值，所以item3和item4的高度是根據(jù)其自身的內(nèi)容來定義

2.2grid-template-columns指定的每個(gè)值來創(chuàng)建每列的列寬

item4、item5和item6放置在新的一行（第二行），因?yàn)間rid-template-columns只定義了三列的大小，它們也分別放置在列1、列2和列3；其中列1、列2和列3的尺寸大小等于item1、item2和item3寬度

fr單位可以幫助我們創(chuàng)建一個(gè)彈列的網(wǎng)格軌道。它代表了網(wǎng)格容器中可用的空間（就像Flexbox中無單位的值）

在這個(gè)示例中，網(wǎng)格容器分成了4等份（1 + 1 + 2 = 4），每一份（1fr）是網(wǎng)格容器寬度的四分之一。所以item1和item2的寬度是網(wǎng)格容器的四分之一寬，item3是網(wǎng)格容器寬度的四分之二（2fr）

當(dāng)fr和其它長度單位的值結(jié)合在一起的時(shí)候，fr是基于網(wǎng)格容器可用空間來計(jì)算

在這個(gè)示例中，網(wǎng)格容器可用空間是網(wǎng)格寬度減去3rem和25%剩下的寬度，而fr就是基于這個(gè)尺寸計(jì)算

3.網(wǎng)格軌道最小和最大尺寸:可以通過minmax()函數(shù)來創(chuàng)建網(wǎng)格軌道的最小或最大尺寸

minmax()函數(shù)接受兩個(gè)參數(shù)：第一個(gè)參數(shù)定義網(wǎng)格軌道的最小值，第二個(gè)參數(shù)定義網(wǎng)格軌道的最大值。可以接受任何長度值，也接受auto值。auto值允許網(wǎng)格軌道基于內(nèi)容的尺寸拉伸或擠壓

在這個(gè)示例中，第一行的高度最小值是100px，但其最大值為auto，允許行高可以變大超過100px

第一列設(shè)置了最小值為auto，但它的最大值是50%，也就是列的最大寬度不會超過網(wǎng)格容器寬度的50%

4.重復(fù)網(wǎng)格軌道:使用repeat()可以創(chuàng)建重復(fù)的網(wǎng)格軌道。這個(gè)適用于創(chuàng)建相等尺寸的網(wǎng)格項(xiàng)目和多個(gè)網(wǎng)格項(xiàng)目

repeat()也接受兩個(gè)參數(shù)：第一個(gè)參數(shù)定義網(wǎng)格軌道應(yīng)該重復(fù)的次數(shù)，第二個(gè)參數(shù)定義每個(gè)軌道的尺寸

在這個(gè)示例中，第一列和最后一列的寬度都是30px，并且它們之間有另列三列，這三列是通過repeat()來創(chuàng)建的，而且每列的列寬是1fr（1fr = (網(wǎng)格寬度 - 30px - 30px) / 3）

總結(jié)

以上是生活随笔為你收集整理的CSS Grid布局(1)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。