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

首页 > 博客列表 > CSS中grid网格布局示例(一)

博主信息

博文 19

粉丝 0

访问量 23231

专题推荐

更多>

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网格布局示例

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2021-11-04 09:20:30