微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 2019-12-30 CSS中Grid布局的属性实操 PHP培训十期
博主信息
博文 12
粉丝 0
评论 0
访问量 10274
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
2019-12-30 CSS中Grid布局的属性实操 PHP培训十期
ys899
原创
768人浏览过

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

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：完成的不错... 如果你实在不想用markdown写作业, 或者觉得写作业是种负担, 可以在本地完成也可以, 线上学习全凭自觉.... 如果要提交作业, 就一定要严格按要求... 请理解与配合... 祝你学习快乐
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录