网格布局grid

网格布局grid

1. 前言

对于CSS的grid布局也了解过一些，但一直没怎么用，多少有些生疏，借着仿去哪网的城市列表页，对这些技术进行一个综合的学习

注：
本文主要参考MDN的网格布局，在目录上可能会有极大的相似，内容上相对MDN更加通俗易懂，案例围绕下方图的效果进行进行设计

参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout


如需转载，请注明出处

效果如下

进入正题

2. grid网格布局

2.1 网格容器

通过在元素上声明display:grid来创建一个网格容器，这个元素的所有直系子元素都会自动成为网格元素

2.2 网格轨道

行列设置

通过grid-template-columns和grid-template-rows属性可以在网格容器中定义网格的行和列，任意两条线之间的空间就是一个网格轨道，例如下方图中红色框中为一个行轨道，蓝色框中为一个列轨道

通过grid-template-columns可以定义列轨道的大小，即列的宽度

下方代码将.wrapper设置为网格容器，其直系子元素就变成了网格元素，通过grid-template-columns设置了三个相等的值将一行分为三列，每一列138px，这样网格中每一行中就有了三个网格元素

HTML

  <div class="wrapper">
    <div>北京</div>
    <div>上海</div>
    <div>三亚</div>
    <div>香港</div>
    <div>杭州</div>
    <div>广州</div>
    <div>成都</div>
    <div>深圳</div>
    <div>苏州</div>
    <div>桂林</div>
    <div>西安</div>
    <div>厦门</div>
  </div>

CSS

.wrapper{
	display: grid;
	grid-template-columns: 138px 138px 138px;
}

注：对于案例中其他样式的CSS代码如下，仅列出一次

.wrapper{
  width: 414px;
  background-color: #f5f5f5;
  font-size: 12px;
  margin: 0 auto;
  border: 1px solid #00bcd4;
}
.wrapper > div{
  box-sizing: border-box;
  line-height: 44px;
  border: 1px solid #00bcd4;
  border-radius: 10px;
}

效果

fr单位

在网格布局中，还为我们提供了一个新的单位fr，这是一个相对的单位，上面的138px是我们写死的长度，如果网格容器的宽度是变化的，我们就不能保证