search

博客列表 >grid布局属性

grid布局属性

鹏建
鹏建原创
2020年04月15日 18:39:27565浏览

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>创建grid容器</title>
  7.     <style>
  8.       .container {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: rgb(127, 236, 255);
  12.         /* 创建grid容器 */
  13.         display: grid;
  14.         /* 三行三列 */
  15.         grid-template-rows: 100px 100px 100px;
  16.         grid-template-columns: 100px 100px;
  17.         /*填充方式，默认行优先  */
  18.         grid-auto-flow: row;
  19.         grid-auto-flow: column;
  20.         /* 放不下的项目,会隐式生成单元格 */
  21.         grid-auto-columns: auto;
  22.         grid-auto-columns: 150px;
  23.       }
  24.       .item {
  25.         background-color: yellow;
  26.         font-size: 2em;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item item1">1</div>
  33.       <div class="item item2">2</div>
  34.       <div class="item item3">3</div>
  35.       <div class="item item4">4</div>
  36.       <div class="item item5">5</div>
  37.       <div class="item item6">6</div>
  38.       <div class="item item7">7</div>
  39.     </div>
  40.   </body>
  41. </html>

设置单元格的数量与大小
![![![![](https://img.php.cn/upload/image/709/998/457/1586946322317244.jpg)](https://img.php.cn/upload/image/906/489/668/1586946316624843.jpg)](https://img.php.cn/upload/image/562/544/680/1586946310693502.jpg)](https://img.php.cn/upload/image/273/810/889/1586946303396363.jpg)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置单元格的数量与大小</title>
  7.     <style>
  8.       .container {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: lightgray;
  12.         /* 创建grid容器 */
  13.         display: grid;
  14.         /* 固定值 */
  15.         grid-template-rows: 100px 100px 100px;
  16.         grid-template-columns: 100px 100px 100px;
  17.         /* 百分比*/
  18.         grid-template-rows: 10% 40% auto;
  19.         grid-template-columns: auto 100px 100px;
  20.         /* 比例 */
  21.         grid-template-columns: 1fr 3fr 2fr;
  22.         grid-template-rows: 1fr 1fr 2fr;
  23.         /* 重复值 */
  24.         grid-template-rows: repeat(3, 100px);
  25.         grid-template-columns: repeat(3, 80px);
  26.         /* 分组 */
  27.         grid-template-columns: repeat(2, 50px 100px);
  28.         grid-template-rows: repeat(2, 50px);
  29.         /* 弹性 */
  30.         grid-template-columns: repeat(2, minmax(50px,80px));
  31.         grid-template-rows: repeat2, minmax(50px,1fr));
  32.         /* 自动填充 */
  33.         grid-template-columns: repeat(auto-fill,80px);
  34.         grid-template-rows: repeat(auto-fill,50px); 
  35.       }
  36.       .item {
  37.         background-color: yellow;
  38.         font-size: 2em;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div class="container">
  44.       <div class="item item1">1</div>
  45.       <div class="item item2">2</div>
  46.       <div class="item item3">3</div>
  47.       <div class="item item4">4</div>
  48.       <div class="item item5">5</div>
  49.       <div class="item item6">6</div>
  50.       <div class="item item7">7</div>
  51.     </div>
  52.   </body>
  53. </html>

使用默认的网格线来划分单元格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用默认的网格线来划分单元格</title>
  7.     <style>
  8.       .container {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: lightgray;
  12.         /* 创建grid容器 */
  13.         display: grid;
  14.         grid-template-columns: repeat(4, 1fr);
  15.         grid-template-rows: repeat(4, 1fr);
  16.       }
  17.       .item {
  18.         font-size: 2em;
  19.       }
  20.       .item.item1 {
  21.         background-color: lightpink;
  22.         grid-row-start: 1;
  23.         grid-row-end: 3;
  24.         grid-column-start: 1;
  25.         grid-column-end: 3;
  26.       }
  27.       .item.item2 {
  28.         background-color: lightgreen;
  29.         grid-row: 1/3;
  30.         grid-column: 3/5;
  31.       }
  32.       .item.item3 {
  33.         background-color: lightblue;
  34.         /* grid-row-start: 3;
  35.         grid-row-end: span 2;
  36.         grid-column-start: 1;
  37.         grid-column-end: span 1; */
  38.         grid-row: 3 / span 2;
  39.         grid-column: 1 / span 2;
  40.       }
  41.       /* 从原地方扩展 */
  42.       .item.item4 {
  43.         background-color: lightsalmon;
  44.         /* grid-row-start: 3;  */
  45.         grid-row-end: span 2;
  46.         /* grid-column-start: 3; */
  47.         grid-column-end: span 2;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="container">
  53.       <div class="item item1">1</div>
  54.       <div class="item item2">2</div>
  55.       <div class="item item3">3</div>
  56.       <div class="item item4">4</div>
  57.     </div>
  58.   </body>
  59. </html>

使用命名网格线来划分单元格<

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用命名网格线来划分单元格</title>
  7.     <style>
  8.       .container {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: lightgray;
  12.         /* 创建grid容器 */
  13.         display: grid;
  14.         grid-template-columns: [c1-start] 100px[c1-end c2-start] 100px[c2-end c3-start] 100px[c3-end c4-start] 100px[c4-end];
  15.         grid-template-rows: [r1-start] 100px[r1-end r2-start] 100px[r2-end r3-start] 100px[r3-end r4-start] 100px[r4-end];
  16.       }
  17.       .item {
  18.         font-size: 2em;
  19.       }
  20.       .item.item1 {
  21.         background-color: lightpink;
  22.         grid-column-start:c1-start;
  23.         grid-row-start:r1-start;
  24.         grid-row-end:r2-end;
  25.       }
  26.       .item.item2 {
  27.         background-color: lightgreen;
  28.         grid-column:c2-start/ c3-end;
  29.       }
  30.       .item.item3 {
  31.         background-color: lightblue;
  32.         grid-row: span 3;
  33.       }
  34.       .item.item4 {
  35.         background-color: lightsalmon;
  36.         grid-row:span 2;
  37.         grid-column:span 2;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="container">
  43.       <div class="item item1">1</div>
  44.       <div class="item item2">2</div>
  45.       <div class="item item3">3</div>
  46.       <div class="item item4">4</div>
  47.     </div>
  48.   </body>
  49. </html>


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>默认网格区域</title>
<style>
.container {
width: 400px;
height: 400px;
background-color: lightgray;
/ 创建grid容器 /
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.item {
font-size: 2em;
}
.item.item1 {
background-color: lightpink;
/ grid-area:row-start/col-start/row-end/col-end; /
grid-area: 1/1/3/3;
}
.item.item2 {
background-color: lightgreen;
/ grid-area: 1/3/3/4; /
/ 从当前位置填充 /
/ grid-area: span 2 / span 1; /
/ 默认跨一行或一列 /
grid-area: span 2;
}
.item.item3 {
background-color: lightblue;
grid-area: span 3;

  1.   }
  2.   .item.item4 {
  3.     background-color: lightsalmon;
  4.   }
  5. </style>

</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
</body>
</html>

  2. 命名网格区域
  3. ![](https://img.php.cn/upload/image/227/482/914/1586946502825480.jpg)

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>命名网格区域</title>
<style>
.container {
width: 400px;
height: 400px;
background-color: lightgray;
/ 创建grid容器 /
display: grid;
grid-template-columns: 50px 1fr 1fr 50px;
grid-template-rows: 30px 1fr 30px;
grid-template-areas:
“header header header header”
“left main main right”
“footer footer footer footer”;
}
.item {
font-size: 2em;
}
.item.item1 {
background-color: lightpink;
grid-area: header;
}
.item.item2 {
background-color: lightgreen;
grid-area: left;
}
.item.item3 {
background-color: lightblue;
grid-area: main;
}
.item.item4 {
background-color: lightsalmon;
grid-area: right;
}
.item.item5 {
background-color: lightgoldenrodyellow;
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>
</html>

  2. 命名网格区域占位符$网格区域线的默认名
  3. ![](https://img.php.cn/upload/image/255/501/413/1586946550598632.jpg)

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>命名网格区域占位符$网格区域线的默认名称</title>
<style>
.container {
width: 400px;
height: 400px;
background-color: lightgray;
/ 创建grid容器 /
display: grid;
grid-template-columns: 50px 1fr 1fr 50px;
grid-template-rows: 30px 1fr 30px;
grid-template-areas:
“header header header header”
“. . . . “
“footer footer footer footer”;
}
.item {
font-size: 2em;
}
.item.item1 {
background-color: lightpink;
grid-area: header;
}
.item.item2 {
background-color: lightgreen;
/ grid-area: left; /
}
.item.item3 {
background-color: lightblue;
/ grid-area: main1; /
}
.item.item4 {
background-color: lightsalmon;
/ grid-area: main2; /
}
.item.item5 {
background-color: lightgreen;
/ grid-area: right; /
}
.item.item6 {
background-color: lightgoldenrodyellow;
/ grid-area: footer; /
grid-area:footer-start/footer-start/footer-end/footer-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
</body>
</html>

  2. 设置单元格在容器中的对齐方式
  3. ![](https://img.php.cn/upload/image/485/922/711/1586946691337248.jpg)

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置单元格在容器中的对齐方式</title>
<style>
.container{
width: 400px;
height: 400px;
background-color: wheat;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(2,100px);

  1.         justify-content: center;
  2.         justify-content: start;
  3.         justify-content: end;
  4.         justify-content: space-between;
  5.         justify-content: space-around;
  6.         justify-content: space-evenly;
  7.         justify-content: stretch;
  9.         align-content: start;
  10.         align-content: end;
  11.         align-content: center;
  12.         align-content: space-between;
  13.         align-content: space-around;
  14.         align-content: space-evenly;
  15.         align-content: stretch;
  17.          /* place-content: 垂直对齐 水平对齐 */
  18.          place-content: start space-evenly;
  19.           place-content:center ;
  20.     }
  21.     .item{font-size: 2em;
  22.     background-color: lightgreen;}
  23. </style>

</head>

<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
</body>
</html>

  2. 设置项目在单元格中的对齐方式$设置某个项目在单元格中的对齐方式
  3. ![](https://img.php.cn/upload/image/275/413/213/1586946758441026.jpg)

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>设置项目在单元格中的对齐方式$设置某个项目在单元格中的对齐方式</title>
<style>
.container {
width: 400px;
height: 400px;
background-color: wheat;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);

  1.     /* place-content: 垂直对齐 水平对齐 */
  2.     place-items: start end;
  3.     place-items: center;
  4.   }
  5.   .item {
  6.     font-size: 2em;
  7.     background-color: lightgreen;
  8.   }
  9.   .item.item3 {
  10.     place-self: start center;
  11.   }
  12. </style>

</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
</body>
</html>

  2. 行、列间距
  3. ![](https://img.php.cn/upload/image/447/728/750/1586946806199541.jpg)

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>行、列间距</title>
<style>
.container {
width: 400px;
height: 400px;
background-color: wheat;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);

  1.     row-gap: 5px;
  2.     column-gap: 10px;
  3.     /* row-gap: 10px;
  4.     column-gap: 10px; */
  5.     gap: 10px;
  6.   }
  7.   .item {
  8.     font-size: 2em;
  9.     background-color: lightgreen;
  10.   }
  11. </style>

</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
</body>
</html>
```

作业总结：通过练习，对知识进行了梳理，对justify-content、align-content、justify-items和align-items有了豁然开朗的感觉。

上一条：Grid实战案例分享(相册和栅格布局组件)下一条：CSS的Grid布局中的常用属性以及属性的常用值
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多