css grid 布局是二維布局方式，可以同時控制行和列的排布和對齊方式。

grid 由水平線和垂直線構成，兩條水平線中間的區(qū)域叫做行軌道，兩條垂直線中間的區(qū)域叫做列軌道。

開啟 grid 布局

要開啟 grid 布局只需要給外層容器設置：

容器的直接子元素就會自動成為 grid 布局的元素。

改變布局

例如，一個容器，包含 6 個子元素。把它改成 3 列布局，可以使用grid-template-columns屬性，指定每列的寬度，可以是固定寬度：

grid-template-columns: 100px 100px 100px;

也可以用 fr 指浮動寬度：

fr是 grid 布局專用單位，代表 grid 剩余空間，這里三列各占 3 分之一。

如果把第二列改為 2fr，則會占據(jù) 1/2 的空間。

設置 gap

給 grid 設置間距可以通過 column-gap 屬性設置列間距

也可以通過 row-gap 設置行間距

或使用 gap 屬性統(tǒng)一設置。

grid template area

排列元素我們可以使用 grid-template-area 屬性。比如有一個頁面，頭部和底部寬度占滿全屏，側邊占 1/3，內容占 2/3，我們可以指定這樣的區(qū)域：

grid-template-areas:
  'header header header'
  'sidebar content content'
  'footer footer footer';

然后各個元素分別指定對應的區(qū)域：

header:

aside:

grid-area: sidebar;

main:

footer

grid-area: footer;

對齊

grid 對齊方式跟 flexbox 布局類似，有水平方向的行軸，和垂直方向的塊軸。

在垂直方向上對齊子元素可以使用 align-items 屬性，例如居中對齊：

靠下對齊：

align-items: end;

在水平方向上對齊子元素可以使用 justify-items 屬性，例如：

居中對齊：

靠右對齊：

justify-items: end;

兩端對齊：

如果行軌道和列軌道的尺寸小于 grid 容器，還可以對軌道進行對齊，在垂直方向上，使用 align-content 屬性，例如:

居中對齊：

align-content: center;

靠下對齊：

在水平方向上使用 justify-content 屬性，例如：

居中對齊：

justify-content: center;

靠右對齊：

兩端對齊：

justify-content: space-between;

好了，這就是今天的 2 分鐘掌握 css grid 布局，你學會了嗎？有問題請在評論區(qū)留言，我是峰華，感謝觀看。