返回

Grid布局进阶：仿照去哪儿城市列表搞懂它

前端


在前端开发中，布局是至关重要的。在移动互联网时代，如何在各种屏幕尺寸下展示页面内容，已经成为一个基本功。而Grid布局，正是在解决这个问题上扮演着重要角色的一大技术。

很多时候，我们对于一个新技术往往是知其然而不知其所以然。今天，我们就通过一个实际的例子，带你深入理解Grid布局，不再止步于知其然。

一、Grid布局的认识

Grid布局是一种二位布局，它允许你在水平（行）和垂直（列）方向上为元素定位。与Flex布局类似，Grid布局也是基于容器和项目模型，容器包含项目，项目在容器中定位。

Grid布局的优势在于，它提供了非常灵活的布局控制，你可以通过定义列宽、行高、间距和对齐方式来实现各种复杂的布局。

二、实战：仿照去哪儿城市列表

接下来，我们就以仿照去哪儿城市列表为例，一步步来学习Grid布局。

1. 准备HTML结构

<div class="container">
  <div class="item">北京</div>
  <div class="item">上海</div>
  <div class="item">广州</div>
  <div class="item">深圳</div>
  <div class="item">杭州</div>
  <div class="item">南京</div>
  <div class="item">苏州</div>
  <div class="item">天津</div>
</div>

2. 设置容器为Grid容器

.container {
  display: grid;
}

3. 定义列

.container {
  grid-template-columns: repeat(3, 1fr);
}

grid-template-columns属性用于定义列。在这里，我们使用repeat()函数创建了3列，每列的宽度为1fr（即父容器可用宽度的1/3）。

4. 设置行高

.container {
  grid-template-rows: repeat(3, auto);
}

grid-template-rows属性用于定义行。在这里，我们使用repeat()函数创建了3行，每行的高度为auto（即内容实际高度）。

5. 项目对齐

.container {
  align-content: center;
  justify-content: center;
}

align-content和justify-content属性分别用于控制项目在行和列方向上的对齐方式。在这里，我们设置了居中对齐。

三、效果展示

经过上面的设置，我们就可以得到一个类似于去哪儿城市列表的布局了。项目均匀分布在3列中，每列有3行。

四、总结

通过这个实际例子，我们对Grid布局有了更深入的理解。Grid布局提供了强大的布局控制能力，可以帮助我们创建各种复杂的布局。

如果你想了解更多关于Grid布局的内容，可以参考以下资源：