grid布局的简要介绍(转载)

了解grid布局的相关属性介绍

不错鼓励并赞赏 标签: CSS      评论 / 2019-04-30


  • CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统。
  • 兼容性目前不是太友好
    1.png

  • 和felx类似,grid有容器项目
    • Grid容器 属性列表
      • Grid Container 的全部属性
      • display
      • grid-template-columns
      • grid-template-rows
      • grid-template-areas
      • grid-template
      • grid-column-gap
      • grid-row-gap
      • grid-gap
      • justify-items
      • align-items
      • justify-content
      • align-content
      • grid-auto-columns
      • grid-auto-rows
      • grid-auto-flow
      • grid
    • Grid项目 的全部属性
      • grid-column-start
      • grid-column-end
      • grid-row-start
      • grid-row-end
      • grid-column
      • grid-row
      • grid-area
      • justify-self
      • align-self

Hi 看这里!

大家好,我是PRO

我会陆续分享生活中的点点滴滴,当然不局限于技术。希望笔墨之中产生共鸣,每篇文章下面可以留言互动讨论。Tks bd!

博客分类

您可能感兴趣

作者推荐

呃,突然想说点啥

前端·博客

您的鼓励是我前进的动力---

使用微信扫描二维码完成支付