噜噜噜色综合久久天天综合,久久精品欧美一区二区,综合558欧美成人永久网站

一分鐘幾個樣式示例就可以掌握前端CSS Grid宮格布局

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2024年3月30日 0:25 本文熱度 748

“CSS Grid布局的精髓，從基礎知識到高級技巧，深入剖析其無與倫比的設計潛力。無論您是初學者還是資深開發者，這篇文章都將為您呈現一個全新的視角”

—

解鎖布局的新維度

接下來，我們將深入探討CSS Grid的各種布局技巧。通過分析實際案例和最佳實踐，您將學會如何利用Grid實現各種復雜布局，包括多列布局、響應式設計和網格對齊等。

// 開啟grid布局
.grid-tag {
  display: grid;
}

假設在一個容器中有6個子元素是這樣子的，如果你想實現將這些子元素修改成2列的布局方式，應該怎么實現呢

你可以使用以下代碼示例

.grid-tag{
  display: grid;
  grid-template-columns: 1fr 1fr; // 你也可以使用 repeat(2,1fr) 第一個參數多少等份
  /*grid-template-columns:200rpx 200rpx; // 使用固定的寬度*/
  /*grid-template-columns: 1fr 1fr 1fr; // 三列布局*/
}

fr單位是grid布局的單位，例如上面的2列布局你想讓第一列的占三分之二的寬度，那么你可以這樣子做

.grid-tag{
  display: grid;
  grid-template-columns: 2fr 1fr;
}

這樣子第一列的是2fr個單位，總共分成3個單位，所以第一列會占據2/3的寬度。

如果你想讓元素之間保留間隔的話，例如以下示圖

.grid-tag{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx; // 統一設置行列間距
  /*column-gap: 20rpx; // 列間距，元素的左右間距*/
  /*row-gap: 20rpx; // 行間距，上下元素的間距*/
}

那么接下來如何實現grid的對齊方式呢，其實對齊方式跟flexbox的對齊方式使用方法是一樣的

.grid-tag{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  align-items: center; // 垂直方向對齊方式 center 居中對齊 end 靠下對齊
   justify-items: center; // 水平方向對齊方式 center 居中對齊 end 靠下對齊
 }

—

Grid常用屬性一覽以及例圖欣賞

grid-template-columns 和 grid-template-rows: 這兩個屬性用于定義網格的列和行的大小和數量。您可以指定固定大小、百分比、自適應大小等。
grid-column 和 grid-row: 這些屬性用于指定一個元素應該跨越的列數或行數。
grid-gap: 這個屬性用于設置網格行和列之間的間距。可以通過指定單個值來統一設置行列間距，也可以分別指定行間距和列間距。
justify-items 和 align-items: 這兩個屬性用于設置網格容器內所有項目的水平和垂直對齊方式。