search

博客列表 >2019-12-30 CSS中Grid布局的属性实操 PHP培训十期

2019-12-30 CSS中Grid布局的属性实操 PHP培训十期

ys899
ys899原创
2020年01月06日 10:02:21587浏览

Grid 网格布局

1. Grid中的术语

  • 网格线(grid lines): 编号, 命名
  • 轨道(grid tracks): 二条线中间的空间, px, %, fr,auto
  • 单元格(grid cell): 四条网格线包起来的封闭空间
  • 网格区域(grid area): 多个单元格形成的矩形区域
  • 网格间距(grid gap): 行或列之间的间隙

2. Grid容器属性

2.1 创建显式网格轨道

  • grid-template-colums: 基于列,定义网络线的名称与与轨道大小
  • grid-template-rows: 基于行,定义网络线的名称与与轨道大小
  • grid-template-areas: 命名网格区域(配合gird项目的grid-area属性)

2.2 创建隐式网格轨道

  • grid-auto-flow: 网格中项目的流动方/排列方向(默认先行后列)
  • grid-auto-columns: 隐式网格的列宽
  • grid-auto-rows: 隐式网格的行高

2.3 创建轨道间距

  • grid-column-gap | grid-row-gap | grid-gap | gap: 行/列间隙

2.4 所有项目在网络容器中的对齐方式

  • justify-contens: 设置所有项目在网格容器中的水平对齐方式
  • align-content: 设置所有项目在网格容器中的垂直对齐方式
  • place-content: justify-content和align-content的属性简写

2.5 所有项目在单元格中的对齐方式

  • justify-items: 设置所有项目在单元格内的水平对齐方式
  • align-items: 设置所有项目在单元格内的垂直对齐方式
  • place-items: justify-items和align-items的属性简写

3. Grid项目属性

3.1 将项目放置到单元格中

  • grid-column-start: 起始列编号
  • grid-column-end: 终止列编号

  • grid-column: 上面二属性缩写

  • grid-row-start: 起始行编号

  • grid-row-end: 终止行编号
  • grid-row: 上面二属性编写

3.2 将项目放置到网格区域中

  • grid-area: top/left/bottom/right: 将项目按逆时针顺序放置
  • grid-area: area-name: 将项目放置到已命名的网格区域中

3.1 项目在单元格中的对齐方式

  • justify-self: 设置项目在单元格中的水平对齐方式
  • align-self: 设置项目在单元格中的垂直对齐方式

  • place-self: justify-self和align-self的属性简写
    ```CSS Code

    初识grid

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>网格区域填充与隐式网格</title>
    6.   <style>
    7.       * :not(body) {
    8.           outline: 1px dashed red;
    9.       }
    10.       .container {
    11.           width: 600px;
    12.           font-size: 2rem;
    14.           `display`: grid;
    16.           /* 划分网格 */
    17.           `grid-template-columns`: repeat(3, 1fr);
    18.           `grid-template-rows`: repeat(3, 1fr);
    20.       }
    22.       .container > .item:first-of-type {
    23.           /* 用网格线命名来快速填充: grid-area */
    24.           /* 注意顺序是顺时针: 上左下右, 与传统的上右下左的逆时针是完全相反的, 也很记忆 */
    25.           /* 上:第一行线,左:第一列线,下:第二行线,右:第三列线 */
    26.           /* 简单记忆: 第一个项目占据网格中的1行1列到2行3列之间的区域空间 */
    27.           `grid-area`: 1/1/2/3;
    28.           background-color: lightgreen;
    29.       }
    31.       /* 新名称: 由浏览器自动根据项目数据创建的网格空间叫: 隐式网格,对应属性是grid-auto-rows/columns */
    32.       .container {
    33.           /* 行的方向是可扩展的, 所有行高是有效的 */
    34.           `grid-auto-rows`: 150px;
    36.           /* 列在沿水平扩展,空间是有限的,以显示网格的设置为准,这里设置不必设置,设置也是无效的 */
    37.           /* `grid-auto-columns`: 100px; */
    38.           /* 那么什么时候这个隐式的列宽会有效呢,在项目排列顺序发生变化时,即项目流动方向不再是默认的:先行后列,而先列后行,且在水平方向有剩余空间时 */
    39.           /* `grid-auto-flow`: column; */
    40.       }
    41.   </style>
    42. </head>
    43. <body>
    44.   <div class="container">
    45.       <div class="item">1</div>
    46.       <div class="item">2</div>
    47.       <div class="item">3</div>
    48.       <div class="item">4</div>
    49.       <div class="item">5</div>
    50.   </div>
    51. </body>
    52. </html>

    布局实操

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>创建网格区域模板与项目填充</title>
    6.   <style>
    7.       * :not(body) {
    8.           outline: 1px dashed red;
    9.       }
    10.       .container {
    11.           width: 600px;
    12.           height: 300px;
    13.           font-size: 2rem;
    15.           display: grid;
    17.           /* 给每一个单元格命名 */
    18.           `grid-template-areas`: 
    19.               'a b c'
    20.               'd e f'
    21.               'g h i';  
    22.       } 
    24.       .container > .item:first-of-type {
    25.           /* 项目命名: grid-area */
    26.           grid-area: a;
    27.           background-color: lightgreen;
    28.       }
    30.       /* 注意: 被命名的网格区域的位置, 与它在源码的书写无关 */
    31.       .container > .item:nth-of-type(2) {
    32.           /* 虽然它在html源码中是第二个子元素项目,但是在网格中却在第二行第二列 */
    33.           grid-area: e;
    34.           background-color: lightblue;
    35.       }
    37.       /* 单元格的合并: 相同名称的项目单元,会将所占空间进行合并,形成网络区域 */
    38.       .container > .item:nth-of-type(7) {  
    40.           /* `grid-column-start`: 1; */
    41.           /* `grid-column-end`: -1; */
    42.           /* `grid-row-start`: 3; */
    43.           /* `grid-row-end`: 4; */
    45.           /* 以上项目填充与单元格合并操作可以简写 */
    46.           /* `grid-column`: 1 / span 3; */
    47.           /* 默认跨一行/列 */
    48.           /* `grid-row`: 3;   */
    50.           /* 如果仍觉得代码太多,还可以用grid-area进一步简化 */
    51.           /* 将项目填充到从3行1列开始到3行4列为止的网格区域内 */
    52.           /* `grid-area` 3 / 1 / 3 / 4; */
    53.           /* 也可直接指定跨越的列数 */
    54.           grid-area: 3 / 1 / 3 / span 3;
    56.           background-color: lightgray;
    57.       }
    59.       /* 但现在咱们有了一种更直观的设置方式: 命名区域 */
    60.       /* 因为每一个单元格都有了一个名称, 只需要将需要合并的单元格, 起一个相同的名称即可 */
    61.       /* 第一步: 将需要合并的单元格的名称, 设置为相同名称*/
    62.       .container {
    63.           grid-template-areas: 'a b c'
    64.               'd e f'
    65.               'g g g'; 
    66.       }
    67.       /* 第二步: 为需要占据一个或多个单元格的项目进行命名 */
    68.       .container > .item:nth-of-type(7) {
    69.           `grid-area`: g;
    70.           background-color:wheat;
    71.       }
    73.   </style>
    74. </head>
    75. <body>
    76.   <div class="container">
    77.       <div class="item">1</div>
    78.       <div class="item">2</div>
    79.       <div class="item">3</div>
    80.       <div class="item">4</div>
    81.       <div class="item">5</div>
    82.       <div class="item">6</div>
    83.       <div class="item">7</div>
    84.   </div>
    85. </body>
    86. </html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Grid网格所有项目的整体对齐方式</title>
    6.   <style>
    7.       * :not(body) {
    8.           outline: 1px dashed red;
    9.       }
    10.       .container {
    11.           width: 600px;
    12.           height: 400px;
    13.           font-size: 2rem;
    15.           display: grid;
    17.           /* 划分网格 */
    18.           grid-template-columns: repeat(3, 100px);
    19.           grid-template-rows: repeat(3, 80px);
    20.           `grid-gap: 10px;`
    22.           /* 1. 设置所有项目在网格容器中的对齐方式*/
    23.           /* 水平方向 */
    24.           /* 默认start */
    25.           `justify-content`: start;
    26.           justify-content: end;
    27.           justify-content: center;
    29.           /* 垂直方向 */
    30.           /* 默认start */
    31.           `align-content`: start;
    32.           align-content: end;
    33.           align-content: center;
    35.           /* 简化 */
    36.           /* place-content: 垂直 水平 */
    37.           `place-content`: end end;
    39.           /* 2. 设置所有项目在单元格内的对齐对齐 */
    40.           /* 默认水平与垂直都是自动扩展/拉伸的 */
    41.           /* 水平方向 */
    42.           `justify-items`: stretch;
    43.           justify-items: start;
    44.           justify-items: end;
    45.           justify-items: center;
    47.           /* 垂直方向 */
    48.           `align-items`: stretch;
    49.           align-items: start;
    50.           align-items: end;
    51.           align-items: center;
    53.           /* 简化 */
    54.           /* place-content: 垂直 水平 */
    55.           `place-items`: end center;
    57.       }
    59.       .container > .item {
    60.           background-color: wheat;
    61.       }
    62.   </style>
    63. </head>
    64. <body>
    65.   <div class="container">
    66.       <div class="item">1</div>
    67.       <div class="item">2</div>
    68.       <div class="item">3</div>
    69.       <div class="item">4</div>
    70.       <div class="item">5</div>
    71.       <div class="item">6</div>
    72.       <div class="item">7</div>
    73.       <div class="item">8</div>
    74.       <div class="item">9</div>
    75.   </div>
    76. </body>
    77. </html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>模拟Bootstrap/layUI等框架的12列栅格布局</title>
    6.   <style>
    7.       .container {
    8.           width: 1000px;
    9.           margin: auto;
    10.       }
    11.       .row {
    12.           display: grid;
    13.           /* 平均等比分成12份 */
    14.           'grid-template-columns': repeat(12, 1fr);
    15.           'grid-column-gap': 8px;
    16.           height: 50px;
    17.           margin-bottom: 10px;
    18.           background-color: #eeeeee;
    19.       }
    21.       .col-1 {
    22.           /*起始列编号省略,则为auto, 由容器根据剩余空间自动分配*/
    23.           /*grid-column-start: auto;*/
    24.           'grid-column-end': span 1;
    25.       }
    26.       .col-2 {
    27.           grid-column-end: span 2;
    28.       }
    29.       .col-3 {
    30.           grid-column-end: span 3;
    31.       }
    32.       .col-4 {
    33.           grid-column-end: span 4;
    34.       }
    35.       .col-5 {
    36.           grid-column-end: span 5;
    37.       }
    38.       .col-6 {
    39.           grid-column-end: span 6;
    40.       }
    41.       .col-7 {
    42.           grid-column-end: span 7;
    43.       }
    44.       .col-8 {
    45.           grid-column-end: span 8;
    46.       }
    47.       .col-9 {
    48.           grid-column-end: span 9;
    49.       }
    50.       .col-10 {
    51.           grid-column-end: span 10;
    52.       }
    53.       .col-11 {
    54.           grid-column-end: span 11;
    55.       }
    56.       .col-12 {
    57.           grid-column-end: span 12;
    58.       }
    60.       .item {
    61.           background-color: lightcyan;
    62.           outline: 1px dashed red;;
    63.       }
    64.   </style>
    65. </head>
    66. <body>
    67.   <div class="container">
    68.       <!-- 二等份 -->
    69.       <div class="row">
    70.           <span class="item col-6">6列</span>
    71.           <span class="item col-6">6列</span>
    72.       </div>
    73.       <!-- 三等份 -->
    74.       <div class="row">
    75.           <span class="item col-4">4列</span>
    76.           <span class="item col-4">4列</span>
    77.           <span class="item col-4">4列</span>
    78.       </div>
    79.       <!-- 三列 -->
    80.       <div class="row">
    81.           <span class="item col-2">2列</span>
    82.           <span class="item col-8">8列</span>
    83.           <span class="item col-2">2列</span>
    84.       </div>
    86.       <!-- 未占满 -->
    87.       <div class="row">
    88.           <span class="item col-3">3列</span>
    89.           <span class="item col-3">3列</span>
    90.       </div>
    92.       <!-- 12列 -->
    93.       <div class="row">
    94.           <div class="item col-1">1列</div>
    95.           <div class="item col-1">1列</div>
    96.           <div class="item col-1">1列</div>
    97.           <div class="item col-1">1列</div>
    98.           <div class="item col-1">1列</div>
    99.           <div class="item col-1">1列</div>
    100.           <div class="item col-1">1列</div>
    101.           <div class="item col-1">1列</div>
    102.           <div class="item col-1">1列</div>
    103.           <div class="item col-1">1列</div>
    104.           <div class="item col-1">1列</div>
    105.           <div class="item col-1">1列</div>
    106.       </div>
    107.   </div>
    108. </body>
    109. </html>

    心得体会

    Grid提供了类似table的布局技术，在处理复杂页面结合flex发挥更好的效果。

上一条：2020-01-01 购物车界面 PHP培训十期下一条：1月3日 学号：478291 PHP变量
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多