为什么使用CSS Grid （css网格）

  • 在 web 设计的早期，构建页面布局的方式是使用 HTML 表格，通过把设计分割成表格的单元格来创建布局。这比后来的“CSS 定位”的优势在于，可以利用表格显示能力提供的对齐和全高度的列。最大的负面影响在于它将设计和 HTML 标记绑在一起，经常会造成可访问性的问题。为了将设计摆到表格中，内容被打散了。
  • 在转向 CSS 布局时，我们经常说 CSS 把内容标记与内容表现分离了。最终的目标是，我们可以创建一个语义和结构良好的文档，然后应用 CSS 来创建我们想要的布局。
  • 对于一个具有固定标记的 HTML 页面，却能用 CSS 来创建各种独特的设计。
  • CSS 网格布局没有表格布局的那种问题，网格结构是在 CSS 中而不是在 HTML 标记中定义的。如果我们需要添加一个元素，我们可以使用一些没有语义的标记。理论上，CSS网格可以帮助我们延续 CSS 的承诺 —— 标记与表现分离。

CSS Grid 主要内容

术语

  • 网格（Grid）
  • 网格线（Grid lines）
  • 网格轨道（Grid tracks）
  • 网格单元格（Grid cell）
  • 网格区域（Grid areas）
  • 网格间隙（Gutters）
  • 网格轴（Grid Axis）
  • 网格行（Grid row）
  • 网格列（Grid column）

数据类型

<flex>

属性：

  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid
  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end
  • grid-row
  • grid-column
  • grid-area
  • grid-row-gap
  • grid-column-gap
  • grid-gap

函数

  • repeat()
  • minmax()
  • fit-content()

grid-template-columns & grid-template-rows

  • grid-template-columns 基于 网格列 的维度，去定义网格线的名称和网格轨道的尺寸大小。
  • grid-template-rows 该属性是基于 网格行 的维度，去定义网格线的名称和网格轨道的尺寸大小。

值

  • none
    这个关键字表示不明确的网格。所有的列和其大小都将由grid-auto-columns 属性隐式的指定。
  • 长度
    非负值的长度大小。
  • 百分比
    非负值且相对于网格容器的 。 如果网格容器的尺寸大小依赖网格轨道的大小（比如 inline-grid ），则百分比值将被视为auto。
    为了遵守网格的百分比，网格轨道本身定义的大小，将自动被调整为相对网格容器大小，并且是以最小量将网格轨道调整到最终的大小。
  • 弹性系数
    非负值，用单位 fr 来定义网格轨道大小的弹性系数。 每个定义了 的网格轨道会按比例分配剩余的可用空间。当外层用一个 minmax() 表示时，它将是一个自动最小值(即 minmax(auto, ) ) .
  • max-content
    是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。
  • min-content
    是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。
  • minmax(min, max)
    是一个来定义大小范围的属性，大于等于min值，并且小于等于max值。如果max值小于min值，则该值会被视为min值。最大值可以设置为网格轨道系数值 ，但最小值则不行。
    Note: 该规范在将来可能会允许设置最小值为 flex ，也会调整网格轨道算法(track sizing algorithm) 计算出正确的大小。
  • auto
    如果该网格轨道为最大时，该属性等同于 ，为最小时，则等同于 。
    Note: 网格轨道大小为 auto (且只有为 auto ) 时，才可以被属性align-content 和 justify-content 拉伸 。
  • fit-content( [ | ] )
    相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算(即 minmax(auto, max-content))，除了网格轨道大小值是确定下来的，否则该值都大于 auto 的最小值。
  • repeat( [ | auto-fill | auto-fit ] , )
    表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复列的表达式。
    正式语法

grid-gap

该CSS属性设置间隙（沟行和列之间）。可以简写为gap: row-gap | column-gap

DEMO

html

    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
css

html,
body {
  background-color: lightcoral;
  margin: 10px;
}

.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: lightcoral;
}

.container > div:nth-child(1n) {
  background-color: lightgreen;
}

.container > div:nth-child(2n) {
  background-color: lightblue;
}

.container > div:nth-child(3n) {
  background-color: lightgoldenrodyellow;
}

.container > div:nth-child(4n) {
  background-color: lightslategray;
}

css

    .container {
        display: grid;
        grid-template-columns: 100px auto 100px;
        grid-template-rows: 50px 100px;
    }

css

    .container {
        display: grid;
        grid-template-columns: 100px auto 100px;
        grid-template-rows: 50px 100px;
        grid-gap: 10px;
    }


未完待续~~

版权声明：本文为guangzan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/guangzan/p/10544227.html