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

父元素 网格容器(Grid Container) 属性

display

将元素定义为网格容器，并为其内容建立新的 网格格式上下文。

值：

• grid ：生成一个块级网格

• inline-grid ：生成一个内联网格

• subgrid ：如果你的网格容器本身是另一个网格的网格项（即嵌套网格），你可以使用这个属性来表示
  你希望它的行/列的大小继承自它的父级网格容器，而不是自己指定的。

如果你想要设置为网格容器元素本身已经是网格项（嵌套网格布局），用这个属性指明这个容器内部的网格项的行列尺寸直接继承其父级的网格容器属性。

CSS 代码:

1. .container {

2. display: grid | inline-grid | subgrid;

3. }

注意：在 网格容器(Grid Container) 上使用column，float，clear， vertical-align 不会产生任何效果。

回到目录

grid-template-columns / grid-template-rows

使用空格分隔的值列表，用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。

值：
– <track-size>： 可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）
– <line-name>：你可以选择的任意名称

CSS 代码:

1. .container {

2. grid-template-columns: <track-size> ... | <line-name> <track-size> ...;

3. grid-template-rows: <track-size> ... | <line-name> <track-size> ...;

4. }

示例：

当你在 网格轨道(Grid Track) 值之间留出空格时，网格线会自动分配数字名称：

CSS 代码:

1. .container{

2. grid-template-columns: 40px 50px auto 50px 40px;

3. grid-template-rows: 25% 100px auto;

4. }

但是你可以明确的指定网格线(Grid Line)名称，即 <line-name> 值。请注意网格线名称的括号语法：

CSS 代码:

1. .container {

2. grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];

3. grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];

4. }

请注意，一条网格线(Grid Line)可以有多个名称。例如，这里的第二条 行网格线(row grid lines) 将有两个名字：row1-end 和row2-start ：

CSS 代码:

1. .container{

2. grid-template-rows: [row1-start] 25% [row1-end row2-start] 25%

   • < 上一篇

     css中的margin属性详解

   • 下一篇 >

     CSS控制文字的换行与裁剪