微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 圣怀布局,网格(容器,项目,单元,轨道,间距,排列,位置,对齐),隐式轨道,fr,repeat,minmax,命名式的网格,栅格布局组件
博主信息
博文 22
粉丝 0
评论 0
访问量 26720
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
圣怀布局,网格(容器,项目,单元,轨道,间距,排列,位置,对齐),隐式轨道,fr,repeat,minmax,命名式的网格,栅格布局组件
豌豆君
原创
885人浏览过

grid快速实现”圣怀布局 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>grid快速实现"圣怀布局"</title>
  8.     <style>
  9.         /* 圣怀布局：grid实现，二边固定，中间自适应，主体优先渲染 */
  10.         body * {
  11.             border: 1px solid #000;
  12.         }
  13.         body {
  14.             display: grid;
  15.             grid-template-columns: 15em minmax(50vw,auto) 15em;
  16.             grid-template-rows: 3em minmax(80vh,auto) 3em;
  17.             gap: 0.5em;
  18.         }
  19.         header,footer {
  20.             grid-area: span 1 / span 3;
  21.         }
  22.         main {
  23.             grid-area: 2 /2;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <!-- 圣怀布局要求主体区优先显示，根据浏览器渲染顺序，主体应该写到前面去。 -->
  29.     <header>header</header>
  31.     <!-- 主体main应该优先渲染 -->
  32.     <main>main</main>
  33.     <aside class="left">left</aside>
  34.     <aside class="right">right</aside>
  36.     <footer>footer</footer>
  37. </body>
  38. </html>

网格容器/网格项目/网格单元/网格轨道/轨道间距 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>网格容器/网格项目/网格单元/网格轨道/轨道间距</title>
  8.     <style>
  9.         /* 1.网格容器：由若干个矩形网格单元构成
  10.         2.网格项目：网格容器的子元素，必须放在网格单元中
  11.         3.网格单元：有"单元格"和"网格区域"二种表现形式
  12.         4.网格轨道：由多个网格单元组成，根据排列方向有"行轨"和"列轨"之分
  13.         5.轨道间距：容器中轨道之间的间距，有"行轨间距"和"列轨间距" */
  15.         /* 网格容器 */
  16.         .container {
  17.             border: 1px solid #000;
  18.             padding: 0.5em;
  19.             /* flex中子元素默认为行内(inline)元素，grid中子元素默认为块(block)元素 */
  20.             display: grid;
  22.             /* 1.设置轨道的列宽 */
  23.             /* 设置一个3列2行的布局空间 */
  24.             grid-template-columns: auto;
  25.             grid-template-columns: 10em 10em 10em;
  27.             /* 2.设置轨道的行高 */
  28.             grid-template-rows: auto;
  29.             grid-template-rows: 5em 5em;
  31.             /* 3.设置轨道的间距 */
  32.             /* gap: 水平 垂直 */
  33.             gap: 0.5em 1em;
  34.             gap: 0.5em 0.5em;
  35.             /* gap: 0.5em 0.5em;可简写gap: 0.5em; */
  36.             gap: 0.5em;
  37.         }
  38.         /* 网格项目：网格容器中的"子元素"（不能是孙元素），与flex是一样的 */
  39.         .container > .item {
  40.             /* 默认生成一列N行的容器（N就是项目的数量） */
  41.             background-color: lightgray;
  42.             border: 1px solid #000;
  43.             padding: 0.5em;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="container">
  49.         <span class="item">item1</span>
  50.         <span class="item">item2</span>
  51.         <span class="item">item3</span>
  52.         <span class="item">item4</span>
  53.         <span class="item">item5</span>
  54.         <span class="item">item6</span>
  55.     </div>
  56. </body>
  57. </html>

设置网格单元尺寸的新单位：fr 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>设置网格单元尺寸的新单位：fr</title>
  8.     <style>
  9.         /* 网格容器 */
  10.         .container {
  11.             border: 1px solid #000;
  12.             padding: 0.5em;
  13.             display: grid;
  15.             /* 一.设置轨道的列宽 */
  16.             grid-template-columns: 10em 10em 10em;
  17.             /* 设置轨道宽度时可以使用一个新的单位：fr(fraction),类似flex中的伸缩因子 */
  18.             grid-template-columns: auto auto auto;
  20.             /* 1. fr 与 auto 之间的区别 */
  21.             /* 新需求：中间一列的宽度是二边的二倍 */
  22.             /* 此时 auto 完全失灵 */
  23.             grid-template-columns: 1fr 2fr 1fr;
  25.             /* 2.fr 与 % 的区别 */
  26.             /* 新需求：中间一列是左右的三倍 */
  27.             /* % 不能识别轨道的间距所以用%时注意 */
  28.             /* % 与 fr 可以共存，计算方式，总宽度减去百分比的宽度，将剩下的全部分给fr */
  29.             /* auto, fr, % 都是相对单位，都可以触发自动计算机制，尽可能不要同时出现 */
  30.             grid-template-columns: 1fr 3fr 1fr;
  31.             grid-template-columns: 20% 60% 20%;
  32.             grid-template-columns: 20% 1fr 20%;
  34.             /* 3. fr 与其它单位混合，如 em, px  */
  35.             /* px 是固定的，em是固定， 计算时要减去这些固定值，将剩下的空间在fr之间分配 */
  36.             /* 总宽度 -8em - 200px, 将剩下的空间在第2列与第3列之间分配（但是自动计算的值可能会被最小值限制） */
  37.             grid-template-columns: 8em 1fr 2fr 200px;
  40.             /* 4. fr 尽可能不要与auto同时使用 */
  41.             /* auto 与 px , em ,会自动计算 */
  42.             /* 与 auto 相邻的不是em, rem, %, 而是fr 那auto会被压缩到内容区 */
  43.             grid-template-columns: 30% auto 10em;
  44.             grid-template-columns: 1fr auto 1fr;
  46.             /* 二.设置轨道的行高 */
  47.             grid-template-rows: 5em 5em;
  49.             /* 三.设置轨道的间距 */
  50.             gap: 0.5em;
  51.         }
  52.         /* 网格项目*/
  53.         .container > .item {
  54.             background-color: lightgray;
  55.             border: 1px solid #000;
  56.             padding: 0.5em;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <div class="container">
  62.         <span class="item">item1</span>
  63.         <span class="item">item2</span>
  64.         <span class="item">item3</span>
  65.         <span class="item">item4</span>
  66.         <span class="item">item5</span>
  67.         <span class="item">item6</span>
  68.     </div>
  69. </body>
  70. </html>

设置网格单元尺寸的常用函数：repeat(),minmax() 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>设置网格单元尺寸的常用函数：repeat(),minmax()</title>
  8.     <style>
  9.         /* 网格容器 */
  10.         .container {
  11.             border: 1px solid #000;
  12.             padding: 0.5em;
  13.             display: grid;
  15.             /* 一.设置轨道的列宽 */
  16.             grid-template-columns: 10em 10em 10em;
  17.             /* 1.repeat() */
  18.             /* 第二个参数可以是多个值用空格隔开 */
  19.             grid-template-columns: repeat(3,10em);
  20.             grid-template-columns: repeat(3,10em 2em);
  21.             grid-template-columns: repeat(3,1fr 2fr);
  22.             /* 展开 */
  23.             grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
  24.             /* 混合使用 */
  25.             grid-template-columns: repeat(2,1fr) 2fr;
  26.             /* 展开 */
  27.             grid-template-columns: 1fr 1fr 2fr;
  29.             /* 2.minmax() */
  30.             /* 中间列，最小宽度是20em，最大宽高是左右的2倍 */
  31.             grid-template-columns: 1fr minmax(20em,2fr) 1fr;
  32.             grid-template-columns: 20em minmax(20em,1fr);
  33.             grid-template-columns: 20em minmax(20em,auto);
  35.             /* 二.设置轨道的行高 */
  36.             grid-template-rows: 5em 5em;
  38.             /* 三.设置轨道的间距 */
  39.             gap: 0.5em;
  40.         }
  41.         /* 网格项目*/
  42.         .container > .item {
  43.             background-color: lightgray;
  44.             border: 1px solid #000;
  45.             padding: 0.5em;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class="container">
  51.         <span class="item">item1</span>
  52.         <span class="item">item2</span>
  53.         <span class="item">item3</span>
  54.         <span class="item">item4</span>
  55.         <span class="item">item5</span>
  56.         <span class="item">item6</span>
  57.     </div>
  58. </body>
  59. </html>

网格单的排列方式与隐式轨道 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>网格单的排列方式与隐式轨道</title>
  8.     <style>
  9.         /* 1.排列方式：grid-auto-flow
  10.         2.隐式轨道的行高：grid-auto-rows
  11.         3.隐式轨道的列宽：grid-auto-columns */
  13.         /* 网格容器 */
  14.         .container {
  15.             border: 1px solid #000;
  16.             padding: 0.5em;
  17.             display: grid;
  19.             /* 一.设置轨道的列宽 */
  20.             grid-template-columns: repeat(3,1fr);
  22.             /* 二.设置轨道的行高 */
  23.             grid-template-rows: 5em 5em;
  24.             /* 此时声明的网格单元数量已经不够存入所有的网格项目了 */
  25.             /* 此时，多出的三个项目会自动放入到自动生成的网格空间中了 */
  26.             /* 这时，原来声明的网格单元叫：显式轨道 
  27.             新项目显示的轨道称为：隐式轨道 */
  29.             /* 此时，默认项目在容器中按：先行后列的顺序排列，也叫"行优先" */
  30.             grid-auto-flow: row;
  31.             /* 自动生成的隐式轨道的高度是自动的 */
  32.             /* 行优先时要设置隐式轨道的行高 */
  33.             /* grid-auto-rows: 5em; */
  35.             /* 列优先 */
  36.             grid-auto-flow: column;
  37.             /* 列优先时要设置的隐式轨道的列宽 */
  38.             grid-auto-columns: 1fr;
  41.             /* 三.设置轨道的间距 */
  42.             gap: 0.5em;
  43.         }
  44.         /* 网格项目*/
  45.         .container > .item {
  46.             background-color: lightgray;
  47.             border: 1px solid #000;
  48.             padding: 0.5em;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <div class="container">
  54.         <span class="item">item1</span>
  55.         <span class="item">item2</span>
  56.         <span class="item">item3</span>
  57.         <span class="item">item4</span>
  58.         <span class="item">item5</span>
  59.         <span class="item">item6</span>
  60.         <span class="item">item7</span>
  61.         <span class="item">item8</span>
  62.         <span class="item">item9</span>
  63.     </div>
  64. </body>
  65. </html>

自定义项目在容器的显示位置 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>自定义项目在容器的显示位置</title>
  8.     <style>
  10.         /* 网格容器 */
  11.         .container {
  12.             border: 1px solid #000;
  13.             padding: 0.5em;
  14.             display: grid;
  16.             /* 一.设置轨道的列宽 */
  17.             grid-template-columns: repeat(3,1fr);
  19.             /* 二.设置轨道的行高 */
  20.             grid-template-rows: 5em 5em;
  21.             /* 行优先时要设置隐式轨道的行高 */
  22.             grid-auto-rows: 5em;
  24.             /* 三.设置轨道的间距 */
  25.             gap: 0.5em;
  26.         }
  28.         /* 网格项目*/
  29.         .container > .item {
  30.             background-color: lightgray;
  31.             border: 1px solid #000;
  32.             padding: 0.5em;
  33.         }
  35.         /* 编号从左上角开始（1，1），并递增 */
  36.         /* grid-area: 设置任何一个项目所在的网格单元的区域 */
  37.         /* grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号 */
  38.         /* 以第5个项目来举例 */
  39.         .container>.item:nth-of-type(5) {
  40.             background-color: lightyellow;
  41.             grid-area: 2/2 / 3/3;
  42.             /* 将它放入到第一个网格单元中 */
  43.             grid-area: 1/1 / 2/2;
  44.             /* 默认项目是跨越一行一列 */
  45.             grid-area: 1/1;
  46.             /* 但是，如果要跨越1行以上或1列以上，就不能省 */
  47.             /* 例如要跨2行3列 */
  48.             grid-area: 1/1 / 3/4;
  49.             /* 通常只关心跨几行或几列，并不关心结束的编号 */
  50.             grid-area: 1/1 / span 2/span 3;
  52.         }
  54.         /* 选中第一个项目 */
  55.         .container>.item:first-of-type {
  56.             background-color: limegreen;
  57.             grid-area: 3/1 / span 1/span 3;
  58.             /* 因为3/1是当前位置，所以可以省 */
  59.             grid-area: span 1/ span 3;
  60.             /* 之前说过，默认是跨一行一列 */
  61.             /* grid-area: span 3; 这样不行 */
  62.             grid-area: auto / span 3;
  64.         }
  66.         /* 总结：
  67.         grid-area: 参数数量不同，意义不同
  68.         1. 值中只有span
  69.             1.1 单值：跨的行数
  70.             1.2 双值：跨的行与列数，如果只想设置列数，就必须设置行数（auto）
  71.         2. 值中有span和编号
  72.             2.1 双值：没有span，默认跨1行1列，grid-area: 2/3;
  73.             2.2 三值：省了列结束编号或跨的数量，此时前面的值可使用auto
  74.             2.3 四值：最完整的语法 */
  75.     </style>
  76. </head>
  77. <body>
  78.     <div class="container">
  79.         <span class="item">item1</span>
  80.         <span class="item">item2</span>
  81.         <span class="item">item3</span>
  82.         <span class="item">item4</span>
  83.         <span class="item">item5</span>
  84.         <span class="item">item6</span>
  85.         <span class="item">item7</span>
  86.         <span class="item">item8</span>
  87.         <span class="item">item9</span>
  88.     </div>
  89. </body>
  90. </html>

项目在网格单元中的对齐方式 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>项目在网格单元中的对齐方式</title>
  8.     <style>
  10.         /* 1.place-items: 所有项目在网格单元中的对齐方式
  11.         2.place-self: 某一个项目在网格单元中的对齐方式 */
  13.         .container {
  14.             border: 1px solid #000;
  15.             padding: 0.5em;
  16.             display: grid;
  17.             grid-template-columns: repeat(3,1fr);
  18.             grid-template-rows: repeat(2,5em);
  19.             grid-auto-rows: 5em; 
  20.             gap: 0.5em;
  21.         }
  23.         .container > .item {
  24.             background-color: lightcyan;
  25.             border: 1px solid #000;
  26.             padding: 0.5em;
  27.         }
  29.         /* 默认：项目在网格单元中是拉伸的 */
  30.         /* 只有项目在网格单元中存在剩余空间的时候，对齐才有必要且有意义 */
  31.         .container>.item {
  32.             width: 5em;
  33.             height: 2em;
  34.         }
  36.         /* 1.设置容器中的“所有项目”在网格单元中的对齐方式 */
  37.         .container {
  38.             /* place-items: 垂直方向 水平方向; */
  39.             /* 垂直居上，水平居中 */
  40.             place-items: start center;
  41.             /* 垂直居中，水平居中 */
  42.             place-items: center center;
  43.             /* 当第二个值与第一个值相同时，可以省第二个值 */
  44.             place-items: center;
  46.             /* normal */
  47.             place-items: normal center;
  48.             /* normal当成auto的同义词 */
  49.             place-items: auto center;
  51.             /* place-items: inherit;
  52.             place-items: initial;
  53.             place-items: unset; */
  55.             /* 拉伸，取消项目的固定尺寸才可以看到效果 */
  56.             /* place-items: stretch; */
  57.         }
  59.         /* 2.设置容器中的“某一个项目”在网格单元中的对齐方式 */
  60.         /* 这个属性必须用在项目上：place-self */
  61.         .container>.item:nth-of-type(5) {
  62.             background-color: yellow;
  63.             place-self: center center;
  64.             place-self: end start;
  65.             /* 省去第二个start */
  66.             place-self: end;
  67.             /* 与下面的等效 */
  68.             place-self: end end;
  69.         }
  71.         /* 网格单元有二种表现形式：单元格，网格区域（多个单元格组成） */
  72.         .container>.item:nth-of-type(5) {
  73.             grid-area: span 2/ span 2;
  74.             place-self: center;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <div class="container">
  80.         <span class="item">item1</span>
  81.         <span class="item">item2</span>
  82.         <span class="item">item3</span>
  83.         <span class="item">item4</span>
  84.         <span class="item">item5</span>
  85.         <span class="item">item6</span>
  86.         <span class="item">item7</span>
  87.         <span class="item">item8</span>
  88.         <span class="item">item9</span>
  89.     </div>
  90. </body>
  91. </html>

项目在网格容器中的对齐方式 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>项目在网格容器中的对齐方式</title>
  8.     <style>
  9.         /* place-content: 垂直方向 水平方向*/
  11.         .container {
  12.             height: 25em;
  13.             border: 1px solid #000;
  14.             padding: 0.5em;
  15.             display: grid;
  16.             /* 只有所有项目在容器中存在剩余空间时对齐才有必要且有意义 */
  17.             grid-template-columns: repeat(3,10em);
  18.             grid-template-rows: repeat(2,5em);
  19.             grid-auto-rows: 5em; 
  20.             gap: 0.5em;
  21.             /* 默认值 */
  22.             /* 1.将所有项目做为一个整体在容器中对齐 */
  23.             place-content: start start;
  24.             place-content: start center;
  25.             place-content: center center;
  26.             place-content: center;
  27.             /* 2.将所有项目打散成独立个体在容器中设置对齐方式 */
  28.             /* 二端对齐 */
  29.             place-content: space-between space-between;
  30.             place-content: space-between;
  32.             place-content: space-around space-evenly;
  34.         }
  36.         .container > .item {
  37.             background-color: lightcyan;
  38.             border: 1px solid #000;
  39.             padding: 0.5em;
  40.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="container">
  47.         <span class="item">item1</span>
  48.         <span class="item">item2</span>
  49.         <span class="item">item3</span>
  50.         <span class="item">item4</span>
  51.         <span class="item">item5</span>
  52.         <span class="item">item6</span>
  53.         <span class="item">item7</span>
  54.         <span class="item">item8</span>
  55.         <span class="item">item9</span>
  56.     </div>
  57. </body>
  58. </html>

使用命名式的网格区域来重构圣怀布局 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用命名式的网格区域来重构圣怀布局</title>
  8.     <style>
  9.         /* 圣怀布局：grid实现，二边固定，中间自适应，主体优先渲染 */
  10.         body * {
  11.             border: 1px solid #000;
  12.         }
  13.         body {
  14.             display: grid;
  15.             grid-template-columns: 15em minmax(50vw,auto) 15em;
  16.             grid-template-rows: 3em minmax(80vh,auto) 3em;
  17.             gap: 0.5em;
  19.             /* 设置命名网格区域在轨道中的显示的位置 */
  20.             /* grid-template-areas: 
  21.             'header header header'
  22.             'left main right'
  23.             'footer footer footer'; */
  24.             grid-template-areas: 
  25.             'header header header'
  26.             '. main .'
  27.             'footer footer footer';
  28.         }
  30.         /* header,footer {
  31.             grid-area: span 1 / span 3;
  32.         }
  33.         main {
  34.             grid-area: 2 /2;
  35.         } */
  37.         header {
  38.             grid-area: header;
  39.         }
  40.         footer {
  41.             grid-area: footer;
  42.         }
  43.         main {
  44.             grid-area: main;
  45.         }
  46.         /* aside.left {
  47.             grid-area: left;
  48.         }
  49.         aside.left {
  50.             grid-area: left;
  51.         } */
  52.     </style>
  53. </head>
  54. <body>
  55.     <!-- 圣怀布局要求主体区优先显示，根据浏览器渲染顺序，主体应该写到前面去。 -->
  56.     <header>header</header>
  58.     <!-- 主体main应该优先渲染 -->
  59.     <main>main</main>
  60.     <aside class="left">left</aside>
  61.     <aside class="right">right</aside>
  63.     <footer>footer</footer>
  64. </body>
  65. </html>

模拟bootstrap/layui的12列栅格布局组件 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>模拟bootstrap/layui的12列栅格布局组件</title>
  8.     <link rel="stylesheet" href="grid.css">
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <!-- 一等份 -->
  13.         <!-- 栅格布局分为二步：
  14.         1.先创建一个行
  15.         2.在行中进行列的划分 -->
  17.         <div class="row">
  18.             <span class="item col-12">12列</span>
  19.         </div>
  21.         <!-- 二等分 -->
  22.         <div class="row">
  23.             <span class="item col-6">6列</span>
  24.             <span class="item col-6">6列</span>
  25.         </div>
  27.         <!-- 三等分 -->
  28.         <div class="row">
  29.             <span class="item col-4">4列</span>
  30.             <span class="item col-4">4列</span>
  31.             <span class="item col-4">4列</span>
  32.         </div>
  34.         <!-- 不充分 -->
  35.         <div class="row">
  36.             <span class="item col-3">3列</span>
  37.             <span class="item col-3">3列</span>
  38.             <span class="item col-3">3列</span>
  39.         </div>
  41.         <!-- 十二等分 -->
  42.         <div class="row">
  43.             <span class="item col-1">1列</span>
  44.             <span class="item col-1">1列</span>
  45.             <span class="item col-1">1列</span>
  46.             <span class="item col-1">1列</span>
  47.             <span class="item col-1">1列</span>
  48.             <span class="item col-1">1列</span>
  49.             <span class="item col-1">1列</span>
  50.             <span class="item col-1">1列</span>
  51.             <span class="item col-1">1列</span>
  52.             <span class="item col-1">1列</span>
  53.             <span class="item col-1">1列</span>
  54.             <span class="item col-1">1列</span>
  55.         </div>
  56.         <!-- 左中右三列，左右相同，中间不同 -->
  58.         <div class="row">
  59.             <span class="item col-3">3列</span>
  60.             <span class="item col-6">6列</span>
  61.             <span class="item col-3">3列</span>
  62.         </div>
  64.     </div>
  65. </body>
  66. </html>

使用封装好的grid布局组件来写一个案例 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用封装好的grid布局组件来写一个案例</title>
  8.     <link rel="stylesheet" href="grid.css">
  9.     <style>
  10.         .row:nth-of-type(2){
  11.             height: 80vh;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 通用三列布局 -->
  17.     <div class="container">
  18.         <!-- 页眉 -->
  19.         <div class="row">
  20.             <div class="item col-12 header">header</div>
  21.         </div>
  22.         <!-- 主体 -->
  23.         <div class="row">
  24.             <div class="item col-2 header">left</div>
  25.             <div class="item col-8 header">main</div>
  26.             <div class="item col-2 header">right</div>
  27.         </div>
  28.         <!-- 页脚 -->
  29.         <div class="row">
  30.             <div class="item col-12 header">footer</div>
  31.         </div>
  32.     </div>
  33. </body>
  34. </html>

模拟bootstrap/layui的12列栅格布局组件 css

  1. /* 初始化 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. body {
  9.     width: 100vw;
  10.     height: 100vh;
  11.     display: grid;
  12.     place-content: center;
  13. }
  15. .container {
  16.     min-width: 80vw;
  17.     display:  grid;
  18.     gap: 0.5em;
  19. }
  21. .container > .row {
  22.     display: grid;
  23.     grid-template-columns: repeat(12,1fr);
  24.     min-height: 3em;
  25.     gap: 0.5em;
  26. }
  28. .container > .row >.item{
  29.     padding: 1em;
  30.     text-align: center;
  31.     /* background-color: lightcyan; */
  32.     border: 1px solid;
  33.     /* border-radius: 5px; */
  34. }
  36. .col-12 {
  37.     grid-area: auto / span 12;
  38. }
  39. .col-11 {
  40.     grid-area: auto / span 11;
  41. }
  42. .col-10 {
  43.     grid-area: auto / span 10;
  44. }
  45. .col-9 {
  46.     grid-area: auto / span 9;
  47. }
  48. .col-8 {
  49.     grid-area: auto / span 8;
  50. }
  51. .col-7 {
  52.     grid-area: auto / span 7;
  53. }
  54. .col-6 {
  55.     grid-area: auto / span 6;
  56. }
  57. .col-5 {
  58.     grid-area: auto / span 5;
  59. }
  60. .col-4 {
  61.     grid-area: auto / span 4;
  62. }
  63. .col-3 {
  64.     grid-area: auto / span 3;
  65. }
  66. .col-2 {
  67.     grid-area: auto / span 2;
  68. }
  69. .col-1 {
  70.     grid-area: auto / span 1;
  71. }

总结：

圣怀布局：

grid实现，二边固定，中间自适应，主体优先渲染

网格容器：

由若干个矩形网格单元构成

网格项目：

网格容器的子元素，必须放在网格单元中

网格单元：

有”单元格”和”网格区域”二种表现形式

网格轨道：

由多个网格单元组成，根据排列方向有”行轨”和”列轨”之分

轨道间距：

容器中轨道之间的间距，有”行轨间距”和”列轨间距”

fr:

网格的伸缩因子

repeat：

文本重写的函数（以空格分隔）

minmax：

最小到最大区间的函数

轨道排列方式：”行优先” 和 “列优先”

grid-auto-flow: row;
grid-auto-flow: column;

隐式轨道： 新项目显示的轨道

隐式轨道的行高：grid-auto-rows
隐式轨道的列宽：grid-auto-columns

grid-area: 设置任何一个项目所在的网格单元的区域

格式” grid-area:行起始编号 / 列起始编号 / 行结束编号 / 列结束编;”

place-items: 所有项目在网格单元中的对齐方式

格式”place-items: center center; “

place-self: 某一个项目在网格单元中的对齐方式

格式”place-self: center center; “

place-content: 项目在网格容器中的对齐方式（垂直方向 水平方向）

格式”place-content: 垂直方向 水平方向”
将所有项目做为一个整体在容器中对齐：place-content: center center;
将所有项目打散成独立个体在容器中设置对齐方式：place-content: space-around space-evenly;

命名式的网格区域：

使用grid-area关联(header { grid-area: header; }) 再使用grid-template-areas来分配( grid-template-areas: ‘header header header’ ‘. main .’ ‘footer footer footer’;)

布局组件:

通过css，元素之间的独立性和class唯一性，预先定义css样式; 元素通过class来引用css中的样式

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

批改状态：合格

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