Grid布局

作者: 我家有个王胖胖 | 来源:发表于2022-09-02 17:33 被阅读0次

Grid布局相关属性
【融职培训】Web前端学习第2章网页重构16 grid布局
CSS Grid 布局
2020-02-03
css Grid布局
Grid布局参考资料
grid 网格布局
[2020-08-10]css3中的常用几种布局
Grid网格布局学习
px em rem vh vm

1.网格布局（Grid）是强大的CSS布局方案，它将网页划分为一个个的网格，通过任意组合这些网格来实现不同需求的布局方式。
Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。

基本概念：
容器（container）——有容器属性
项目（items）——有项目属性
行（row)
列（column）
间距（gap) ——单元格之间的距离
区域（area）—— 自己划分每个单元格占据的区域
内容（content)
————————————————

基本概念.png

1.容器属性
grid-template-columns:设置每一列的宽度，可以是具体值，也可以是百分比
repeat():第一个参数是重复的次数，第二个参数是所要重复的值

<!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>
        .container{
            display: grid;
            grid-template-columns: 200px 200px 200px;
            //grid-template-columns: repate(3,200px);//重复
            //grid-template-columns:repeat(3,auto);//等分
            //grid-template-columns:1fr 2fr 1fr;//比例
        }
        .item{
            padding: 15px;
            border: 1px solid red;
            text-align: center;
            height: 200px;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

image.png

grid-template-rows:设置每一行的宽度，可以是具体值，也可以是百分比

<!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>
        .container{
            display: grid;
            grid-template-rows: 1fr 2fr 3fr;
            grid-template-columns: repeat(3,auto)
        }
        .item{
            padding: 15px;
            border: 1px solid red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
    </div>
</body>
</html>

grid-template-rows.png

2.grid-column-start grid-column-end
grid-row-start grid-row-end (item占据多行多列)

<!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>
        .container{
            display: grid;
            grid-template-rows: 1fr 2fr 3fr;
            grid-template-columns: repeat(3,auto)
        }
        .item{
            padding: 15px;
            border: 1px solid red;
            text-align: center;
        }
        .item:first-child{
            /* column左边框网格线的第一条 */
            grid-column-start:1;
            /* column右边框网格线的第三条 */
            grid-column-end: 3;
            /* row上边框网格线第一条 */
            grid-row-start: 1;
            /* row下边框网格线第三条 */
            grid-row-end: 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
    </div>
</body>
</html>

image.png

简写方式:span
grid-columns grid-row

<!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>
      .container {
        display: grid;
        grid-template-rows: 1fr 2fr 3fr;
        grid-template-columns: repeat(3, auto);
        /* 未设置grid-template-rows 的默认值的单元格高度 */
        grid-auto-rows: 1fr;
      }
      .item {
        padding: 15px;
        border: 1px solid red;
        text-align: center;
      }
      .item:first-child {
        /* 1:左边框第一个网格线开始  span 2 横跨两个单元格 */
        grid-column: 1 / span 2;
        /*  1:上边框第一个网格线开始 span 2 竖直方向横跨2个单元格*/
        grid-row: 1 / span 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
    </div>
  </body>
</html>

简写方式.png

3.minmax函数:函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值(可实现类似响应式效果)

<!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>
      .container {
        display: grid;
        grid-template-rows: 1fr 2fr 3fr;
        /* 第三列宽度最小100，最大200 */
        grid-template-columns: auto  auto minmax(100px,200px);
        /* 未设置grid-template-rows 的默认值的单元格高度 */
        grid-auto-rows: 1fr;
      }
      .item {
        padding: 15px;
        border: 1px solid red;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
    </div>
  </body>
</html>

minmax.png

minmax-mobile.png

4.grid-template-areas:自定义网格布局

<!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>
      .grid {
        display: grid;
        grid-template-areas:
          "header header header"
          "content content sidebar"
          "box-1 box-2 box-3"
          "footer footer footer";
      }
      .header {
        grid-area: header;
        text-align: center;
      }
      .content {
        grid-area: content;
      }
      .sidebar {
        grid-area: sidebar;
      }
      .box-1 {
        grid-area: box-1;
      }
      .box-2 {
        grid-area: box-2;
      }
      .box-3 {
        grid-area: box-3;
      }
      .footer {
        grid-area: footer;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <header class="header">
        我是header
      </header>
      <section class="content">
        <h3>Content</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat nam
          libero consectetur itaque perferendis laborum veritatis reiciendis
          incidunt repellendus laboriosam aspernatur, eos vero. Reprehenderit
          aliquam optio, quam repellat officia recusandae!
        </p>
      </section>
      <aside class="sidebar">
        <h3>联系我们</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nemo aut
          consequuntur sapiente magni quam amet quis eligendi quisquam placeat,
          nostrum vero porro molestiae laboriosam, odit repellat ad dolores
          magnam?
        </p>
      </aside>
      <div class="box-1">
        <h3>标题一</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus
          quod veritatis porro dolore ratione reprehenderit hic consequuntur
          laborum maxime, velit quam omnis veniam et, odio ab quia repellendus
          repudiandae! Amet!
        </p>
      </div>
      <div class="box-2">
        <h3>标题二</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus
          quod veritatis porro dolore ratione reprehenderit hic consequuntur
          laborum maxime, velit quam omnis veniam et, odio ab quia repellendus
          repudiandae! Amet!
        </p>
      </div>
      <div class="box-3">
        <h3>标题三</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus
          quod veritatis porro dolore ratione reprehenderit hic consequuntur
          laborum maxime, velit quam omnis veniam et, odio ab quia repellendus
          repudiandae! Amet!
        </p>
      </div>
      <footer class="footer">Footer</footer>
    </div>
  </body>
</html>

grid-area.png

Grid布局相关属性
定义display:grid或inline-grid开启子元素的Grid布局。不同于flex布局，grid布局是...
【融职培训】Web前端学习第2章网页重构16 grid布局
一、grid布局概述 grid布局与flex布局对比 grid布局可以为网页提供更强大的布局功能，它与flex布局...
CSS Grid 布局
参考资料 CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 系列(上)-Grid布局完...
2020-02-03
六、栅格布局方式Grid 众人云，Grid布局是CSS中最强的布局方式。Grid 布局与 Flex 布局有一定的相...
css Grid布局
Grid布局 css的布局方式主要有三种：float&position布局、flex布局、grid布局。 floa...
Grid布局参考资料
张鑫旭-写给自己看的display: grid布局教程阮一峰-CSS Grid 网格布局教程在Grid布局中，f...
grid 网格布局
Grid网格布局 Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。作用在grid容器上作用在grid...
[2020-08-10]css3中的常用几种布局
div的水平垂直居中 flex布局，使用display: flex实现水平垂直居中 grid布局使用grid布局...
Grid网格布局学习
Grid网格布局学习引言本文不对grid布局由来以及优劣做过多的介绍，仅介绍grid网格布局的用法及其效果显示...
px em rem vh vm
后续补充:flex 布局 Grid 布局