Grid属性详解 - HTML学习

Home > List of blog posts > Grid属性详解

Blogger Information

Blog 47

fans 0

comment 0

visits 21058

Special Recommendation

More>

Related recommendations

1. grid : 创建grid容器

display: grid;

2.grid-template-columns/rows: 显式生成网格单元

注意：：
第22行和23行，可以多加几个值，每个值就是每一行或者每一列的宽度，是容器属性

<!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>grid容器/项目属性-1</title>
 <!-- em作为倍数单位，会累乘 -->
</head>
<body>
 <div class="container">
     <div class="item1">1</div>
 </div>
 <style>
     /* 定义容器： */
     .container{
         width: 30em;
         height: 30em;
         background-color: antiquewhite;
         display: grid;
         /* 划分网格单元 */
         grid-template-columns: 10em 10em 10em;
         grid-template-rows: 10em 10em 10em;
     }
     .container>.item1{
         background-color: aliceblue;
     }
 </style>
</body>
</html>

3. grid-area: 将项目放入指定的网格单元中

注意：：
第72行为grid-area属性，第1，2，3，4个参数的意思分别是，从第几行开始，从第几列开始，合并多少行，合并多少列，是容器属性

<!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>grid容器/项目属性-1</title>
 <!-- em作为倍数单位，会累乘 -->
</head>
<body>
 <div class="container">
     <div class="item1">1</div>
 </div>
 <style>
     /* 定义容器： */
     .container{
         width: 30em;
         height: 30em;
         background-color: antiquewhite;
         display: grid;
         /* 划分网格单元 */
         grid-template-columns: 10em 10em 10em 50em;
         grid-template-rows: 10em 10em 10em;
     }
     .container>.item1{
         background-color: aliceblue;
          grid-area: 2 / 2 / span 3 /span 3;
 </style>
</body>
</html>

4. grid-auto-flow: 行与列的排列规则

注意：
如果合并了单元格，那么这个属性没有用，是容器属性

<!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>grid容器/项目属性-1</title>
 <!-- em作为倍数单位，会累乘 -->
</head>
<body>
 <div class="container">
     <div class="item1">1</div>
     <div class="item2">2</div>
     <div class="item3">3</div>
     <!-- <div class="item4">4</div> -->
 </div>
 <style>
     /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
     /* 定义容器： */
     .container{
         width: 30em;
         height: 30em;
         background-color: antiquewhite;
         display: grid;
         /* 划分网格单元 */
         grid-template-columns: 10em 10em;
         grid-template-rows: 10em 10em  ;
         grid-auto-flow: row;
     }
     .container>.item1{
         background-color: aliceblue;
          /* grid-area: 1 / 1 / span 2 /span 2; */
          margin: 20px;
     }
     .container>.item2{
         background-color: aliceblue;
          /* grid-area: 1 / 3 / span 2 /span 2; */
          margin: 20px;
     }
     .container>.item3{
         background-color: aliceblue;
          /* grid-area: 3 / 1 / span 2 /span 2; */
          margin: 20px;
     }
     .container>.item4{
         background-color: aliceblue;
          /* grid-area: 3 / 3 / span 2 /span 2; */
          margin: 20px;
     }
 </style>
</body>
</html>

5. grid-auto-row/column: 隐式网格的行/列的大小

该属性设置超出容器的项目的高度，是容器属性

<!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>grid容器/项目属性-1</title>
 <!-- em作为倍数单位，会累乘 -->
</head>
<body>
 <div class="container">
     <div class="item1">1</div>
     <div class="item2">2</div>
     <div class="item3">3</div>
     <div class="item4">4</div>
     <div class="item5">5</div>
 </div>
 <style>
     /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
     /* 定义容器： */
     .container{
         width: 20em;
         height: 20em;
         background-color: antiquewhite;
         display: grid;
         /* 划分网格单元 */
         grid-template-columns: 10em 10em;
         grid-template-rows: 10em 10em  ;
         grid-auto-rows: 5em 5em;
     }
     .container>.item1{
         background-color: aliceblue;
          /* grid-area: 1 / 1 / span 2 /span 2; */
          margin: 20px;
     }
     .container>.item2{
         background-color: aliceblue;
          /* grid-area: 1 / 3 / span 2 /span 2; */
          margin: 20px;
     }
     .container>.item3{
         background-color: aliceblue;
          /* grid-area: 3 / 1 / span 2 /span 2; */
          margin: 20px;
     }
     .container>.item4{
         background-color: aliceblue;
          /* grid-area: 3 / 3 / span 2 /span 2; */
          margin: 20px;
     }
     .container>.item5{
         background-color: red;
          /* grid-area: 3 / 3 / span 2 /span 2; */
          margin: 20px;
     }
 </style>
</body>
</html>

6. 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>grid容器/项目属性-1</title>
 <!-- em作为倍数单位，会累乘 -->
</head>
<body>
 <div class="container">
     <div class="item1">1</div>
     <div class="item2">2</div>
     <div class="item3">3</div>
     <!-- <div class="item4">4</div> -->
 </div>
 <style>
     /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
     /* 定义容器： */
     .container{
         width: 40em;
         height: 40em;
         background-color: antiquewhite;
         display: grid;
         /* 划分网格单元 */
         grid-template-columns: 10em 10em 10em 10em;
         grid-template-rows: 10em 10em 10em 10em;
         /* grid-auto-flow: row; */
          gap: 10px;
     }
     .container>.item1{
         background-color: aliceblue;
          grid-area: 1 / 1 / span 2 /span 2;
     }
     .container>.item2{
         background-color: aliceblue;
          grid-area: 1 / 3 / span 2 /span 2;
     }
     .container>.item3{
         background-color: aliceblue;
          grid-area: 3 / 1 / span 2 /span 2;
     }
     .container>.item4{
         background-color: aliceblue;
          grid-area: 3 / 3 / span 2 /span 2;
     }
 </style>
</body>
</html>

7. place-content: 所有项目在“容器”中的对齐方式

各项目在容器中的排列方式，是容器属性

<!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>grid容器/项目属性-1</title>
 <!-- em作为倍数单位，会累乘 -->
</head>
<body>
 <div class="container">
     <div class="item1">1</div>
     <div class="item2">2</div>
     <div class="item3">3</div>
     <!-- <div class="item4">4</div> -->
 </div>
 <style>
     /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
     /* 定义容器： */
     .container{
         width: 50em;
         height: 50em;
         background-color: antiquewhite;
         display: grid;
         /* 划分网格单元 */
         grid-template-columns: 10em 10em 10em 10em;
         grid-template-rows: 10em 10em 10em 10em;
         /* grid-auto-flow: row; */
          gap: 10px;
          place-content: center;
     }
     .container>.item1{
         background-color: aliceblue;
          grid-area: 1 / 1 / span 2 /span 2;
     }
     .container>.item2{
         background-color: aliceblue;
          grid-area: 1 / 3 / span 2 /span 2;
     }
     .container>.item3{
         background-color: aliceblue;
          grid-area: 3 / 1 / span 2 /span 2;
     }
     .container>.item4{
         background-color: aliceblue;
          grid-area: 3 / 3 / span 2 /span 2;
     }
 </style>
</body>
</html>

8. place-items: 所有项目在“网格单元”中的对齐方式

项目中的类容在项目中的排列方式，是容器属性

<!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>grid容器/项目属性-1</title>
 <!-- em作为倍数单位，会累乘 -->
</head>
<body>
 <div class="container">
     <div class="item1">1</div>
     <div class="item2">2</div>
     <div class="item3">3</div>
     <!-- <div class="item4">4</div> -->
 </div>
 <style>
     /* 搞清楚哪些属性定义在项目中，哪些属性定义在容器中 */
     /* 定义容器： */
     .container{
         width: 50em;
         height: 50em;
         background-color: antiquewhite;
         display: grid;
         /* 划分网格单元 */
         grid-template-columns: 10em 10em 10em 10em;
         grid-template-rows: 10em 10em 10em 10em;
         /* grid-auto-flow: row; */
          gap: 10px;
          /* place-items: center end; */
     }
     .container>.item1{
         background-color: aliceblue;
          grid-area: 1 / 1 / span 2 /span 2;
          place-items: center end;
     }
     .container>.item2{
         background-color: aliceblue;
          grid-area: 1 / 3 / span 2 /span 2;
     }
     .container>.item3{
         background-color: aliceblue;
          grid-area: 3 / 1 / span 2 /span 2;
     }
     .container>.item4{
         background-color: aliceblue;
          grid-area: 3 / 3 / span 2 /span 2;
     }
 </style>
</body>
</html>

9. place-self: 某个项目在“网格单元”中的对齐方式

改变单个项目中的类容在项目中的排列方式，是项目属性

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

仿PHP中文网右侧布局

2022-07-18 14:56:59