Grid属性详解 - HTML学习 - php中文网博客

首页 > 博客列表 > Grid属性详解

博主信息

博文 47

粉丝 0

访问量 31330

专题推荐

更多>

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: 某个项目在“网格单元”中的对齐方式

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

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

仿PHP中文网右侧布局

2022-07-18 14:56:59