search

博客列表 >Grid 网格布局的容器与项目属性总结----PHP培训十期线上班

Grid 网格布局的容器与项目属性总结----PHP培训十期线上班

Miss灬懒虫
Miss灬懒虫原创
2019年12月31日 17:47:21844浏览

Grid 网格布局的容器与项目属性总结

概述与总结

通过对网格布局的学习，发现他和flex弹性布局相似的地方不较多，区别只是作用范围上，其中flex主要使用在一维空间，并且比较适合细节的布局和元素布局调整。而grid则宏观上的效果更好一些，这都是得益于他的二位空间操作性。当然二者能做的工作没有必须使用哪一个，主要还是需要看页面的布局需求。尽量以减少代码冗余，以及提供复用性去考虑。

因为个人习惯原因，关于grid的容器和项目属性说明都在代码中，请认真浏览哦 ~.~.~ ！

效果图

布局思路

我们以典型的圣杯布局为例，在整个grid容器对齐（现对于页面）上使用了

  1. .container{
  2.     /*标准写法
  3.     justify-content: center;
  4.     align-content: center;
  5.     */
  6.     /*简写*/
  7.     place-content: center;
  8.     }

容器内项目的对齐使用了

  1. .container{
  2. /*设置项目（单元格）中元素的对齐方式:
  3.                 justify-items:center;
  4.                 align-items:center;
  5.             */
  6.             place-items: center;
  7. }

目录结构

项目代码

  1. html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Grid布局</title>
  6. </head>
  7. <body>
  8. <div class="container">
  9.     <div class="header"><span>header</span></div>
  10.     <div class="left-ad">left-ad</div>
  11.     <div class="content">content</div>
  12.     <div class="right-ad">right-ad</div>
  13.     <div class="footer">footer</div>
  14. </div>
  15. </body>
  16. </html>
  1. css代码
  1. /*网格布局涉及的术语：
  2.             1-网格线（grid lines):也就是划分格子的线，可以使用编号或者命名进行区分;
  3.             2-轨道（grid tracks):是指两条网格线中间的空间，轨道的宽度一般使用 px,%,fr来表示（fr表示等分份数的计量单位）;
  4.             3-单元格（grid cell）:指被四条网格线包围起来的封闭空间（矩形区域）;
  5.             4-网格区域（grid area）:由多个单元格形成的矩形区域（封闭）;
  6.             5-网格间距(grid gap):行或者列之间的间隔;
  7.             */
  9.         /*grid 网格容器的属性
  10.         1-划分行、列与命名（显式网格）：
  11.             1.1 grid-template-rows,定义行（横向）的网格线之间轨道的大小；
  12.             1.2 grid-template-columns,定义列（纵向）的网格线之间轨道的大小；
  13.                 其大小可是使用绝对值 px，也可以使用 %，同时也可按照等分份数占比 fr；
  14.                 特列： grid-template-columns:100px 1fr ,其中的 ‘1fr’,表示将轨道剩余空间，分配给第二列的单元格;
  15.             1.3 repeat()函数，在轨道大小存在重复时可是使用此函数；
  16.             1.4 minmax()函数，指定轨道大小的 最小值 和最大值;
  17.             1.5 grid-template-area, 用于定义网格区域的名称；
  18.                 一般配合网格元素（item项目）的 grid-area 属性来使用；
  19.         2-设置行或者列之间的间隔：
  20.             2.1 grid-row-gap,设置行之间的间隔距离;
  21.             2.2 grid-column-gap,设置列之间的间隔距离;
  22.                 简写 grid-gap: 行间距,列间距; ,例如:grid-gap: 20px 30px ;
  23.         3-隐式网格，是指浏览器自动计算生成的网格，一般是未进行显示设置，但是grid容器中存在元素时；
  24.             3.1 grid-auto-columns, 设置隐式网格的列宽;
  25.             3.2 grid-auto-row, 设置隐式网格的行高;
  26.         4-网格的内元素（item项目）的设置：
  27.             4.1 grid-auto-flow, 设置网格中元素（item项目）的排列流动方向/排列方向（默认先行后列）;
  28.             4.2 justify-content, 设置网格内所有元素（item项目）的水平方向对齐方式;
  29.             4.3 align-content, 设置网格内所有元素（item项目）的垂直对方向齐方式;
  30.                 4.2/4.3 简写： place-content: 水平对齐方式 垂直对齐方式 ;
  31.             4.4 justify-items,设置单元格中内容，在单元格内的水平对齐方式;
  32.             4.5 align-items,设置单元格中内容，在单元格内的垂直对齐方式;
  33.                 4.4/4.5 简写：place-items
  34.         */
  36.         /*grid 网格子元素（item项目/单元格)的属性
  37.         1-定义子元素（item项目/单元格）所在的单元格;
  38.             1.1 grid-column:start/end ,定义项目所在单元格的列的起止线；
  39.                 grid-row:start/end ,定义项目所在单元格的行的起止线；
  40.            1.2 grid-area: top-lines/left-lines/bottom-lines/right-lines ,按照逆时针顺序定义项目所在单元格的区域；
  41.                 grid-area: header; 网格项目通过绑定容器中定义的网格区域名字，确认所在区域；
  42.            1.3 justify-self, 设置网格容器中，某一个特定项目（单元格）的水平对齐方式;
  43.                 align-self, 设置网格容器中，某一个特定项目（单元格）的垂直对齐方式；
  44.                 1.3 简写: place-self: 水平对齐方式 垂直对齐方式；
  45.         */
  47. /*CSS样式正文
  48. 公共样式*/
  49. *{
  50.             margin: 0;
  51.             padding: 0;
  52.         }
  53.         * :not(body){
  54.             outline: 1px dashed red;
  55.         }
  56.         .container{
  57.             width: 600px;
  58.             height: 400px;
  59.             /*转换为网格布局*/
  60.             display: grid;
  61.             /*划分行和列，设置行和列的间距*/
  62.             grid-template-rows: 80px 100px 80px;
  63.             grid-template-columns: repeat(3,80px);
  64.             grid-gap:10px 15px;
  65.             /*定义网格内-项目名字*/
  67.             /*设置网格容器本身，在页面的对齐方式:
  68.                 justify-content: center;
  69.                 align-content: center;
  70.             */
  71.             place-content: center;
  73.             /*设置项目（单元格）中元素的对齐方式:
  74.                 justify-items:center;
  75.                 align-items:center;
  76.             */
  77.             place-items: center;
  78.         }
  80.         /*设置网格区域名字*/
  81.         .container{
  82.             grid-template-areas: 'header header header'
  83.             'left-ad content right-ad'
  84.             'footer footer footer';
  85.         }
  87.         /*绑定单元格所占区域名字*/
  88.         .container>.header{
  89.             grid-area: header;
  90.             width: 80%;
  91.             height: 80%;
  92.             background-color: #63a35c;
  93.             place-self: center;
  95.             /*转换flex 弹性盒子对 内部元素进行居中 */
  96.             display: flex;
  97.             flex-flow: row nowrap;
  98.             justify-content: center;
  99.             align-items: center;
  100.         }
  101.         /*头部内的子元素*/
  102.         .container>.header>span{
  103.             width: 100px ;
  104.             height: 30px;
  105.             background-color: #a71d5d;
  106.             /*元素内容文本居中*/
  107.             line-height: 30px;
  108.             text-align: center;
  110.         }
  112.         /*left-ad侧边栏*/
  113.         .container>.left-ad{
  114.              grid-area: left-ad;
  115.              width: 100%;
  116.              height: 100%;
  117.              background-color: #9a6e3a;
  118.          }
  120.         /*主体内容区域*/
  121.         .container>.content{
  122.             grid-area: content;
  123.             width: 100%;
  124.             height: 100%;
  125.             background-color: wheat;
  126.         }
  128.         /*right-ad侧边栏*/
  129.         .container>.right-ad{
  130.             grid-area: right-ad;
  131.             width: 100%;
  132.             height: 100%;
  133.             background-color: #9a6e3a;
  134.         }
  136.         /*底部版权*/
  137.         .container>.footer{
  138.             grid-area: footer;
  139.             width: 100%;
  140.             height: 100%;
  141.             background-color: #178cee;
  142.         }

属性抄写

上一条：12.30作业下一条：laravel控制器调用数据库，视图层ifelse等
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
零度2020-01-01 00:50:541楼
你们赚大了

相关文章

查看更多