CSS中grid网格布局示例(一) - Web前端开发

Home > List of blog posts > CSS中grid网格布局示例(一)

Blogger Information

Blog 19

fans 0

comment 6

visits 19073

Special Recommendation

More>

Related recommendations

grid 容器属性说明

元素启用 grid 布局后,它的子元素都变更块级元素,每个子元素独占一行

grid 布局时几个名词概念

网格容器加了 display:grid 后,它就变成了网格容器
网格单元网格容器里面的网格区域
网格项目容器下的所有子元素
轨道网格项目排列在一行或一列内,这一行就叫行轨, 列就叫列轨
轨道间距轨道的间距不能用 margin 来控制,有专用的属性 gap 来控制
专用计量单位 fr 类似于伸缩因子

gap 与 fr 使用示例

属性	值	说明	示例
gap	px 或 em 或 rem	第一位表示水平,第二位表示列	gap:0.5em 1em 行列相同时可简写:gap:0.5em
fr	数值	可以理解成比例值	1fr 2fr 3fr

网格容器属性

属性	说明	示例
grid-template-columns	生成列数	grid-template-columns:10em 10em 10em
grid-template-rows	生成行数	grid-template-rows:auto auto auto

行列生成时参数示例

10em 10em 10em; 生成三列宽度都是 10em
1fr 1fr 1fr;按比例分 3 列并等宽,还会自动缩放
20% 60% 20%; 可以全是百分比
auto auto auto;可以全是自动
1fr 20%; fr 与%可共存,先分配%,剩下的分给 fr
fr 不要和 auto 同用
repeat(3,10em); 此函数表示生成 3 列宽为 10em,第二个参数可以是多参数,如:1,2em 10em;表示生成 3 组 2em 和 10em 的行或列
repeat(2,1fr) 2fr; 可以 fr 混写,
minmax()函数做为参数值来用,它有两个参数(最小和最大)
1fr minmax(20em,2fr) 2fr; 中间列的宽度最小是 20em,最大和右边的相同,总宽的 2/5

隐式轨道: 超出了网格单元数量的网格项目,它会以最小占距显示, 要和前面的项目显示效果一样, 要单独设宽高
设置方法:

grid-auto-columns:1em 列宽
grid-auto-rows:1em 行宽

在网格单元中,排列优先级是:先行,后列
也可单独设置: grid-auto-flow: ros;行优先或为 column 时列优先

网格区域合并,自定义在容器内显示位置

grid-area: 行起值 / 列起值 / 行结束值 / 列结束值
该属性可以将项目移动或合并到任意位置. 1. 值中只有 span
1.1 单值: 跨的行数 grid-area: span 2; 总为合并上下两行.
1.2 双值: 跨的行与列数,如果只想设置列数,就必须设置行数(auto) 2. 值中有 span 和编号
2.1 双值: 没有 span,默认跨 1 行 1 列, grid-area: 2 / 3 ;
2.2 三值: 省了列结束编号或跨的数量,此时前面的值可使用 auto
2.3 四值: 完整语法

网格合并效果示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid属性演示</title>
    <style>
      .content {
        height: 20rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 1em;
        background-color: lightskyblue;
      }
      .content div {
        border: 1px solid;
        background-color: sandybrown;
      }
      .content div:nth-of-type(1) {
        grid-column: 1 / span 2;  /*从第1列开始，并合两列*/
        grid-row: 2;   /*从第2行开始*/
      }
    </style>
  </head>
  <body>
    <h2>grid布局演示</h2>
    <div class="content">
      <div class="item1">item1</div>
      <div class="item2">item2</div>
      <div class="item3">item3</div>
      <div class="item4">item4</div>
      <div class="item5">item5</div>
      <div class="item6">item6</div>
    </div>
  </body>
</html>
html

grid网格布局示例

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

CSS中grid网格布局示例(一)

2021-11-04 09:20:30