Grid网格布局

折花入酒丶

已于 2023-03-31 00:17:09 修改

阅读量324

点赞数

文章标签： css css3 html

于 2023-03-30 00:04:21 首次发布

本文链接：https://blog.csdn.net/qq_40386177/article/details/129846913

版权

网格布局是多行多列的终极解决方案。

一、设置父元素display：grid 生成网格布局，其所有子元素为网格项目，如下代码所示：

  <style>
    .container {
         width: 300px;
      height: 200px;
      margin: 0 auto;
      border: 2px solid #ccc;
    }

    .item {
      background: #f19752;
      border: 2px solid #ee772f;
      text-align: center;
      line-height: 50px;
      font-size: 1em;
    }
    .container {
      display: grid;
      /*3列，每列宽度50px*/
      grid-template-columns: 50px 50px 50px;
      /*2行，每行高度30px */
      grid-template-rows: 50px 50px;
      ;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>

</html>

在这里插入图片描述

grid-template-rows：用于定义行
grid-template-columns：用于定义列
他们语法一样，具体用法如下所示：

1. grid-template-columns: 50px 100px 150px;
3列，列宽分别为50px 100px 150px

2. grid-template-columns: repeat(3, 100px);
3列，列宽统一为80px
在这里插入图片描述

3.grid-template-columns: 50px 1fr 1fr;
3列，第1列宽度为50px,第2列和第三列按照1:1的比例占据剩余空间
在这里插入图片描述

4.grid-template-columns: repeat(3, 1fr);
3列，平等平分容器

二、改变列的方向

使用属性grid-auto-flow: column;可以使子元素按列排放，如下代码所示

.container {
      display: grid;
      /*3列，平等平分容器*/
      grid-template-columns: repeat(3, 1fr);
      /*2列，每行高度30px */
      grid-template-rows: 50px 50px 50px;
      grid-auto-flow: column;
    }

在这里插入图片描述

三、单元格之间的间隙

    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      /*行间隙为10px*/
      row-gap: 10px;
      /*列间隙为20px*/
      column-gap: 20px;
      /* 行间隙为10 列间隙为20px*/
      gap: 10px 20px;
    }

在这里插入图片描述

四、单元格内部对齐

默认情况下，网格项目在单元格内部水平和垂直拉伸，以撑满单元格。
使用属性justify-items设置水平方向的排列方式
使用属性align-items设置垂直方向的排列方式
他们的可选值如下：

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
justify-items: center;
align-items: center;

在这里插入图片描述
可以使用速写属性place-items: 垂直对齐方向水平对齐方式同时设置这两个值;

 place-items: center center;

五、网格项目定位

默认情况网格项目依次排列在单元格，每个网格占据一个单元格，可以使用grid-area改变这种形式。
使用方式如下：

grid-area:起始行线编号/起始列线编号/结束行线编号/结束列线编号 ;
例:
grid-area:1/2/3/4

如下图所示点击grid可以查看编号:
在这里插入图片描述

这里无需关注负数的编号，可以简化成如下形式。

橙线代表行编号，蓝线代表列编号
假如我们需要占如下这块区域：

此时需要该区域的起始点和结束点，如下图所示：

通过观察我们可以得知起始点是由编号2的行线和编号2的列线相交而成，同理可得结束点是由编号3的行线和编号3的列线相交而成。所以可以得出以下代码: