grid布局的应用

BigData_0504

已于 2022-07-04 09:39:09 修改

阅读量385

点赞数

分类专栏：前端 # HTML+CSS 文章标签：前端 html javascript

于 2022-07-04 09:23:54 首次发布

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

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

HTML+CSS

8 篇文章 0 订阅

订阅专栏

1. 叠加布局

叠加布局在页面中非常常见，定位也可以实现，但是相比而言，使用grid布局会更加容易。

<!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>
  <style>
    .main{
      width: 300px;
      height: 300px;
      display: grid;
      background-color: aqua;
    }
    .main div{
      width: 300px;
      height: 300px;
      background-color: green;
      grid-area: 1/1/1/1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .main span{
      grid-area: 1/1/1/1;
      color: red;
      justify-self: end;
      margin: 5px;
    }
    .main p{
      grid-area: 1/1/1/1;
      align-self: end;
      background-color: aqua;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
  </style>
</head>
<body>
  <div class="main">
    <div>图片</div>
    <span>自制</span>
    <p>叠加布局</p>
  </div>
</body>
</html>

实现效果图如下所示：

2. 多种排列组合布局

例如网站的商品展示，有时会有商品占据多行或是多列，用网格的合并单元格做起来非常方便。

<!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>多种排列组合</title>
  <style>
    .main{
      width: 300px;
      height: 300px;
      display: grid;
      background-color: skyblue;
      grid-template-rows: repeat(3,1fr);
      grid-template-columns: repeat(3,1fr);
      gap: 5px;
    }
    .main div{
      background-color: pink;
    }
    .main div:nth-of-type(1){
      /* grid-area: 1/1/3/3; */
      grid-area: 1/1/span 2/span 2;
    }
    .main div:nth-of-type(2){
      grid-area: 1/3/span 2/span 2;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</body>
</html>

实现效果：

3. 栅格系统

栅格系统在页面布局也很常见，多用grid布局的方式实现，本节讲解不够详细，后续会在响应式布局中进行详细讲解。

<!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>
  <style>
    .row{
      display: grid;
      grid-template-columns: repeat(12,1fr);
      grid-template-rows: 50px;
      grid-auto-rows: 50px;
      background-color: aqua;
    }
    .row div{
      background-color: pink;
      border: 1px black solid;
    }
    .row .col-1{
      grid-area: auto/auto/auto/span 1;
    }
    .row .col-2{
      grid-area: auto/auto/auto/span 2;
    }
    .row .col-3{
      grid-area: auto/auto/auto/span 3;
    }
    .row .col-4{
      grid-area: auto/auto/auto/span 4;
    }
    .row .col-5{
      grid-area: auto/auto/auto/span 1;
    }
    .row .col-1{
      grid-area: auto/auto/auto/span 5;
    }
    .row .col-6{
      grid-area: auto/auto/auto/span 6;
    }
    .row .col-7{
      grid-area: auto/auto/auto/span 7;
    }
    .row .col-8{
      grid-area: auto/auto/auto/span 8;
    }
    .row .col-9{
      grid-area: auto/auto/auto/span 9;
    }
    .row .col-10{
      grid-area: auto/auto/auto/span 10;
    }
    .row .col-11{
      grid-area: auto/auto/auto/span 11;
    }
    .row .col-12{
      grid-area: auto/auto/auto/span 12;
    }
  </style>
</head>
<body>
  <div class="row">
    <!-- 占据3个栅格的div元素 1/4-->
    <div class="col-6"></div>
  </div>
</body>
</html>

网格布局是非常容易完成栅格布局的。

4. 容器自适应行列布局

grid自带自适应的特性。这在布局中也是很常见的一种布局方式

行自适应（默认）：

<!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>
  <style>
    .main{
      width: 300px;
      display: grid;
      background-color: aqua;
      grid-template-columns: repeat(3,1fr);
      grid-auto-rows: 100px;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</body>
</html>

列自适应：

<!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>
  <style>
    .main{
      height: 300px;
      display: inline-grid;
      background-color: aqua;
      grid-template-rows: repeat(3,1fr);
      /* 设置隐式列宽为100px */
      grid-auto-columns: 100px;
      grid-auto-flow: column;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</body>
</html>