Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid 网格布局的容器与项目属性总结----PHP培训十期线上班
Blogger Information
Blog 22
fans 1
comment 1
visits 22263
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 网格布局的容器与项目属性总结----PHP培训十期线上班
Miss灬懒虫
Original
848 people have browsed it

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.         }

属性抄写

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
1 comments
零度 2020-01-01 00:50:54
你们赚大了
1 floor
Author's latest blog post