网格布局入门学习

马黑黑 · 发表于 2022-10-12 21:13

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-11-9 18:08 编辑

网格布局入门学习目录

马黑黑 · 发表于 2022-10-12 21:38

本帖最后由马黑黑于 2022-10-12 21:51 编辑

网格布局是CSS布局中最高级的布局，也是唯一的二维布局。实际上，它和表格很相似，由横线和竖线组成一个个的单元格，这些单元格既可以独立存在，也可以与邻近的单元格合并成新的单元格。总体上看，网格布局以单元格为基本单位，通过对单元格的操作进行页面布局。

要使用网格布局，我们需要通过 CSS 的 display 属性调用 grid ，例如：

.mainbox {
display: grid;
}

选择器 .mainbox 就启用了网格布局模式。但显然还不够，它还不能生成网格，我们需要其他的属性。现在，以生成 4*3 即四行三列的网格为例，让我们完善上面的 .mainbox 盒子：

.mainbox {
      margin: auto;
      padding: 20px;
      width: 600px;
      height: 660px;
      box-shadow: 3px 3px 20px #000;
      display: grid;
      grid-template-rows: auto auto auto auto;
      grid-template-columns: auto auto auto;
}

只有着色的代码语句与网格有关。display: grid; 我们已经解释过，它声明 mainbox 盒子以网格形式布局；grid-template-rows: auto auto auto auto;，grid-template-rows 是个组合词，大意是网格切割行（template是模板之意，模板是切割出来的），可以简单理解为网格行，下行代码中的 grid-template-columns 则可以理解为网格列。注意观察它们的赋值：行用了四个 auto，auto是自动的意思，列用了三个 auto。这表明，mainbox 盒子行分为4个，列分为三个，这就得出 4*3 的12宫格了——这12宫格将由 mainbox 的子元素构成，我们打算用 div 标签来做子标签，它们也应该有自己的简单样式，以便有助于我们对之进行观察：

.mainbox > div {
      border: 1px dotted pink;
      padding: 10px;
}

最后，HTML代码就是一道美味菜了：

<div class="mainbox">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
</div>

上面这12个div，由于它们的父元素 mainbox 使用了 grid 布局，且定义了 grid-template-rows（行）和 grid-template-columns（列），所以，它们不是按照从上往下的文档流规律逐一排列下去，而是形成了 mainbox 预设的 4*3 的 12宫格。效果看楼下。