grid网格布局

Grid网格布局简单梳理

2021-08-24 18:01:04

Grid 网格布局是一种强大的前端布局方案，相比于flex弹性布局，grid更高效简洁。相关语法规则可参考CSS Grid 网格布局教程

整体梳理

Grid布局将整个区域划分成一个个网格，区域内的元素可以根据网格来指定位置，下面是一个简单的示意图。
grid布局示意图
先抛开看起来很多的grid属性，我们从自己的需求出发，看自己需要什么。网格内容在容器中怎么对齐？网格怎么划分？元素在网格内怎么对齐？怎么指定某个元素的特定位置？怎么实现一个元素占据多个格子？再结合下面这张图，应该会对grid属性的大致情况有一个了解。
思维导图
至于具体的写法、工具方法、关键字，使用的时候去了解即可。CSS Grid 网格布局教程此教程已经很详细，不再重复。

实例

1、圣杯布局

<div class="grid-container">
    <div class="header"></div>
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
    <div class="footer"></div>
</div>

.grid-container {
    width: 1000px;
    height: 800px;
    display: grid;
    grid-template-columns: 200px 600px 200px;
    grid-template-rows: 60px 680px 60px;
    grid-template-areas: "header header header"
                         "left content right"
                         "footer footer footer";
}
.header {
    background-color: #87CEFF;
    width: 100%;
    height: 100%;
    grid-area: header;
}
.left {
    background-color: #FFC1C1;
    width: 100%;
    height: 100%;
}
.content {
    background-color: #FFDAB9;
    width: 100%;
    height: 100%;
}
.right {
    background-color: #FFEC8B;
    width: 100%;
    height: 100%;
}
.footer {
    background-color: #AB82FF;
    width: 100%;
    height: 100%;
    grid-area: footer;
}

圣杯布局

2、水平垂直居中

<div class="grid-container">
    <div class="grid-item"></div>
</div>

.grid-container {
    width: 300px;
    height: 300px;
    border: 1px solid gray;
    display: grid;
    place-content: center;
}
.grid-item {
    width: 100px;
    height: 100px;
    background-color: #87CEFF;
}

水平垂直居中

缺点

目前grid布局的唯一缺点就是兼容性问题，尤其是IE浏览器兼容性很差，需要根据具体业务场景选择是否使用。

Grid Layout各浏览器兼容情况
Grid Layout浏览器兼容情况

更多相关内容

CSS Grid 网格布局全解析
2020-09-24 19:15:31

主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收起

grid网格布局

2022-01-05 19:55:50

一、什么是grid网格布局？ Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局。 1、使用方法设置CSS属性display：grid或display：inlne-grid来实现 grid...

一、什么是grid网格布局？

Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局。

1、使用方法

设置CSS属性display：grid或display：inlne-grid来实现

grid属性
grid-rows	同时设置行和列
grid-template-columns	设置列
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>
</head>
<style>
    .container{
        width: 1000px;
       height: 400px;
       border: 10px solid red;
       margin: auto;
       
    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

可以看到在没设置网格布局时，9个div并没有将容器铺满，还有很多的剩余空间。而设置了grid后就可以让9个div铺满容器。

示例：

<!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>
    .container{
        width: 1000px;
       height: 400px;
       border: 10px solid red;
       margin: auto;
       
    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

可以看到在设置了grid以后，9个div平均的铺满了整个容器。

同时也可以利用上面表格中所罗列的属性，对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>
</head>
<style>
    .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: 200px 200px 200px;
       grid-template-rows: 200px 200px 200px;

    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

在设置中需要注意提前算好需要几行几列。

2、关于gird宽与高的设置

px,cm,mm,rem,em、px	常见的设置单位
X%	可以使用百分比设置宽高
fr	总共有几个fr，就占比几分之n
repeat(数量，行高)	可以统一设置某一行或列的宽高
auto	由浏览器自己决定长度。
minmax(最小值,最大值 )	定义一个最小宽高以及一个最大宽高。
min content	表示网格的轨道长度自适应内容最小的那个单元格
max content	表示网格的轨道长度自适应内容最大的那个单元格

一般为了方便快捷我们都使用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>
</head>
<style>
    .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);

    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

在使用repeat(数量，行高)时，仅需输入一遍数值就可以达到同样的效果。

3、网格轨道和轨道之间的距离

轨道和轨道之间的距离使用的属性主要就是2个： row-gap（行间距）和column-gap（列间距），也可此属性进行简写为gap：行间距列间距。

例如：

<!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>
    .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;

    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

在使用gap进行设置后，可以看到网格的每行和每列都有了一定的间距。

4、内容在容器中的位置

4.1、设置属性

justify-content：设置的是水平方向
align-content：设置的是垂直方向

4.2、项目排列属性：

start	初始排列（默认属性）
end	末尾排列
center	居中排列
space－around	每个行和列，都均匀排列每个元素每个元素周围分配相同的空间
space－between	每个行和列，都均匀排列每个元素首个元素放置起始，末尾元素放置于末尾
space-evenly	每个行和列，都均匀排列每个元素之间的间隔相等
stretch	每个行和列，都均匀排列每个元素会被拉伸以适应容器的大小

下面我们进行示例：

4.2.1、设置end属性：

<!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>
    .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: end;

    }
    .item{
      background-color: pink;
   }
   .item-1{
       background-color: purple;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

4.2.2、设置center属性：

.container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: center;
       align-content: center;

4.2.3、设置space-around属性：

.container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: space-around;
       align-content: space-around;

4.2.4、设置space-between属性：

.container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: space-between;
       align-content: space-between;

4.2.5、设置space-evenly属性：

 .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: space-evenly;
       align-content: space-evenly;

    }

4.2.6设置stretch属性：

 .container{
        width: 1000px;
       height: 800px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,150px);
       grid-template-rows: repeat(3,150px);
       gap: 10px 5px;
       justify-content: stretch;
       align-content: stretch;

    }

5、响应式布局

5.1、什么是响应式布局

响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

5.2响应式布局属性

可以进行响应式布局在repeat中使用auto-fit或auto-fill。

5.3、auto-fit和auto-fill的共同点：

1.就是尽可能多的创建轨道。

2.然后不足一个轨道的空间平均分配给已有的轨道。

5.4、auto-fit和auto-fill的不同同点：

auto-fit的最后一步是，折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道。

auto-fill的最后一步时保留空轨道留白，不会折叠空轨道。

注意：auto-fit和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>
    *{
        padding: 0;
        border: 0;
        padding: 0;
    }
    .container,.container1{
        height: 200px;
        display: grid;
    }
    .container{
    
        grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); 

    }
    .container div{
        border: 1px solid pink;
        font-size: 80px;
    }
    .container1{
        grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); 

    }
    .container1 div{
        border: 1px solid pink;
        font-size: 80px;
    }
</style>
<body>
    <div class="container">
        <!-- 选项 item -->
     <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>
    <div class="container1">
        <!-- 选项 item -->
     <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>
</body>
</html>

5、指定项目位置属性

5.1、grid-column-start 属性——列起始
grid-column-end 属性——列终点
grid-row-start 属性————行起始
grid-row-end 属性————行终点

5.2、示例：

.container{
        width: 1000px;
       height: 450px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,100px);
       grid-template-rows: repeat(3,100px);
       gap: 10px 5px;
       font-size: 40px;

    }
    .item{
      background-color: pink;
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 3;

5.3、在使用时也有简洁方便的办法，可以使用span，来表示跨越几个单元格。

例如：

 .container{
        width: 1000px;
       height: 450px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,100px);
       grid-template-rows: repeat(3,100px);
       gap: 10px 5px;
       font-size: 40px;

    }
    .item{
      background-color: pink;
      grid-column-start: span 2;
      grid-row-start: span 2;
   }

同时也可以使用grid-area属性将这4个属性合为一个属性：

 .container{
        width: 1000px;
       height: 450px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,100px);
       grid-template-rows: repeat(3,100px);
       gap: 10px 5px;
       font-size: 40px;

    }
    .item{
      background-color: pink;
      grid-area:1/ 1 / 3 / 3;
   }

5.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>
</head>
<style>
    .container{
        width: 1000px;
       height: 450px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,100px);
       grid-template-rows: repeat(3,100px);
       gap: 10px 5px;
       font-size: 40px;
       grid-template-areas: 'a a c'
                            'a a f'
                            'g h i';

    }
    .item{
      background-color: pink;
      grid-area: a;
   }
   .item-2{
       background-color: red;
   }
   .item-3{
       background-color: rosybrown;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

可以看到利用grid-template-areas属性也可以达到同样的效果，但需要注意的是，在使用grid-template-areas属性时每行都需要分号和引号，并且字母与字母之间要空一格。

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>
</head>
<style>
    .container{
        width: 1000px;
       height: 450px;
       border: 10px solid red;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(3,100px);
       grid-template-rows: repeat(3,100px);
       gap: 10px 5px;
       font-size: 40px;
       grid-template-areas: 'a b c'
                            'd e f'
                            'g h i';

    }
    .item{
      background-color: pink;
      grid-area: c;
   }
   .item-2{
       background-color: red;
       
   }
   .item-3{
       background-color: rosybrown;
       grid-area: a;
   }
   .item-4{
       background-color: salmon;
   }
   .item-5{
       background-color: slateblue;
   }
   .item-6{
       background-color: blue;
   }
   .item-7{
          background-color: green;
   }
   .item-8{
       background-color: greenyellow;
   }
   .item-9{
       background-color: grey;
   }
</style>
<body>
    <div class="container">
        
        <div class="item">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
        <div class="item-7">7</div>
        <div class="item-8">8</div>
        <div class="item-9">9</div>
     </div>
</body>
</html>

收起

展开全文

c# 开发语言后端

Grid网格布局
2021-08-08 13:15:56
CSS Grid(网格) 布局 ...相比较 “Grid网格布局”，则是二维布局可以同时处理行和列上的布局通常适用于布局页面主要的区域布局或小型组件兼容 ie10、ie11支持带前缀-ms- 基本概念容器与项目采用..
CSS Grid(网格) 布局

CSS Grid 网格布局可以将网格元素放置在与这些行和列相关的位置上，进而快速、便捷的对页面结构进行布局，提高工作效率

“flexbox” 是一维的布局，是因为一个 “flexbox container” 一次只能处理一个维度上的元素布局，一行或者一列。

相比较 “Grid网格布局”，则是二维布局可以同时处理行和列上的布局

通常适用于布局页面主要的区域布局或小型组件

兼容

ie10、ie11支持带前缀-ms-

基本概念

容器与项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

单元格

行和列的交叉区域，称为"单元格"（cell）

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。
```
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。
```
网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
```
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，
比如三行就有四根水平网格线。
```
网格属性

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

容器属性

设置为网格布局
- 设置为块级网格
```
div {
  display: grid;
}
```
- 设置为行级网格
```
div {
  display: inline-grid;
}
```
注意
- 不是网格的直接子元素，不参与网格布局
- 设为网格布局以后，容器子元素（项目）的float、display: inline-block、vertical-align和column-*等设置都将失效。
列宽与行高

grid-template-columns网格布局中列的数量（和宽度）

grid-template-rows网格布局中行的数量（和高度）

语法
- 空格隔开的一组值列表
- 其中每个值指定相应列的宽度/行的高度。
取值
- 默认值 none
- 绝对单位px
  
  grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;
- 百分比
  
  .container { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 33.33% 33.33% 33.33%; }
- fr 关键字
  
  fraction 的缩写,意为部分
  
  弹性系数，按比例分配剩余空间（如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍）
  
  可以与绝对长度的单位结合使用
- auto 关键字
  
  关键字表示由浏览器自己决定长度
  
  grid-template-columns: 100px auto 100px;
- minmax()
  
  函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值
  
  即空间不足时以最小以min显示，空间有剩余时最大按max显示
  
  注意：如果max值小于min值，则该值会被视为min值。最大值可以设置为fr但最小值则不行
  
  grid-template-columns: 1fr 1fr minmax(100px, 1fr); minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。
- repeat( )函数
  
  作用：简化重复的值
  
  接受两个参数，第一个参数是重复的次数,第二个参数是所要重复的值
  
  repeat(重复的次数，一个或空格隔开的多个值 ) grid-template-columns: repeat(2, 100px);表示共两列，每列各100px
  
  第二个参数为空格隔开的多个值时表示，重复某种模式。
  
  grid-template-columns: repeat(2, 100px 20px 80px); 定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。
- auto-fill 关键字
  
  【单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格时使用】
  
  grid-template-columns:repeat(auto-fill,100px); 表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。
设置行与行的间隔（行间距）

column-gap属性设置列与列的间隔（列间距）

row-gap属性设置行与行的间隔（行间距）

取值
- 默认值 0
- px
- 百分比（相对于容器）
简写grid-gap
- gap: 行间距列间距; 【空格】隔开
- 省略了第二个值，浏览器认为第二个值等于第一个值
单元格在容器垂直位置,水平位置

justify-content水平位置总网格区域相对于容器左右对齐方式(网格内容大小小于容器宽时) align-content 位置总网格区域相对于容器上下对齐方式(网格内容大小小于容器高时)

取值
- start - 对齐容器的起始边框。
- end - 对齐容器的结束边框。
- center - 容器内部居中。
- stret ch - 列宽或行高为auto时有效
- space-around - 单元格两侧间隔相等。所以，单元格之间的间隔比单元格与容器边框的间隔大一倍。
- space-between - 剩余空间分布在单元格之间，单元格与容器边框之间没有间隔。
- space-evenly - 剩余空间均等分布在单元格与单元格，单元格与项目之间。单元格与容器边框之间间隔相等
简写

place-content属性是align-content属性和justify-content属性的合并简写形式。
- place-content:垂直水平【空格】隔开
- 如果省略第二个值，浏览器就会假定第二个值等于第一个值。
项目（内容）在单元格中的垂直、水平位置

justify-self 水平位置:内容相对于单元格左右对齐方式(通常项目内容大小小于单元格宽度时)

align-self 垂直位置:内容相对于单元格上下对齐方式(通常项目内容大小小于单元格高度时)

取值
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）
简写

place-self属性是align-self属性和justify-self属性的合并简写形式。
- place-self: 垂直水平; 【空格隔开】
- 如果省略第二个值，则浏览器认为与第一个值相等。
项目放置顺序

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行

grid-auto-flow 属性
- 默认值是row，即"先行后列"。
- column，变成"先列后行"。
- 使用之前grid-template-columns和grid-template-rows必须都设置
网格项命名（给网格划分区域）

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成

通过grid-template-areas 属性实现

取值
- 默认值 none
- 一个双引号一行，一个空格一列
  
  grid-template-areas: "种花养鱼菠菜" "西瓜冬瓜南瓜";
- 多个单元格合并成一个区域的写法
  
  grid-template-areas: 'a a a' 'b c c' 'd d d';
- 某些区域不需要利用，则使用"点"（.）表示。
  
  .wrap { width: 300px; height: 300px; border: 1px solid #000; display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(3, 100px); grid-template-areas: "a a a" "b . c" "d d d"; margin:20px auto; } .header{ background-color: orange; grid-area:a; } .side{ background-color: yellowgreen; grid-area:b; } .main{ background-color: #ccc; grid-area:c; } .footer{ background-color: pink; grid-area:d; }
  
  <div class="wrap"> <div class="header">header</div> <div class="main">main</div> <div class="side">side</div> <div class="footer">footer</div> </div>
项目属性

grid-area指定项目具体显示区域

可以通过网格区域名指定，也可以通过指定四条组成网格区域的网格线确定。

取值：
- none 默认值。没有命名的网格区域
- 网格区域名（指定使用grid-template-areas属性自定义一些网格区域）
- 通过指定grid子项所占据的区域的起始和终止位置
  
  grid-column-start属性：左边框所在的垂直网格线
  
  grid-column-end属性：右边框所在的垂直网格线
  
  grid-row-start属性：上边框所在的水平网格线
  
  grid-row-end属性：下边框所在的水平网格线
  
  简写
  
  grid-column属性是grid-column-start和grid-column-end的合并简写形式
  
  grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
  
  以斜杠分割开始/结束
  
  斜杠以及后面的部分可以省略，默认跨越一个网格。
```
.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
```
```
item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
```
注：如果项目指定的网格区域是重叠的可以使用z-index 进行调整层级

单独指定单元素格内容的对齐

justify-self属性设置单元格内容的水平位置（左中右）

align-self属性设置单元格内容的垂直位置（上中下）
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）
简写
- place-self属性是align-self属性和justify-self属性的合并简写形式。
- 如果省略第二个值，place-self属性会认为这两个值相等
收起
展开全文
前端
详解jQuery移动页面开发中的ui-grid网格布局使用
2020-11-23 23:37:45

Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局，叫做ui-grid Jquery Mobile 提供有四个预设的布局，可以在任何情况下都需要列两列（使用ui-grid-a类）三列（使用ui-grid-b类）四列（使用ui-...

收起
grid网格布局基础(一)
2022-04-30 11:50:48
CSS Grid(网格) 布局，与 flexbox 的一维布局系统不同，是一个二维的基于网格的布局系统，它可以同时处理列和行，Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块。 Grid布局和Flex布局有很多相似之处...
1. grid布局简介
CSS Grid(网格) 布局，与 flexbox 的一维布局系统不同，是一个二维的基于网格的布局系统，它可以同时处理列和行，Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块。
Grid布局和Flex布局有很多相似之处，Grid也分容器和项目，采用grid布局的元素，被称为grid容器(grid container)，简称“容器”，其下的所有直接子元素自动成为容器成员，称为grid项目(grid item)，简称“项目”。
2. 基本概念

上面说到，grid布局和flex虽有相似之处，但grid布局更强大，它不仅仅只有容器和项目，还有间距、区域、内容、行、列这些属性我们都是可以通过grid布局来控制的，如下图：
这张图还是比较重要的，大家可以记住这种结构，后面小shy讲解grid的一些属性的时候就会很容易明白其效果了。

废话不多说，现在进入正题，欢迎各位进入grid支配的世界！

3. grid属性列表

grid属性和flex属性类似，也是分容器属性和项目属性两种类型。
容器属性
- display
- grid-template-columns
- grid-template-rows
- row-gap
- column-gap
- gap
- grid-template-areas
- grid-auto-flow
- justify-items
- align-items
- place-items
- justify-content
- align-content
- place-content
- grid-auto-columns
- grid-auto-rows
项目属性
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column
- grid-row
- grid-area
- justify-self
- align-self
- place-self
大家乍一看是不是觉得grid的属性真的非常多啊，怎么记得住呀，其实大家仔细看一下，他们都是很多属性一套一套的，记住了一个，就很容易想到跟它相关的属性，当大家上手练习的时候就会发现并没有那么难记，并且你会在学习的过程中不由自主的感觉grid的强大之处。下面小shy带大家开始逐一了解grid的属性。

容器属性

结构样式准备

为方便演示，小shy先在这里准备好结构(添加了一些样式)，下面的属性讲解有一部分示例会按照这个结构来讲解：
```
<div class="main">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-10">10</div>
    </div>
```
效果如下：

1. display

将元素定义为网格容器，并为其内容建立新的网格格式上下文；
值：
- grid: 生成一个块级网格；
- inline-grid：生成一个内联网格。
```
.container {
	display: grid | inline-grid;
}
```
2. grid-template-columns / grid-template-rows 很重要

大家从上面也了解到grid布局又称网格布局，那网格肯定就是行和列交叉形成的，那就有行和列之分，大家在学习grid的时候一定要把行和列的概念牢记于心，这对于掌握grid是比较重要的。

grid-template-columns / grid-template-rows：使用空格分隔的值列表，用来定义网格的列和行。这些值表示网格轨道(Grid Track) 大小，它们之间的空格表示网格线。

grid-template-columns后跟由空格分隔的值，表示分隔成多少列，每列占的宽度是多少；
grid-template-rows后跟由空格分隔的值，表示分隔成多少行，每列占的高度是多少；
```
.main {
	display: grid;  // 给.main添加grid
	width: 600px;
    height: 600px;
    border: 10px solid skyblue;
    grid-template-columns: 100px 100px 100px 100px; // 4列  每一列的宽度分别为 100px  100px 100px 100px
    grid-template-rows: 100px 100px 100px;  // 3行  每一行的高度分别为 100px 100px  100px
}
```
repeat(m，n)

如果要定义100行和100列的话，我们总不能写一百个数值吧。repeat就是用来解决这个问题的。
repeat(m, n)：定义多少列/行，每一列/行占多少空间；
```
.main {
	display: grid; 
	width: 600px;
    height: 600px;
    border: 10px solid skyblue;
	grid-template-columns: repeat(4, 100px); // 等同于: grid-template-columns: 100px 100px 100px 100px;
	grid-template-rows: repeat(3, 100px); // 等同于: grid-template-rows: 100px 100px 100px
}
```
fr

fr: fr 单元允许你用等分网格容器剩余可用空间来设置网格轨道(Grid Track) 的大小；
```
.main {
	display: grid; 
	width: 600px;
    height: 600px;
    border: 10px solid skyblue;
	grid-template-columns: repeat(4, 1fr); // 表示分为4列，每一列的宽度为容器宽度的四分之一
	grid-template-rows: repeat(3, 1fr); // 表示分为3行，每一行的高度为容器宽度的三分之一
}
```
也可以这样写：
```
grid-template-columns: 1fr 2fr 3fr;
分3列，第一列占容器宽度的六分之一: 1 / (1 + 2 + 3)
第二列占容器宽度的六分之二: 2 / (1 + 2 + 3)
第三列占容器宽度的六分之三: 2 / (1 + 2 + 3)
```
auto

auto：占满容器的剩余的部分；
```
grid-template-columns: 100px auto 100px 100px;
grid-template-rows: 100px auto 100px;
```
效果如下:

网格线命名

如果没有给网格线命名，轨道值之间仅有空格时，网格线会被自动分配数字名称;
给网格线指定确切的命名：
```
.container {
	grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  	grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
```
3. column-gap / row-gap / gap

column-gap：列与列之间的间距；
row-gap：行与行之间的间距；
gap: column-gap 和 row-gap的复合写法，row-gap column-gap。
```
.main {
	display: grid; 
	width: 600px;
    height: 600px;
    border: 10px solid skyblue;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
	column-gap: 10px;
	row-gap: 10px;
	// 这两个属性的复合写法：gap: 20px 10px; 
}
```
效果如下：

4. grid-template-areas

通过引用 grid-area 属性指定的网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空单元格。这个语法本身可视作网格的可视化结构，它的值有三个：
- <grid-area-name>：由网格项的 grid-area 指定的网格区域名称；
- .(点)：代表一个空的网格单元；
- none: 不定义网格区域。
  创建一个 4 列宽 3 行高的网格。整个顶行将由 header 区域组成。中间一排将由两个 main 区域，一个是空单元格，一个 sidebar 区域组成。最后一行全是 footer 区域组成：
```
.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
 
.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}
```
你的声明中的每一行都需要有相同数量的单元格。

你可以使用任意数量的相邻的点. 来声明单个空单元格。只要这些点.之间没有空隙隔开，他们就代表一个单独的单元格。

注意你不能用这个语法来命名网格线，只是命名网格区域。当你使用这种语法时，区域两端的网格线实际上会自动命名。如果你的网格区域的名字是 foo，该区域的起始行网格线和起始列网格线的名称将为 foo-start，而最后一条行网格线和最后一条列网格线的名称将为 foo-end。这意味着某些网格线可能有多个名字，如上例中最左边的网格线，它将有三个名称：header-start，main-start 和 footer-start 。

5. grid-auto-flow

grid-auto-flow: 定义项目排列方式，有两个值 row 和 column，默认是row，横向排列。
```
.main {
    display: grid;
    width: 600px;
    height: 600px;
    border: 10px solid skyblue;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    grid-auto-flow: column;
}
```
效果如下：

6. justify-items / align-items
- justify-items: start | end | center | stretch，表示项目在网格内的水平方向的排列方式；
- align-items: start | end | center | stretch，表示项目在网格内的垂直方向的排列方式；
- place-items: <align-items> <justify-items> 组合写法;
1. start：内容与网格区域的左端/顶端对齐
2. end：内容内容与网格区域的右端/底部对齐
3. center：内容位于网格区域的中间/垂直中心位置
4. stretch（默认值）：内容宽度/高度占据整个网格区域空间
7. justify-content / align-content

有时，你的网格合计大小可能小于其网格容器(grid container) 大小。如果你的所有网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。在这种情况下，您可以设置网格容器内的网格的对齐方式。

justify-content：start | center | end | space-around | space-between | space-evenly，沿着行轴线对齐网格；
align-content：start | center | end | space-around | space-between | space-evenly，沿着轴线对齐网格。
place-content: <align-content> <justify-content>组合写法;
1. start：网格与网格容器的左边/顶部对齐
2. end：网格与网格容器的右边/底部对齐
3. center：网格与网格容器的中间对齐
4. stretch：调整grid item 的大小，让宽度/高度填充整个网格容器
5. space-around：在 grid item 之间设置均等宽度/高度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
6. space-between：在 grid item 之间设置均等宽度/高度空白间隙，其外边缘无间隙
7. space-evenly：在每个 grid item 之间设置均等宽度/高度的空白间隙，包括外边缘
8. grid-auto-columns / grid-auto-rows

设置多出来的项目的宽和高。
```
.main {
    display: grid;
    width: 600px;
    height: 600px;
    border: 10px solid skyblue;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    grid-auto-rows: 50px; 
}
```
上述代码设置了一个 3 * 3的区域，会多出来一个项目，这个项目所在的列宽度是确定的，不在规定的三行内，我们给这个多余的项目设置了高度(grid-auto-rows: 50px; )如下：

以上就是容器的所有的属性的讲解，grid的属性确实比较多，需要大家慢慢消化练习，后面小shy会分享出项目自身的属性，谢谢！
收起
展开全文
前端开发，grid网格布局学习全面解析
2022-04-11 20:05:44

grid网格容器属性和项目属性，适用有一定的html，css基础，flex布局更好，前端学习，疑难解惑ppt教学资源，内部资料！！！！！！！！！！！！！！！！！！！！！grid网格容器属性和项目属性，适用有一定的html，css...

收起
CSS Grid 网格布局完整教程
2021-04-15 11:10:10

前言一、概述二、基本概念 2.1 容器和项目 ...布局实例 gap沟槽定义 grid-template-areas 区域属性 grid-auto-flow 排列属性垂直对齐属性水平对齐属性 3.8 指定列（行）定义合并简写四、项..

收起

网页 web
【CSS3】grid 网格布局
2022-02-17 16:03:21

网格布局 指定一个容器采用网格布局，以控制子级项目。设置后子级项目会转换为 block display: grid; 也可以如此设置，子级项目就会转换成 inline-block display: inline-grid; 特性：宽度继承父级100%，高度...

收起

css css3 前端
grid网格布局基本知识
2021-08-26 11:37:37

我们使用display属性来定义一个网格容器，它的grid值决定了容器展现为块级还是内联形式。一旦启用网格容器，它的所有子元素都进入grid文档流，称为网格子项。 display: grid | inline-grid | subgrid grid：定义一...

收起

css
css的grid网格布局
2021-06-02 10:15:35

grid布局的所有属性

收起

css3
Grid网格布局+案例
2020-02-29 18:29:49

Grid网格布局 Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。作用在容器上的： display : grid grid-template-columns : 设置列数 grid-template-rows : 设置行数 fr单位 repeat()方法注：网格...

收起

css html html5 css3 前端
WPF布局面板-Grid网格布局
千次阅读 2019-05-16 22:11:18

下面的是其中一种：Grid网格布局 Grid“网格”即可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。形成一个个网格状的布局近似HTML中的Table。Grid它的子控件都被放到一个个定义好的格子里。跟...

收起

WPF
CSS Grid网格布局详解
2019-08-24 16:06:08

Grid 布局又称网格布局，是W3C提出的一个二维布局系统，它与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以...

收起
grid网格布局.html
2021-07-05 10:34:11

简单介绍grid怎么使用的

收起
Grid网格布局详细讲解
千次阅读 2020-06-12 12:39:13

‘Grid是CSS3中网格布局系统，也是CSS3中最强大的布局系统。它是一个二维布局系统，这意味着它可以处理列和行，不像flex弹性布局主要是一维系统，他像表格一样可以让我们控制行或者例对齐，可以控制子元素跨行或者跨...

收起

css3
HTML5+CSS制作Grid网格布局入门及源码
2021-06-13 09:52:12

CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。 Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列。它还能使我们在不改变任何HTML的情况下，使用 CSS 来定位和调整网格内...

收起
grid网格布局基础篇：grid常用属性网格布局
2021-06-17 01:22:34

一、Grid网格布局概述Grid网格布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维...

收起
强大的Grid网格布局
2020-07-30 14:33:04

有时候页面需要盒子自动撑开铺满屏幕，屏幕变窄的时候又有很好的弹性，自动弹下面一行，内容不会让外面的盒子变形，那么Grid网格布局就很好的解决了这个问题。 <divclass="content"> <div>1</div&...

收起
前端开发grid网格布局，项目属性容器属性总结，学习二维布局方式
2022-04-11 20:09:30

二维网格布局方式，项目属性和容器属性以及案例，全面掌握新式二维布局方式，。。。。。。。。。。。。。。。。内部资料。。。

收起
grid 网格布局
2021-08-22 23:56:19

CSS网格布局具有以下特点：固定的位置和弹性的轨道的大小你可以使用固定的轨道尺寸创建网格，比如使用像素单位。你也可以使用比如百分比或者专门为此目的创建的新单位 fr来创建有弹性尺寸的网格。元素位置你...

收起

css
grid网格布局页面+响应式.zip
2021-04-13 10:35:48

有演示视频

收起

前端
【布局】 Grid网格布局
2022-04-07 14:31:14

CSS Grid 网格布局介绍 CSS Grid 布局是 Web 的第一个真正的布局系统。它的目的是将内容组织成行列的形式，最终使开发人员能高度控制我们眼前屏幕上页面的显示效果。CSS Grid 布局不仅仅可以使复杂的布局和精美的...

收起

前端 html5 css3