search

博客列表 >初识Grid布局

初识Grid布局

Yang_Sir
Yang_Sir原创
2020年04月14日 15:19:40644浏览

Grid 网格布局

1. 什么是网格布局

  • 网格布局是二维系统
  • 通过横竖线把容器分割成多个网格，然后设置元素在网格上的排列方式。

2.创建grid容器

  • 通过容器的display属性声明布局方式为grid
  • grid-auto-flow: 声明项目在网格中自动填充方案(行优先/列优先)
  • grid-template-columns/rows: 在容器中显式地划分行与列,生成指定数量的网格来放置项目，超出数量的项目会填充到隐式网格中
  • grid-auto-rows/columns: 根据项目数量,在容器中隐式生成行与列来放置它们
  • 示例：
  1. <style>
  2.         .container{
  3.             height: 400px;
  4.             width: 400px;
  5.             background-color: rgb(151, 73, 73);
  6.             display: grid;
  7.             /*设置填充方式为列优先*/
  8.             grid-auto-flow: column;
  9.             /*显式划分3列，2行*/
  10.             grid-template-columns: repeat(3,100px);
  11.             grid-template-rows: repeat(2,100px);
  13.             /*设置隐式网格的宽高，列优先时行高会失效，行优先时列宽失效*/
  14.             grid-auto-columns: 200px;
  15.             grid-auto-rows: 150px;
  16.         }
  17.         .item{
  18.             /* height: 100px;
  19.             width: 100px; */
  20.             background-color: lightblue;
  21.         }
  22.     </style>
  24.     <div class="container">
  25.         <div class="item item1">1</div>
  26.         <div class="item item2">2</div>
  27.         <div class="item item3">3</div>
  28.         <div class="item item4">4</div>
  29.         <div class="item item5">5</div>
  30.         <div class="item item6">6</div>
  31.         <div class="item item7">7</div>
  32.         <div class="item item8">8</div>
  33.     </div>

3.项目在容器中的填充方式

3.1 使用网格线定位单元格

  • 默认从左上角开始,从左到右,从上到下,依次从 1 开始编号
  • 如果从右下角开始,由下向上,由右向左,依次由从-1 开始编号
  • 根据数字网格线,可以将项目放到网格线形成的封闭矩形区域中
  • 项目属性：grid-row、grid-column
  • 示例：
  1. <style>
  2.  .container{
  3.             height: 400px;
  4.             width: 400px;
  5.             background-color: rgb(151, 73, 73);
  6.             display: grid;
  7.             grid-template-columns: repeat(3,100px);
  8.             grid-template-rows: repeat(2,100px);
  10.         }
  11.         .item{
  12.             font-size: 2rem;
  13.             background-color: lightblue;
  14.         }
  15.         .item.item1{
  16.             grid-row: 1 / span 2;
  17.             /* grid-column: 1/span 2; */
  18.             background-color: wheat;
  19.         }
  20.         .item.item2{
  21.             grid-column: 2 / 4;
  22.             /* grid-column: 1/span 2; */
  23.             background-color: pink;
  24.         }
  25. </style>
  26. <div class="container">
  27.         <div class="item item1">1</div>
  28.         <div class="item item2">2</div>
  29.         <div class="item item3">3</div>
  30.         </div>

3.2 网格区域

  • grid-template-areas:可以为每一个网格区域设置一个语义化的名称
  • 具有名称的网络区域称之为命名区域
  • 名称相同的网格区域会合并, 形成更大的区域空间
  • 项目设置的区域名称后,会自动填充到容器中应对的命名区域中
  • 设置项目属性grid-area: 将项目填充到指定容器的区域中
  • 语法: grid-area: 起始行 / 起始列 / 结束行 / 结束列
  • 示例：
  1. <style>
  2.  .container{
  3.             height: 400px;
  4.             width: 400px;
  5.             background-color: rgb(151, 73, 73);
  6.             display: grid;
  7.             grid-template-columns: repeat(4,100px);
  8.             grid-template-rows: repeat(4,100px);
  9.             grid-template-areas: 
  10.             "area1 area1 area1 area2"
  11.             "area4 . . area2"
  12.             "area4 . . area2"
  13.             "area4 area3 area3 area3";  
  14.         }
  15.         .item{
  16.             font-size: 2rem;
  17.             background-color: lightblue;
  18.         }
  19.         .item.item1{
  20.             grid-area: area1;
  21.             background-color: blue;
  22.         }
  23.         .item.item2{
  24.             grid-area: area2;
  25.             background-color:green;
  26.         }
  27.         .item.item3{
  28.             grid-area: area3;
  29.             background-color: yellow;
  30.         }
  31.         .item.item4{
  32.             grid-area: area4;
  33.             background-color: violet;
  34.         }
  36. </style>
  37. <div class="container">
  38.         <div class="item item1">1</div>
  39.         <div class="item item2">2</div>
  40.         <div class="item item3">3</div>
  41.         <div class="item item4">4</div>
  42.     </div>

4. 项目的对齐方式

4.1 所有项目在容器中的对齐方式

  • 所有项目作为一个整体
  • justify-content: 设置所有项目在容器中水平方向的对齐方式
  • align-content: 设置所有项目在容器中垂直方向的对齐方式
  • place-content: 上面二个属性的简写, place-content: 垂直对齐方式 水平对齐方式

  • 要有剩余空间才有意义

  • 示例：

  1. <style>
  2.  .container{
  3.             height: 400px;
  4.             width: 400px;
  5.             background-color: rgb(151, 73, 73);
  6.             display: grid;
  7.             grid-template-columns: repeat(3,100px);
  8.             grid-template-rows: repeat(3,100px);
  9.             justify-content: center;
  10.             align-content: center;
  11.         }
  12.         .item{
  13.             font-size: 2rem;
  14.             background-color: lightblue;
  15.         }
  16. </style>
  17. <div class="container">
  18.         <div class="item item1">1</div>
  19.         <div class="item item2">2</div>
  20.        <div class="item item3">3</div>
  21.          <div class="item item4">4</div>
  22.         <div class="item item5">5</div>
  23.     </div>

4.2 所有项目在网格的对齐方式

  • justify-items: 设置所有项目在单元格/网格区域中水平方向的对齐方式
  • align-items: 设置所有项目在单元格/网格区域中垂直方向的对齐方式
  • place-items: 上面二个属性的简写, place-items: 垂直对齐方式 水平对齐方式
  • 示例：
  1. <style>
  2.   .container{
  3.             height: 400px;
  4.             width: 400px;
  5.             background-color: rgb(151, 73, 73);
  6.             display: grid;
  7.             grid-template-columns: repeat(4,100px);
  8.             grid-template-rows: repeat(4,100px);
  9.             justify-items: center;
  10.             align-items: center;
  11.         }
  12.         .item{
  13.             width: 60px;
  14.             height: 60px;
  15.             font-size: 2rem;
  16.             background-color: lightblue;
  17.         }
  18. </style>
  19. <div class="container">
  20.         <div class="item item1">1</div>
  21.         <div class="item item2">2</div>
  22.        <div class="item item3">3</div>
  23.          <div class="item item4">4</div>
  24.         <div class="item item5">5</div>
  25.     </div>

4.3 设置某个项目在网格内的对齐方式

  1. <style>
  2.  .container{
  3.             height: 400px;
  4.             width: 400px;
  5.             background-color: rgb(151, 73, 73);
  6.             display: grid;
  7.             grid-template-columns: repeat(4,100px);
  8.             grid-template-rows: repeat(4,100px);
  9.             grid-template-areas: 
  10.             ". area1 area1  area1 ";
  11.         }
  12.         .item{
  13.             height: 60px;
  14.             width: 60px;;
  15.             font-size: 2rem;
  16.             background-color: lightblue;
  17.         }
  19.         .item.item1{
  20.             width: 180px;
  21.             grid-area: area1;
  22.             background-color: yellow;
  23.             place-self: center;
  24.         }
  25.         .item.item2{
  26.             background-color: red;
  27.             place-self: center end;
  28.         }
  29. </style>
  30. <div class="container">
  31.         <div class="item item1">1</div>
  32.         <div class="item item2">2</div>
  33.        <div class="item item3">3</div>
  34.          <div class="item item4">4</div>
  35.         <div class="item item5">5</div>
  36.     </div>

5. 容器中行与列之间的间距

  • column-gap: 列间距
  • row-gap: 行间距
  • gap: 行间距 列间距: 简写
  1. <style>
  2.   .container{
  3.             height: 400px;
  4.             width: 400px;
  5.             display: grid;
  6.             grid-template-columns: repeat(3,100px);
  7.             grid-template-rows: repeat(3,100px);
  8.             gap:20px 10px;
  9.         }
  10.         .item{
  11.             background-color: green;
  12.         }
  13. </style>
  14. <div class="container">
  15.         <div class="item item1">1</div>
  16.         <div class="item item2">2</div>
  17.        <div class="item item3">3</div>
  18.          <div class="item item4">4</div>
  19.         <div class="item item5">5</div>
  20.     </div>

6. 课程总结

  • grig作为二维的栅格布局方式，用于整体页面规划非常方便
  • grid可以使用行号，名称或网格区域将项目放置在网格上的精确位置。
  • 还可以通过设置隐式网格，设置未在显式网格上显示的项目的放置
上一条：0413-grid布局各个属性下一条：grid布局作业练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多