Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2019-12-30 CSS中Grid布局的属性实操 PHP培训十期
Blogger Information
Blog 12
fans 0
comment 0
visits 7912
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
2019-12-30 CSS中Grid布局的属性实操 PHP培训十期
ys899
Original
584 people have browsed it

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发挥更好的效果。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的不错... 如果你实在不想用markdown写作业, 或者觉得写作业是种负担, 可以在本地完成也可以, 线上学习全凭自觉.... 如果要提交作业, 就一定要严格按要求... 请理解与配合... 祝你学习快乐
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