Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局属性
Blogger Information
Blog 14
fans 0
comment 0
visits 7669
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
grid布局属性
鹏建
Original
564 people have browsed it

  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有了豁然开朗的感觉。

Correcting teacher：天蓬老师天蓬老师

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