热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

“grid”网格容器的常用属性分析及运用示例

一、“grid”网格容器的常用属性分析

一、“grid”网格容器的常用属性分析

1.作用于网格容器的常用属性























































属性描述
display定义一个网格容器grid
grid-template-columns定义网格容器的列数及列宽repeat(1, 100px)
grid-template-rows定义网格容器的行数及列高repeat(1, 100px)
grid-auto-flow定义网格容器内的排序规则row、column
grid-auto-rows定义隐性项目的行高100px
grid-auto-columns定义隐性项目的列宽100px
gap定义网格内项目的行、列间距10px
place-content定义网格在容器中的位置start、end、center、space-between(间距)、space-around(周围)、space-evenly(平均)
place-items定义项目在网格中的位置start、end、center

2.作用于容器中项目上的常用属性




















属性描述
place-self定义指定项目在网格单元中的位置start、end、center
grid-area定义项目的开始位置及区域1 / 1 / span 3 / span 3

一、“grid”网格容器的运用示例

1.效果截图


2.html部分代码

  1. class="main">
  2. class="item">1
  • class="item">2
  • class="item">3
  • class="item">4
  • class="item">5
  • class="item">6
  • class="item">7
  • class="item">8
  • class="item">9
  • class="item">10

  • 3.CSS部分代码


    推荐阅读
    author-avatar
    木目心磊_559
    这个家伙很懒,什么也没留下!
    Tags | 热门标签
    RankList | 热门文章
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有