CSS grid布局相关笔记

深藏阁楼爱情的钟 2022-12-23 13:30 314阅读 0赞

优势之处

  1. 固定或者弹性的轨道尺寸

    • 无论在水平方向还是竖直方向都能够做到自适应

  2. 定位项目

    • 每一个组件都能作为一个项目被定位到相应的位置上面去
  3. 创建额外的轨道来保存内容

  4. 对齐控制

    • 和Flexbox相似

  5. 控制重叠内容

    • 可以像z-index一样控制重叠

Grid VS Flexbox

  • Flexbox是一维布局，只能在一条直线上放置内容区块，Grid是一个二维布局，根据设计需求将内容块放置到任何地方
  • Flexbox可以和Grid很好的配合使用，页面整体使用Grid布局，局部使用Flexbox。

兼容性

  • Grid布局兼容性

相关概念

  1. 网格容器（Grid Container）和网格项（Grid Item）

    • 网格容器-所有网格项的父元素。元素应用display:grid;


      One

      Two

      Three

      Four

      Five

      // css .container {
      display: grid;
      }

  2. 网格线（Grid Line）

    • 组成网格项的分界线。网格线是在定义网格容器的时候产生的，和网格项没有直接的关联，网格项是根据定义的网格线所组成的块状的网格单元来放置的。

  3. 网格轨道（Grid Track）

    • 两个相邻的网格线之间为网格轨道。

常用属性

CSS函数

网格项上的属性

资料来源：Grid布局基础

一个有趣的CSS Grid 小游戏

  • Grid Garden

相关学习推荐

  1. A Complete Guide to Grid
  2. 写给自己看的display: grid布局教程-张鑫旭

发表评论

表情：
评论列表 （有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css grid 布局

    [css grid][] CSS Grid 网格布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 F

    小鱼儿小鱼儿/ 0 赞/ 397 阅读

    相关 【CSS】css grid 布局

    css grid布局出来很久了，可以翻译成栅栏布局，或者网格布局，看到了一个很好的应用，所以写下此篇基础教程。 比如我们要达到下面这样一个效果要怎么做？ ![2018051

    快来打我*快来打我*/ 0 赞/ 547 阅读

    相关 css grid网格布局

    初次认识grid布局，看了官方的文档也很明了（[官方文档][Link 1]），然后通过自己的语言和理解，重新对他进行了总结。 > 摘要：网格布局是网站设计的基础，CSS网格模

    比眉伴天荒比眉伴天荒/ 0 赞/ 557 阅读