网格布局基础知识

最新推荐文章于 2024-06-13 10:23:19 发布

BigData_0504

最新推荐文章于 2024-06-13 10:23:19 发布

阅读量456

点赞数

分类专栏：前端 # HTML+CSS 文章标签：大数据

本文链接：https://blog.csdn.net/weixin_42447364/article/details/125441785

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

HTML+CSS

8 篇文章 0 订阅

订阅专栏

1. 网格grid布局基础知识介绍

gride网格布局是经常用于web的二维布局系统，独有的单位是fr，fr是指划分网格时的比例值，也可以和绝对值单位像素混合使用。

2.网格grid容器属性

grid-template-rows
grid-template-columns

基于网格的行和列维度去定义网格轨道的尺寸和大小（定义3*3的网格布局）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .main{
        width: 300px;
        height: 300px;
        display: grid;
        background-color: aqua;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .main div{
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 1px black solid;
    }
  </style>
  <body>
    <div class="main">
        <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>
  </body>
</html>

还可以利用此属性给网格的线进行命名：

grid-template-rows: [r1] 100px [r2] 100px [r3] 100px;

（1）repeat（）

接受两个参数：第一个参数是重复的次数；第二个参数是所要重复的值

grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);

（2）auto-fill关键字

有时单元格的大小是固定的，但是容器的大小不确定，如果希望每一行能够更多地容纳单元格，可以使用auto-fill关键字进行自动填充。记住在使用此关键字时，不要设置固定值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .main{
        /* width: 300px; */
        height: 300px;
        display: grid;
        background-color: aqua;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(auto-fill, 100px);
    }
    .main div{
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 1px black solid;
    }
  </style>
  <body>
    <div class="main">
        <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>
  </body>
</html>

（3）fr关键字

为了更方便表示比例关系，网格布局提供了fr关键字（fraction简写），中间列宽是两侧列宽的两倍关系。

grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr 2fr 1fr;

fr也可以结合绝对值单位px进行使用，用起来也非常方便。下面的代码相当于实现了三等分。

grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr 100px 100px;

（4）minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中，接受两个参数分别是最大值和最小值。

 grid-template-columns: 1fr 100px minmax(50px, 1fr);

grid-template-areas

使用命名方式定义网格区域，需要配合grid-area（子项）进行使用，用此属性能够非常轻松地完成单元格合并的工作。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .main {
      width: 300px;
      height: 300px;
      display: grid;
      background-color: aqua;
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      grid-template-areas: 
      'a1 a1 a1'
      'a2 a2 a2'
      'a3 a3 a3';
    }
    .main div {
      /* width: 100px; */
      /* height: 100px; */
      background-color: pink;
      border: 1px black solid;
      box-sizing: border-box;
    }
    .main div:nth-of-type(1){
        grid-area: a1;
    }
    .main div:nth-of-type(2){
        grid-area: a2;
    }
    .main div:nth-of-type(3){
        grid-area: a3;
    }
  </style>
  <body>
    <div class="main">
      <div>1</div>
      <div>2</div>
      <div>3</div> 
    </div>
  </body>
</html>

grid-template是以上三种属性的简写，此代码也能达到图上的效果

  grid-template: 
      'a1 a1 a1' 1fr
      'a2 a2 a2' 1fr
      'a3 a3 a3' 1fr
      /1fr 1fr 1fr;

gird-row-gap
grid-column-gap
grid-gap(缩写)

用于设置元素行列之间间隙的大小。推荐使用row-gap、column-gap、 gap在弹性布局中也可以进行使用。

grid-auto-flow

划分网格后，容器内的子元素会按照顺序，自动放置在每一个网格。默认顺序是先行后列。该属性可以控制元素的排列方式。

grid-auto-flow: column;

元素将会按照先列后行的顺序进行排列。除了可以设置行列排列外还可以设置成row dense和column dense，控制剩下的空间如何布局。

如果有dense关键字的话将会进行紧密排列。

grid-auto-rows
grid-auto-colmns

用于指定隐式网格的排列以及尺寸的大小。

justify-items（水平）
align-items（垂直）
place-items(垂直，水平)

定义子项在自己网格中的排列方式，默认为靠左向上进行对齐。

可选值分别是以下四个值：

start：对齐单元格的起始边缘

end：对齐单元格的结束边缘

center：单元格内部居中对齐

stretch：拉伸，占满整个单元格的整个宽度

利用以上属性，设置子项在网格中保持水平垂直对齐。

justify-content
align-content
place-content

默认值为stretch，指定了所有网格在grid容器中的对齐方式（适用于容器比单元格大的情况），和弹性盒的属性设置保持一样。

可选值分别如下：

start:对齐容器边缘起始位置

end：对齐容器边缘结束位置

center：在容器内部居中对齐

streth：子项大小没有指定时，拉伸占满整个容器

space-around：每个子项两侧的间隔相等。所以，子项之间的间隔比子项与容器边框的间隔大一倍。

space-between - 子项与子项的间隔相等，子项与容器边框之间没有间隔。

space-evenly - 子项与子项的间隔相等，子项与容器边框之间也是同样长度的间隔。

利用以上属性实现，网格在容器中水平垂直居中对齐

3.网格子项属性介绍

grid-column-start
grid-column-end
grid-row-start
grid-row-end

基于线的元素放置，表示grid子项所占据区域的起始和终止位置，包括水平方向和垂直方向，span表示占据格子的数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .main{
        /* display: grid; */
        background-color: aqua;
        width: 500px;
        height: 500px;
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
       
    }
    .main div{
        background-color: pink;
        width: 50px;
        height: 50px;
        border: 1px black solid
    }
    .div1{
        grid-column: 1/3;
        grid-row: 1/3;
    }
    .div2{
        grid-column: 3/4;
        grid-row: 1/3;
    }
    .div3{
        grid-column: 1/4;
        grid-row: 3/4;
    }
</style>
<body>
    <div class="main">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>     
    </div>
    
</body>
</html>