一分钟几个样式示例就可以掌握前端CSS Grid宫格布局

“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: 这两个属性用于设置网格容器内所有项目的水平和垂直对齐方式。

—

结束

在本文中，我们了解了CSS Grid布局的精髓，学习了如何利用这一牛叉的布局技术来构建网页布局。CSS Grid提供了灵活的布局选项。

通过理解Grid布局的各种技巧和属性，您也可以轻松实现各种复杂的布局设计，从而提高更优秀的用户体验。无论是构建响应式网站、应用程序界面还是任何其他类型的布局，Grid都能帮我们得心应手。