登录  /  注册
博主信息
博文 19
粉丝 0
评论 0
访问量 14145
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
演示Grid九大属性并详解用途.
期待.
原创
1458人浏览过

1.第一个属性:设置Grid容器

设置Grid容器

  • display: grid 是将当前块元素定义成Grid容器.我个人的理解是:设置Grid容器.

    2.设置网格单元

    设置网格单元
  • grid-template-rows是设置行数.
  • grid-template-grid-template-columns是设置列数.
  • repeat这个函数有两个参数:第一个是重复次数,第二个是重复的值.
  • 整套属性下来的意思是:设置三行三列宽度一样的网格单元.

    3.将项目放入指定网格单元

    将项目放入指定网格单元
  • grid-area是将项目放入指定的网格单元.它的参数为:行开始 / 列开始 / span 行结束 / span 列结束
  • span这个参数的意思是:指定跨越的行数或列数.
  • 列如图中,我要从第二行跨越到第三行,实则跨越一行,只需要写span 1即可.而列从第一列跨越到第四列,只需要写span 4即可.

    4.项目排列方式

    row方式排列
    column方式排列
  • grid-auto-flow 这个属性的意思是:设置项目的排列方式.
  • 如图,row参数是水平排列,column垂直排列.

    5.设置自动生成的项目(隐式网格)的行、列的宽高

    未设置自动生成的项目宽高
    已设置自动生成的项目宽高
  • grid-auto-rows这个属性是设置隐式网格的行宽高.
  • grid-auto-columns这个属性是设置隐式网格的列宽高.

    6.设置行、列的间隙

    设置行与列的间隙
  • gap这个属性有两个参数:第一个参数为设置行间隙,第二个参数为设置列间隙.

    7.设置所有项目在容器中的对齐

  • place-content这个属性有两个参数:第一个为垂直方向,第二个为水平方向.
  • 这个属性的参数较多:start、end、center、space-between、space-around
  • 需要注意的是,这个属性相对的是剩余空闲.我个人理解的是相当于Flex弹性盒子的把剩余空间在整个项目中进行分配.

    8.设置所有项目在网格单元中的对齐

  • place-items这个属性有两个参数:第一个为垂直方向,第二个为水平方向.
  • 这个属性的参数较多:start、end、center

    9.设置某个项目在网格单元中的对齐

  • place-self这个属性有两个参数:第一个为垂直方向,第二个为水平方向.
  • 这个属性的参数较多:start、end、center
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学