search

博客列表 >Grid-网格布局思路和基础知识总结

Grid-网格布局思路和基础知识总结

Neo( -᷅_-᷄ )
Neo( -᷅_-᷄ )原创
2020年04月14日 17:09:37558浏览

Grid 布局思路流程

  • 步骤 1：设置容器使用网格布局、填充方案和单元格
  • 步骤 2：设置单元格的数量、大小和命名
  • 步骤 3：将项目放入单元格
  • 步骤 4：设置项目对齐方式，调整间距

1.设置容器使用网格布局、填充方案和单元格

  • display: 设置容器使用网格布局的元素
  • grid-auto-flow: 设置项目在网格中自动填充方案(行优先/列优先)
  • grid-template-columns/rows:在容器中显式地划分行与列,生成指定数量的单元格来放置项目
  • grid-auto-rows/columns: 根据项目数量,在容器中隐式生成行与列来放置它们
  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 300px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     /* 设置自动填充方案行优先 */
  9.     grid-auto-flow: row;
  10.     /* 设置自动填充方案列优先 */
  11.     grid-auto-flow: column;
  12.     /* 生成显式的三行三列单元格 */
  13.     /* 生成三列，第一列100px，第二列50px，第三列100px */
  14.     grid-template-columns: 100px 50px 100px;
  15.     /* 生成三行，第一行100px，第二行100px*/
  16.     grid-template-rows: 100px 100px;
  17.     /* 对于放不下的项目，自动生成隐式单元格放置 */
  18.     grid-auto-columns: 150px;
  19.   }
  20.   .item {
  21.     background-color: turquoise;
  22.     font-size: 1.5rem;
  23.     border: 1px solid black;
  24.   }
  25. </style>

  • 行优先排列：

  • 列优先排列：

  • 设置隐式单元格大小：

2.设置单元格的数量、大小和命名

  • 固定宽度px: 固定大小
  • 百分比%: 以容器大小为依据来计算
  • 自动计算auto: 由浏览器决定长度
  • 单位fr: 将容器空间按比例分配给每一个单元格
  • 区间minmax(min,max): 设置单元格尺寸变化范围
  • 重复生成repeat(): 快速生成相同大小单元格的
  • 自动填充auto-fill: 单元格固定,但容器不确定时,可以让一行/列容纳尽可能多的项目
  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     /* 固定值 */
  9.     /* 生成三列，第一列100px，第二列100px，第三列100px */
  10.     grid-template-columns: 100px 100px 100px;
  11.     /* 生成三行，第一行100px，第二行100px*/
  12.     grid-template-rows: 100px 100px 100px;
  13.     /* 百分比 */
  14.     grid-template-columns: 20% 30% auto;
  15.     /* 按比例  专属单位：fr*/
  16.     grid-template-columns: 1fr 2fr 1fr;
  17.     grid-template-rows: 1fr 2fr 1fr;
  18.     /* 重复设置 */
  19.     grid-template-columns: repeat(3, 100px);
  20.     grid-template-rows: repeat(3, 1fr);
  21.     /* 按分组来设置：（50px-100px） */
  22.     grid-template-columns: repeat(2, 50px 100px);
  23.     /* 弹性设置 */
  24.     grid-template-columns: repeat(2, minmax(50px, 100px));
  25.     grid-template-rows: repeat(2, minmax(50px, 150px));
  26.     /* 自动填充 */
  27.     grid-template-columns: repeat(auto-fill, 100px);
  28.     grid-template-rows: repeat(auto-fill, 100px);
  29.   }
  30.   .item {
  31.     background-color: turquoise;
  32.     font-size: 1.5rem;
  33.     border: 1px solid black;
  34.   }
  35. </style>

  • 固定值：

  • 百分比：

  • 按比例

  • 重复设置：

  • 按分组设置

  • 弹性设置

  • 自动填充

3.将项目放入单元格

  • 默认从左上角开始,从左到右,从上到下,依次从 1 开始编号
  • 如果从右下角开始,由下向上,由右向左,依次由从-1 开始编号

  • 根据数字网格线,可以将项目放到网格线形成的封闭矩形区域中

  • 将第一个项目放入指定区域

  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     grid-template-columns: repeat(4, 1fr);
  9.     grid-template-rows: repeat(4, 1fr);
  10.   }
  11.   .item {
  12.     font-size: 1.5rem;
  13.     border: 1px solid black;
  14.   }
  15.   .item.item1 {
  16.     background-color: green;
  17.     /* 左上角 */
  18.     grid-row-start: 1;
  19.     grid-row-end: 3;
  20.     grid-column-start: 1;
  21.     grid-column-end: 3;
  22.     /* 右下角 */
  23.     grid-row-start: -1;
  24.     grid-row-end: -3;
  25.     grid-column-start: -1;
  26.     grid-column-end: -3;
  27.     /* 正中间 */
  28.     grid-row-start: 2;
  29.     grid-row-end: 4;
  30.     grid-column-start: 2;
  31.     grid-column-end: 4;
  32.   }
  33. </style>
  • 简写
  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     grid-template-columns: repeat(4, 1fr);
  9.     grid-template-rows: repeat(4, 1fr);
  10.   }
  11.   .item {
  12.     font-size: 1.5rem;
  13.     border: 1px solid black;
  14.   }
  15.   .item.item2 {
  16.     background-color: hotpink;
  17.     /* 起止 简化*/
  18.     grid-row-start: 1;
  19.     grid-row-end: 3;
  20.     grid-column-start: 1;
  21.     grid-column-end: 3;
  22.     grid-row: 1/3;
  23.     grid-column: 1/3;
  24.     /* 使用偏移量简化 */
  25.     grid-row-start: 1;
  26.     grid-row-end: span 3;
  27.     grid-column-start: 1;
  28.     grid-column-end: span 3;
  29.     grid-row: 1 / span 3;
  30.     grid-column: 1 / span 3;
  31.     /* 当前位置简化 */
  32.     grid-row-end: span 2;
  33.     grid-column-end: span 2;
  34.   }
  35. </style>
  • 使用命名网格线来划分单元格
  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     grid-template-columns: [a] 100px [b c] 100px [d e] 100px[f];
  9.     grid-template-rows: [a2]100px [b2 c2] 100px [d2 e2] 100px[f2];
  10.   }
  11.   .item {
  12.     font-size: 1.5rem;
  13.     border: 1px solid black;
  14.   }
  15.   .item.item1 {
  16.     background-color: hotpink;
  17.     /* 第二行第三列 */
  18.     /* 默认就是跨越一行一列，所以可以省略简写代码 */
  19.     /* grid-row-start: 2;
  20.         grid-row-end: 3;
  21.         grid-column-start: 3;
  22.         grid-column-end: 4; */
  23.     grid-row-start: b2;
  24.     grid-column-end: f;
  25.   }
  27.   .item.item2 {
  28.     background-color: green;
  29.     /* 占满第一行 */
  30.     /* grid-row: a2/b2;
  31.         grid-column: a/f; */
  32.     grid-column-end: span 3;
  33.   }
  34.   .item.item3 {
  35.     background-color: gray;
  36.     /* 占满第二行第三行和第一列第二列 */
  37.     grid-row-end: span 2;
  38.     grid-column-end: span 2;
  39.   }
  40.   .item.item4 {
  41.     background-color: yellow;
  42.   }
  43. </style>
  • 默认网格区域
  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     grid-template-columns: repeat(4, 1fr);
  9.     grid-template-rows: repeat(4, 1fr);
  10.   }
  11.   .item {
  12.     font-size: 1.5rem;
  13.     border: 1px solid black;
  14.   }
  15.   .item.item1 {
  16.     background-color: hotpink;
  17.     /* 占满第一行 */
  18.     /* 语法：grid-area：起始行/起始列/结束行/结束列 */
  19.     grid-area: 1/1/2/5;
  20.     /* 用偏移量简化 */
  21.     grid-area: 1 / 1 / span 1 / span 4;
  22.     /* 是从当前位置开始填充的简化 */
  23.     grid-area: span 1 / span 4;
  24.   }
  26.   .item.item2 {
  27.     background-color: green;
  28.     /* 占据左侧两行 */
  29.     grid-area: 2/1/4/2;
  30.     grid-area: span 2 / span 1;
  31.     /* 默认就是偏移一行一列 */
  32.     grid-area: span 2;
  33.   }
  34.   .item.item3 {
  35.     background-color: gray;
  36.   }
  37.   .item.item4 {
  38.     background-color: yellow;
  39.   }
  40.   .item.item5 {
  41.     background-color: red;
  42.   }
  43. </style>
  • 命名网格区域
  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     grid-template-columns: 80px 1fr 80px;
  9.     grid-template-rows: 40px 1fr 40px;
  10.     /* 设置命名网格区域  相同名称的命名区域会合并*/
  11.     grid-template-areas:
  12.       "header header header"
  13.       /* 占位符 */
  14.       ". . ."
  15.       "footer footer footer";
  16.   }
  17.   .item {
  18.     font-size: 1.5rem;
  19.     border: 1px solid black;
  20.   }
  21.   .item.item1 {
  22.     background-color: hotpink;
  23.     grid-area: header;
  24.     grid-area: span 1 / span 3;
  25.   }
  27.   .item.item2 {
  28.     background-color: green;
  29.     /* grid-area: left; */
  30.   }
  31.   .item.item3 {
  32.     background-color: gray;
  33.     /* grid-area: main; */
  34.   }
  35.   .item.item4 {
  36.     background-color: yellow;
  37.     /* grid-area: right; */
  38.   }
  39.   .item.item5 {
  40.     background-color: red;
  41.     grid-area: footer;
  42.   }
  43. </style>

4.设置项目对齐方式，调整间距

4.1 设置所有项目在容器中的对齐方式

  • justify-content: 设置所有项目在容器中水平方向的对齐方式
  • align-content: 设置所有项目在容器中垂直方向的对齐方式
  • place-content: 上面二个属性的简写, place-content: 垂直对齐方式 水平对齐方式
  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     grid-template-columns: repeat(3, 50px);
  9.     grid-template-rows: repeat(3, 50px);
  10.     justify-content: end;
  11.     align-content: center;
  12.     /* place-content: 垂直方向 水平方向; */
  13.     place-content: center end;
  14.   }
  15.   .item {
  16.     font-size: 1.5rem;
  17.     border: 1px solid black;
  18.   }
  19. </style>

4.2 设置所有项目在单元格或网格区域内的对齐方式

  • justify-items: 设置所有项目在单元格/网格区域中水平方向的对齐方式
  • align-items: 设置所有项目在单元格/网格区域中垂直方向的对齐方式
  • place-items: 上面二个属性的简写, place-items: 垂直对齐方式 水平对齐方式
  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     grid-template-columns: repeat(3, 1fr);
  9.     grid-template-rows: repeat(3, 1fr);
  10.     justify-items: start;
  11.     align-items: center;
  12.     place-items: center start;
  13.     place-items: center;
  14.   }
  16.   .item {
  17.     width: 50px;
  18.     height: 50px;
  19.     font-size: 1.5rem;
  20.     border: 1px solid black;
  21.     background-color: violet;
  22.   }
  23. </style>

4.3 设置某个项目在单元格或网格区域内的对齐方式

  • justify-self: 设置某个项目在单元格/网格区域中水平方向的对齐方式
  • align-self: 设置某个项目在单元格/网格区域中垂直方向的对齐方式
  • place-self: 上面二个属性的简写, place-self: 垂直对齐方式 水平对齐方式
  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     grid-template-columns: repeat(3, 1fr);
  9.     grid-template-rows: repeat(3, 1fr);
  10.   }
  12.   .item {
  13.     width: 50px;
  14.     height: 50px;
  15.     font-size: 1.5rem;
  16.     border: 1px solid black;
  17.     background-color: violet;
  18.   }
  19.   .item.item5 {
  20.     justify-self: center;
  21.     align-self: center;
  22.     place-self: center;
  23.   }
  24. </style>

4.4 设置容器中行与列之间的间距/间隙

  • column-gap: 列间距
  • row-gap: 行间距
  • gap: 行间距 列间距: 简写
  • gap: 值: 行与列相等,可只写一个值
  • demo14.html
  1. <style>
  2.   .container {
  3.     width: 400px;
  4.     height: 400px;
  5.     background-color: wheat;
  6.     /* 设置使用网格布局 */
  7.     display: grid;
  8.     grid-template-columns: repeat(3, 1fr);
  9.     grid-template-rows: repeat(3, 1fr);
  10.     column-gap: 5px;
  11.     row-gap: 5px;
  12.     gap: 15px 5px;
  13.     gap: 5px;
  14.   }
  16.   .item {
  17.     font-size: 1.5rem;
  18.     border: 1px solid black;
  19.     background-color: violet;
  20.   }
  21. </style>
上一条：grid布局及简写下一条：PhpStrom 安装PHPUnit-9单元测试
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多