Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid-网格布局思路和基础知识总结
Blogger Information
Blog 4
fans 0
comment 1
visits 2310
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
Grid-网格布局思路和基础知识总结
Neo( -᷅_-᷄ )
Original
559 people have browsed it

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>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：不错, 今晚有实例, 好好学
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