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

创建grid容器

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>创建grid容器</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 500px;
  11.         height: 500px;
  12.         /* 背景颜色 */
  13.         background-color: wheat;
  15.         /* 创建grid容器 */
  16.         display: grid;
  17.         /* 设置项目在网格中的填充方案, 默认行优先 */
  18.         grid-auto-flow: row;
  19.         /* grid-auto-flow: column; 这个是列优先*/
  20.         /* 显式地划分行与列, 三列二行 */
  22.         /* grid-template网格模板columns列  值 第一列 第二列 第三列*/
  23.         grid-template-columns: 100px 100px 100px;
  24.         /* grid-template网格模板rows行  值 第一行 第二行*/
  25.         grid-template-rows: 100px 100px 100px;
  26.         /* 对于放置不下的项目,会隐式生成单元格 */
  27.         grid-auto-rows: auto; /*默认*/
  28.         grid-auto-rows: 150px; /*自定义放不下的项目*/
  29.       }
  31.       .item {
  32.         /* 背景颜色 */
  33.         background-color: lightblue;
  34.         /* 文字2倍大 */
  35.         font-size: 2rem;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="container">
  41.       <div class="item item1">1</div>
  42.       <div class="item item2">2</div>
  43.       <div class="item item3">3</div>
  44.       <div class="item item4">4</div>
  45.       <div class="item item5">5</div>
  46.       <div class="item item6">6</div>
  47.       <div class="item item7">7</div>
  48.       <div class="item item7">8</div>
  49.       <div class="item item7">9</div>
  50.     </div>
  51.   </body>
  52. </html>

效果：

设置单元格的数量与大小

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置单元格的数量与大小</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  17.         /* 固定值 */
  18.         grid-template-columns: 100px 100px 100px;
  19.         grid-template-rows: 100px 100px 100px;
  21.         /* 百分比 */
  22.         grid-template-columns: 20% 30% auto;
  23.         grid-template-rows: 100px auto 100px;
  25.         /* 比例 */
  26.         grid-template-columns: 1fr 2fr 2fr;
  27.         grid-template-rows: 1fr auto 2fr;
  29.         /* 重复设置 */
  30.         grid-template-columns: repeat(3, 100px);
  31.         grid-template-rows: repeat(3, 100px);
  33.         /* 按分组来设置: (50px-100px) */
  34.         /* 50px 100px 50px 100px */
  35.         grid-template-columns: repeat(2, 50px 100px);
  37.         /* 弹性 */
  38.         grid-template-columns: repeat(2, minmax(50px, 100px));
  39.         grid-template-rows: repeat(3, minmax(150px, 1fr));
  41.         /* 自动填充 */
  42.         grid-template-columns: repeat(auto-fill, 120px);
  43.         grid-template-rows: repeat(auto-fill, 120px);
  44.       }
  46.       .item {
  47.         background-color: lightblue;
  48.         font-size: 2rem;
  49.       }
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <div class="container">
  54.       <div class="item item1">1</div>
  55.       <div class="item item2">2</div>
  56.       <div class="item item3">3</div>
  57.       <div class="item item4">4</div>
  58.       <div class="item item5">5</div>
  59.       <div class="item item6">6</div>
  60.       <div class="item item7">7</div>
  61.     </div>
  62.   </body>
  63. </html>

效果：

使用默认的网格线来划分单元格

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用默认的网格线来划分单元格</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(4, 1fr);
  17.         grid-template-rows: repeat(4, 1fr);
  18.       }
  20.       .item {
  21.         font-size: 2rem;
  22.       }
  23.       .item.item1 {
  24.         background-color: lightgreen;
  26.         grid-row-start: 1;
  27.         grid-row-end: 3;
  28.         grid-column-start: 1;
  29.         grid-column-end: 3;
  31.       }
  33.       /* 简写 */
  34.       .item.item2 {
  35.         background-color: lightpink;
  36.         /* grid-row-start: 1;
  37.         grid-row-end: 3;
  38.         grid-column-start: 3;
  39.         grid-column-end: 5; */
  41.         grid-row: 1 / 3;
  42.         grid-column: 3 / 5;
  43.       }
  45.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  46.       .item.item3 {
  47.         background-color: yellow;
  49.         grid-row: 3 / span 2;
  50.         grid-column: 1 / span 2;
  51.       }
  53.       .item.item4 {
  54.         background-color: lightgrey;
  55.         /* grid-row-start: 3; */
  56.         grid-row-end: span 2;
  57.         /* grid-column-start: 3; */
  58.         grid-column-end: span 2;
  59.       }
  60.     </style>
  61.   </head>
  62.   <body>
  63.     <div class="container">
  64.       <div class="item item1">1</div>
  65.       <div class="item item2">2</div>
  66.       <div class="item item3">3</div>
  67.       <div class="item item4">4</div>
  68.     </div>
  69.   </body>
  70. </html>

效果：

使用命名网格线来划分单元格

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用命名网格线来划分单元格</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
  17.         grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
  18.       }
  20.       .item {
  21.         font-size: 2rem;
  22.       }
  23.       .item.item1 {
  24.         background-color: lightgreen;
  25.         /* 默认就是跨越一行/一列,所以可以省略 */
  26.         grid-row-start: r2-start;
  27.         grid-row-start: r1-end;
  28.         grid-column-start: c3-start;
  29.       }
  31.       /* 简写 */
  32.       .item.item2 {
  33.         background-color: lightpink;
  34.         /* grid-row: r1-start / r2-start;
  35.         grid-column: c1-start / c3-end; */
  37.         grid-column-end: span 3;
  38.       }
  40.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  41.       .item.item3 {
  42.         background-color: yellow;
  43.         grid-row-end: span 2;
  44.         grid-column-end: span 2;
  45.       }
  47.       .item.item4 {
  48.         background-color: lightgrey;
  49.       }
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <div class="container">
  54.       <div class="item item1">1</div>
  55.       <div class="item item2">2</div>
  56.       <div class="item item3">3</div>
  57.       <div class="item item4">4</div>
  58.     </div>
  59.   </body>
  60. </html>

效果：

默认网格区域

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>默认网格区域</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(4, 1fr);
  17.         grid-template-rows: repeat(4, 1fr);
  18.       }
  20.       .item {
  21.         font-size: 2rem;
  22.       }
  23.       .item.item1 {
  24.         background-color: lightgreen;
  25.         /* grid-area: 1 / 1 / 2 / 5; */
  26.         /* 用偏移量进行简化 */
  27.         /* grid-area: 1 / 1 / span 1 / span 4; */
  28.         /* 是从当前位置开始的填充 */
  29.         grid-area: span 1 / span 4;
  30.       }
  32.       /* 简写 */
  33.       .item.item2 {
  34.         background-color: lightpink;
  36.         /* grid-area: 2 / 1 / 4 / 2; */
  37.         /* grid-area: span 2 / span 1; */
  38.         /* 默认就是偏移一行/一列 */
  39.         grid-area: span 2;
  40.       }
  42.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  43.       .item.item3 {
  44.         background-color: yellow;
  45.       }
  47.       .item.item4 {
  48.         background-color: lightgrey;
  49.         /* grid-area: row-start / col-start / row-end / col-end; */
  50.       }
  51.       .item.item5 {
  52.         background-color: violet;
  53.       }
  54.     </style>
  55.   </head>
  56.   <body>
  57.     <div class="container">
  58.       <div class="item item1">1</div>
  59.       <div class="item item2">2</div>
  60.       <div class="item item3">3</div>
  61.       <div class="item item4">4</div>
  62.       <div class="item item5">5</div>
  63.     </div>
  64.   </body>
  65. </html>

效果:

命名网格区域

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>命名网格区域</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: 80px 1fr 80px;
  17.         grid-template-rows: 40px 1fr 40px;
  19.         /* 设置命名网格区域, 相同名称的命名区域会合并 */
  20.         grid-template-areas:
  21.           "hello hello hello"
  22.           "left main right"
  23.           "footer footer footer";
  24.       }
  26.       .item {
  27.         font-size: 2rem;
  28.       }
  29.       .item.item1 {
  30.         background-color: lightgreen;
  31.         grid-area: hello;
  32.       }
  34.       /* 简写 */
  35.       .item.item2 {
  36.         background-color: lightpink;
  37.         grid-area: left;
  38.       }
  40.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  41.       .item.item3 {
  42.         background-color: yellow;
  43.         grid-area: main;
  44.       }
  46.       .item.item4 {
  47.         background-color: lightgrey;
  48.         grid-area: right;
  49.       }
  50.       .item.item5 {
  51.         background-color: violet;
  52.         grid-area: footer;
  53.       }
  54.     </style>
  55.   </head>
  56.   <body>
  57.     <div class="container">
  58.       <div class="item item1">1</div>
  59.       <div class="item item2">2</div>
  60.       <div class="item item3">3</div>
  61.       <div class="item item4">4</div>
  62.       <div class="item item5">5</div>
  63.     </div>
  64.   </body>
  65. </html>

效果:

网格区域线的默认名称

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>网格区域线的默认名称</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: 80px 1fr;
  17.         grid-template-rows: 40px 1fr 40px;
  19.         /* 设置命名网格区域, 相同名称的命名区域会合并 */
  20.         grid-template-areas:
  21.           "header header"
  22.           ". . "
  23.           "footer footer";
  24.       }
  26.       .item {
  27.         font-size: 2rem;
  28.       }
  29.       .item.item1 {
  30.         background-color: lightgreen;
  31.         grid-area: header-start / header-start / header-end / header-end;
  32.       }
  34.       /* 简写 */
  35.       .item.item2 {
  36.         background-color: lightpink;
  37.         /* 多余 */
  38.         /* grid-area: left; */
  39.       }
  41.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  42.       .item.item3 {
  43.         background-color: yellow;
  44.         /* grid-area: main; */
  45.       }
  47.       .item.item4 {
  48.         background-color: lightgrey;
  49.         grid-area: footer-start / footer-start / footer-end / footer-end;
  50.       }
  51.     </style>
  52.   </head>
  53.   <body>
  54.     <div class="container">
  55.       <div class="item item1">1</div>
  56.       <div class="item item2">2</div>
  57.       <div class="item item3">3</div>
  58.       <div class="item item4">4</div>
  59.     </div>
  60.   </body>
  61. </html>

效果:

设置单元格在容器中的对齐方式

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置单元格在容器中的对齐方式</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(3, 50px);
  17.         grid-template-rows: repeat(3, 50px);
  19.         justify-content: end;
  20.         align-content: end;
  22.         justify-content: center;
  23.         align-content: center;
  25.         justify-content: space-between;
  26.         justify-content: space-around;
  27.         justify-content: space-evenly;
  29.         align-content: space-between;
  30.         align-content: space-around;
  31.         align-content: space-evenly;
  33.         /* justify-content: stretch;
  34.         grid-template-columns: repeat(3, auto);
  35.         align-content: stretch;
  36.         grid-template-rows: repeat(3, 1fr); */
  38.         /* place-content: 垂直对齐 水平对齐; */
  39.         place-content: center start;
  40.         place-content: center center;
  41.         place-content: center;
  42.       }
  44.       .item {
  45.         background-color: violet;
  46.         font-size: 2rem;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <div class="container">
  52.       <div class="item item1">1</div>
  53.       <div class="item item2">2</div>
  54.       <div class="item item3">3</div>
  55.       <div class="item item4">4</div>
  56.       <div class="item item1">5</div>
  57.       <div class="item item2">6</div>
  58.       <div class="item item3">7</div>
  59.       <div class="item item4">8</div>
  60.       <div class="item item4">9</div>
  61.     </div>
  62.   </body>
  63. </html>

效果:

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

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置项目在单元格中的对齐方式</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(3, 1fr);
  17.         grid-template-rows: repeat(3, 1fr);
  19.         justify-items: stretch;
  20.         align-items: stretch;
  22.         justify-items: start;
  23.         align-items: center;
  25.         justify-items: center;
  26.         align-items: center;
  28.         /* place-items: 垂直  水平; */
  29.         place-items: start end;
  30.         place-items: center center;
  31.         place-items: center;
  32.       }
  34.       .item {
  35.         width: 50px;
  36.         height: 50px;
  37.         background-color: violet;
  38.         font-size: 2rem;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div class="container">
  44.       <div class="item item1">1</div>
  45.       <div class="item item2">2</div>
  46.       <div class="item item3">3</div>
  47.       <div class="item item4">4</div>
  48.       <div class="item item1">5</div>
  49.       <div class="item item2">6</div>
  50.       <div class="item item3">7</div>
  51.       <div class="item item4">8</div>
  52.       <div class="item item4">9</div>
  53.     </div>
  54.   </body>
  55. </html>

效果:

设置某个项目在单元格中的对齐方式

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置某个项目在单元格中的对齐方式</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(3, 1fr);
  17.         grid-template-rows: repeat(3, 1fr);
  19.         justify-items: stretch;
  20.         align-items: stretch;
  22.         justify-items: start;
  23.         align-items: center;
  25.         justify-items: center;
  26.         align-items: center;
  28.         /* place-items: 垂直  水平; */
  29.         place-items: start end;
  30.         place-items: center center;
  31.         place-items: center;
  32.       }
  34.       .item {
  35.         width: 50px;
  36.         height: 50px;
  37.         background-color: violet;
  38.         font-size: 2rem;
  39.       }
  41.       .item.item5 {
  42.         justify-self: end;
  43.         align-self: end;
  45.         place-self: center end;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <div class="container">
  51.       <div class="item item1">1</div>
  52.       <div class="item item2">2</div>
  53.       <div class="item item3">3</div>
  54.       <div class="item item4">4</div>
  55.       <div class="item item5">5</div>
  56.       <div class="item item6">6</div>
  57.       <div class="item item7">7</div>
  58.       <div class="item item8">8</div>
  59.       <div class="item item9">9</div>
  60.     </div>
  61.   </body>
  62. </html>

效果:

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

批改状态：不合格

老师批语：原因你应该知道
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系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+教程免费学
    微信扫码登录