什么是css grid布局

這篇文章將為大家詳細講解有關什么是css grid布局，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

網格是布局設計的基礎，而CSS Grid是一個二維布局系統，專門用于處理Web上基于網格的用戶界面。通過Grid(網格) 布局可以解決頁面上的很多布局問題。

CSS Grid布局的功能很強大，本篇文章我們就來簡單介紹一下Grid布局，讓大家了解Grid布局的一些基本概念和術語，希望對你們有所助。

Grid布局的作用：

在網絡相對較短的生命周期中，開發人員一直在嘗試各種方法來在瀏覽器中布置內容。我們一直是使用來css布局網頁的， 但都存在這樣或那樣的問題。先是使用基于表格的布局，然后是使用基于浮動的布局。但這些方法充其量只是解決方法，因為表和浮動都不是用作真正的布局工具。

Grid(網格) 布局是第一個專門為解決布局問題而創建的 CSS 模塊，我們終于不需要想盡辦法來解決頁面布局樣式了。

CSS Grid引入了一系列屬性，允許我們使用CSS創建網格結構并控制網格項的放置和大小調整。這意味著我們可以使用媒體查詢來調整我們的網格布局來適應不同大小的顯示屏。

Grid還帶有強大的自動放置算法，可以更輕松地填充可用空間，而無需進行大量復雜的計算。在某種程度上，Grid甚至允許在z軸上具有一定的靈活性，因為如果需要，您可以重疊網格項。

css Grid的基本概念和術語

由于Grid的創建非常靈活，并為許多不同的用例提供解決方案，因此我們無法快速就能理解和使用它。下面我們先來看看Grid的一些基本概念和術語。

在網格規范中引入了術語和概念，因此我們想要充分利用網格，首先要了解并理解這些術語和概念。

網格線

網格線是形成網格結構基礎的水平線和垂直線。它們用于在網格上定位項目。我們可以用數字索引來引用它們，從1開始。

網格線也有負指數，這允許我們從網格的末尾開始引用網格線。負索引的一個用例是，如果我們需要最后一列中的項目，而不考慮軌道的數量，那么為該項目提供一個值為-1的grid-column-end屬性將會處理它。

.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
}

.item {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}

我們可以命名網格線，這樣就不必計算需要引用的網格線。可以在網格模板列和網格模板行屬性中將這些名稱聲明為可選參數。

.grid-container {
  display: grid;
  grid-template-columns: 150px [col-foo] 150px 150px [col-bar];
  grid-template-rows: 150px [row-foo] 150px [row-bar];
}

.item {
  grid-column-start: col-foo;
  grid-column-end: col-bar;
  grid-row-start: row-foo;
  grid-row-end: row-bar;
}

網格軌道和單元格

網格軌道是2個相鄰網格線之間的空間，它們是網格的行和列。下圖突出顯示了第一行和第二行網格線之間的網格軌跡。我們可以使用grid-row-gap和grid-column-gap屬性，利用行間隙和列間隙來把網格軌道分開。

網格單元是2個相鄰行網格線和2個相鄰列網格線之間的空間。它在概念上類似于表格單元格，因為它是網格的單個單元。下圖突出顯示了第三和第四列網格線以及第二和第三行網格線之間的網格單元。

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
}

網格區域

網格區域由1個或多個網格單元組成，并由網格區域的每一側上的4個網格線約束。您可以使用其grid-template-areas屬性定義的邊界網格線或其名稱來引用網格區域。然后可以將網格項目分配給具有網格布局屬性的網格區域，例如：grid-area，grid-row，grid-column屬性或它們的長格式的等價物。

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
  grid-template-areas: "a b b"
                       "a b b";
}

.item-1 {
  grid-area: a;
}

.item-2 {
  grid-area: b;
}

如前所述，圖表的陰影部分是網格軌道之間的溝槽，可以使用grid-row-gap和grid-column-gap屬性控制。

所以，把它們放在一起：

關于什么是css grid布局就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。