您的位置: 首页  >  IT文章  >  CSS Grid布局实践

CSS Grid布局实践

分类: IT文章 • 2022-08-30 19:53:00

原文阅读地址

本文转载自 http://blog.jirengu.com/?p=990

一 Grid布局是什么？

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。

二 重要术语

Grid Container

Grid Container 是布局容器，设置了 display: gird ，这是所有 grid item 的直接父项。 在下面的例子中，.container 就是是 grid container。

    <div class="container">
      <div class="item item-1">item1</div>
      <div class="item item-2">item2</div>
      <div class="item item-3">item3</div>
    </div>

Grid Item

Grid 容器的孩子（直接子元素）下面的 .item 元素就是 grid item，但 .sub-item不是。

    <div class="container">
      <div class="item item-1">item1</div>
      <div class="item item-2">item2</div>
         <p class="sub-item">sub-item</p>
      <div class="item item-3">item3</div>
    </div>

Grid Line

这个分界线组成网格结构。它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一侧。 下面例中的黄线就是一个列网格线。

CSS Grid布局实践

Grid Track

两个相邻网格线之间的空间。 你可以把它们想象成网格的列或行。 下面是第二行和第三行网格线之间的网格轨道。

CSS Grid布局实践

Grid Cell

两个相邻的行和两个相邻的列网格线之间的空间。它是网格的一个“单元”。 下面是行网格线1和2之间以及列网格线2和3的网格单元。

CSS Grid布局实践

Grid Area

四个网格线包围的总空间。 网格区域可以由任意数量的网格单元组成。 下面是行网格线1和3以及列网格线1和3之间的网格区域。

CSS 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 Items 的全部属性
  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column
  • grid-row
  • grid-area
  • justify-self
  • align-self

详细属性介绍及效果展示请查看原文链接

相关推荐