[CSS] 柵格化布局

時間：2023-09-27 05:48:02 | 來源：網(wǎng)站運營

時間：2023-09-27 05:48:02 來源：網(wǎng)站運營

[CSS] 柵格化布局：柵格化布局幫助你更容易構建復雜的網(wǎng)頁設計。它會將HTML元素轉換為網(wǎng)格的容器（有行有列）。你可以在網(wǎng)格里面添加你想要的子元素。

grid 初始化元素為柵格化

將一個HTML元素轉換為網(wǎng)格的容器，只需要對其設置display: grid即可。display: grid告訴我們，可以使用CSS Grid的相關屬性了。

<dl class="container"> <dd class="item1">item1</dd> <dd class="item2">item2</dd> <dd class="item3">item3</dd> <dd class="item4">item4</dd> <dd class="item5">item5</dd> <dd class="item6">item6</dd></dl>.container{ display: grid;}

? 在CSS柵格布局中，父元素就是柵格容器（這里是class="container"的dl元素），其下的子元素為我們稱為項目items

grid-template-columns 設置列數(shù)

上面我們已設定容器container為珊格化了，那么我們還得為這塊圈起來的元素設置模版列數(shù)，表明列的區(qū)域。

.container{ min-width: 200px; display: grid; grid-template-columns: 100px 100px auto;}grid-template-columns的屬性值100px 100px auto的意思是將區(qū)域劃分為三列，第一列和第二列的寬度都為100px，第三列的寬度為自適應。

grid-template-rows 設置行數(shù)

上面我們設置了列數(shù)，那么對應的，就有行數(shù)，我們來設置下模版行數(shù)。

.container{ min-height: 200px; display: grid; grid-template-rows: 60px auto;}grid-template-rows的屬性值60px auto的意思是將區(qū)域分為兩行，第一行的高度固定為60px，而第二行的高度自適應。

單位的設置可以有px, auto, %, fr。這里的fr是fraction的縮寫,表示某物的部分。比如下面的例子：
grid-template-rows: auto 10% 2fr 1fr，表示的意思是將柵格化的區(qū)域分為4行：第一行是根據(jù)內容自適應，第二行為區(qū)域的10%，最后剩余的區(qū)域分成三部分，2fr表示占其2/3，1fr表示占其1/3。

grid-column-grap 設置列間距

有必要對列與列之間設置間距，你可以理解為margin-left和margin-right的應用：

.container{ display: grid; grid-template-columns: 100px 100px auto; grid-column-gap: 10px;}grid-column-gap表示列之間相隔10px，對左邊界區(qū)域左間隔不影響，對右邊界區(qū)域右間隔不影響。

grid-row-gap 設置行間距

像上面設置列邊距一樣，有必要設置列與列的間距，對應的 - 你可以理解為margin-top和margin-bottom的應用：

.container{ display: grid; grid-template-rows: 60px auto; grid-row-gap: 10px;}grid-row-gap表示行之間相隔10px，對上邊界區(qū)域頂部間隔不影響，對下邊界區(qū)域底部間隔不影響。

grid-gap 簡寫

像margin一樣，我們可以對margin-top, margin-right, margin-bottom, margin-left進行簡寫。grid-gap可以對grid-row-gap, grid-column-gap進行簡寫。

但是，grid-gap的值又不像margin一樣可以寫四個，它只有兩個：

.container{ display: grid; grid-template-columns: 100px 100px auto; grid-template-rows: 60px auto; grid-gap: 10px 20px;}grid-gap: 10px 20px表示行間隔為10px，列間隔為20px。

到目前為止，我們講的是柵格布局容器的拆分，下面我們來講其子元素的布局。

子元素 grid-column

grid-column表示列跨度，比如:

.container{ display: grid; grid-template-columns: 100px 100px auto; .item5{ grid-column: 1 / 3 }}grid-column上面的列跨度，表示類名為item5元素橫跨第一列到第三列。

子元素 grid-row

對應的，grid-row表示行跨度，比如：

.container{ display: grid; grid-template-rows: 50px 50px auto; .item3{ grid-row: 2 / 4 }}grid-row上面的行跨度，表示類名為item3元素橫跨第二行到第四行。

子元素 justify-self

justify-self更改元素寬度和排列的位置，有值如下：

• stretch: 默認值，拉伸內容的寬度為預設的寬度
  
• start: 寬度為內容寬度，內容在左側展示
  
• center: 寬度為內容寬度，內容在居中展示
  
• end: 寬度為內容寬度，內容在右側展示
  

子元素 align-self

align-self更改元素高度和排列的位置，有值如下：

• stretch: 默認值，拉伸內容的高度為預設的高度
  
• start: 寬度為內容高度，內容在上側展示
  
• center: 寬度為內容高度，內容在居中展示
  
• end: 寬度為內容高度，內容在下側展示
  

justify-items

我們想對所有子元素內容進行水平方向的排列，那么需要在設定的容器中使用justify-items屬性，而不是一個個子元素進行設置justify-self屬性。justify-items屬性值同justify-self。

.container{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; justify-items: center;}

align-items

同理的，我們想對所有子元素內容進行垂直方向的排列，那么需要在設定的容器中使用align-items屬性，而不是一個個子元素進行設置align-self屬性。align-items屬性值同align-self。

.container{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; align-items: center;}

grid-template-areas

通過grid-template-areas為每個柵格單元命名。

.container{ display: grid; grid-template-columns: 100px 100px auto; grid-template-rows: 50px 50px auto; grid-template-areas: "header header header" ". content content" "footer footer footer";}

注意: ? .表示表格中的空單元格

子元素 grid-area關聯(lián)預設名稱

grid-template-areas已經為元素劃分好了單元格并命名了，接下來可以通過grid-area在其子元素中關聯(lián)上。

.container{ display: grid; grid-template-columns: 100px 100px auto; grid-template-rows: 50px 50px auto; grid-template-areas: "header header header" ". content content" "footer footer footer"; .item6{ grid-area: footer; }}當然，我們可以僅僅使用grid-area實現(xiàn)上面需要grid-template-area和grid-area才能實現(xiàn)的效果。如下

.container{ display: grid; grid-template-columns: 100px 100px auto; grid-template-rows: 50px 50px auto; .item6{ grid-area: 3 / 1 / 4 / 4; }}grid-area簡寫的語法是：

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

使用函數(shù)repeat簡化

使用grid-template-columns和grid-template-rows定義柵格的行列結構。上面我們是一個個定義的。我們也可以使用repeat()函數(shù)簡化操作。

比如分為四列，第一列和第二列是100px，第三列為1fr,最后一列是2fr。

.container{ display: grid; grid-template-columns: repeat(2, 100px) 1fr 2fr;}

函數(shù)minmax限定最小最大值

在我們布局空間有限的情況下，我們需要對布局的元素設置其最小值和最大值，通過minmax()函數(shù)可以輕松做到。

.container{ display: grid; grid-template-columns: repeat(2, 100px) minmax(60px, 1fr) 2fr;}上面的屬性在實際的開發(fā)中已經夠用。如果你還想了解其他的屬性等，你可以點擊下面的參考鏈接進行學習。grid的兼容性還是杠桿的，除了Opera Mini和Baidu Browser不支持外，其他的都支持~

更多的內容可以前往JIMMY BLOG

參考

http://cssgridgarden.com/

https://www.freecodecamp.org/learn/responsive-web-design/css-grid/