网格布局(上)

Grid网格布局(上)

本次主要学习Grid网格布局,包括网格布局的基本概念,浏览器的兼容等。

2021-01-21侠课岛    初级拔高       

前端/前端/前端系列课程P2 14     0     1218

(九)Grid网格布局 (上)

1:基本概念 (Grid Layout)

  • 二维的基于网格的布局系统 (同时处理列和行)

  • 第一个专门为解决布局问题而生的CSS模块

  • Grid Container - Grid容器 (设置了 display: gird 的元素)

    .main {
      display: grid;
    }

  • Grid Item - Grid容器成员 (直接子元素)

    <div class="main">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div> 
  • Grid Line - Grid (行、列) 网格线

    • 垂直网格线 (column grid lines)
    • 水平网格线 (row grid lines)

  • Grid Track - 两个相邻网格线之间的空间

  • Grid Cell - 两个相邻的行和两个相邻的列网格线之间的空间, 基础单元

  • Grid Area - 四个网格线包围的总空间, 可以由任意数量的Grid Cell组成

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

14

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引

本文标签


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?