拥抱Grid网格布局基本概念之Grid容器

2020-07-17283次阅读csscss模块Grid网格布局

CSS Grid网格布局是为二维布局服务的(同时沿着横向和纵向),Flexbox弹性布局是为一维布局服务的(只能沿横向或纵向的)。

CSS Grid网格布局容器属性有:

  • display: grid|inline-grid(创建网格容器)
  • grid-template-columns(列)
  • grid-template-rows(行)
  • grid-template-areas(网格划分区域)
  • grid-template(grid-template-rows/grid-template-columns和grid-template-areas属性的缩写)
  • column-gap(列间距)
  • row-gap(行间距)
  • gap(行间距 列间距的简写)
  • justify-items(指定了网格元素的水平呈现方式)
  • align-items(网格元素的垂直呈现方式)
  • place-items(align-items和justify-items属性的简写)
  • justify-content(网格元素的水平分布方式)
  • align-content(网格元素的垂直分布方式)
  • place-content(align-content和justify-content属性的简写)
  • grid-auto-columns(自动生成的隐式网格轨道列)
  • grid-auto-rows(自动生成的隐式网格轨道行)
  • grid-auto-flow(明确指定位置的grid子项的放置方式)
  • grid(grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns和grid-auto-flow简写)

 

grid-template-columns和grid-template-rows

grid-template-columns和grid-template-rows是用来给网格划分列和行。

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

 

  • none:表示不明确的网格。所有的行和其大小都将由grid-template-columns|grid-auto-rows属性隐式的指定。、
  • track-size:可用长度值尺寸,百分比值,以及fr单位(网格剩余空间比例单位)。
  • line-name:可以任意命名。
.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

您可以选择显式命名行。请注意行名称的括号语法:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

一行也可以有多个名称。例如,此处第二行将具有两个名称:row1-end和row2-start:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果您的定义包含重复的部分,则可以使用repeat()符号简化内容:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

 

grid-template-areas

grid-template-areas就是给网格划分区域。使用网格元素上的grid-area属性指定的网格区域命名,来组合单元格或合并单元格。

grid-template-areas: <grid-area-name> | . | none
  • <grid-area-name>:对应网格区域的名称即网格元素上的grid-area属性值
  • .表示空的网格单元格。
  • none:没有定义网格区域。
.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: repeat(4,50px);
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

这将创建一个四列宽,三行高的网格。整个第一行将由标题区域组成。中间行将由两个主要区域组成,一个为空白单元格,另一个为侧边栏区域。最后一行都是页脚。

声明中的每一行都必须具有相同数量的单元格。

您可以使用任意数量的相邻点号来声明一个空单元格。只要点号之间没有空格,它们就代表一个单元格。

请注意,您并不是用这种语法命名行,而只是命名区域。使用此语法时,实际上会自动命名区域两端的行。如果网格区域的名称为foo,则该区域的起始行和起始列的名称将为foo- start,其最后一行和最后一列的名称将为foo- end。这意味着某些行可能具有多个名称,例如上例中的最左边的行,它将具有三个名称:header-start,main-start和footer-start。

 

grid-template

grid-template是grid-template-rows,grid-template-columns和grid-template-areas属性的缩写。

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}
  • none:将所有三个属性设置为其初始值
  • <grid-template-rows> / <grid-template-columns> –分别设置grid-template-columns和grid-template-rows为指定值,并设置grid-template-areas为none。

它还接受用于指定所有这三种的更复杂但非常方便的语法。这是一个例子:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}


等效于:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

由于grid-template不会重置一些隐式的grid属性(如grid-auto-columns,grid-auto-rows和grid-auto-flow),因此,大多数时候,还是推荐使用grid代替grid-template。

 

column-gap(grid-column-gap)、row-gap(grid-row-gap)

column-gap、row-gap指定网格中网格间隙的尺寸。您可以将其视为在列/行之间设置的宽度/高度。

.container {
  /* 标准 */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /* 老的写法 */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

推荐使用column-gap和row-gap属性。Chrome68+、Safari 11.2 Release 50+和Opera54+已经支持没有grid-前缀属性的column-gap和row-gap。

 

gap(grid-gap)

gap属性是column-gap和row-gap属性的缩写。

.container {
  /* 标准 */
  gap: <grid-row-gap> <grid-column-gap>;

   /* 老的写法 */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

如果未指定row-gap行间距,则将其设置为与column-gap列间距相同的值。

注意:grid-gap不推荐使用的,推荐使用gap。chrome68+、Safari 11.2 Release 50+和Opera 54+已经支持gap属性。

 

justify-items

justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐,语法如下:

  • stretch:填充单元格的整个宽度(这是默认设置)
  • start:将网格元素与单元格左侧对齐(假设文档流方向没有变)
  • end:将网格元素与单元格右侧对齐(假设文档流方向没有变)
  • center:将项目在其单元格水平居中对齐。

也可以通过该justify-self属性在单个网格项目上设置此行为。

 

align-items

align-items指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐,语法如下:

  • stretch:填充单元格的整个有高度(这是默认设置)
  • start:将网格元素与单元格上侧对齐(假设文档流方向没有变)
  • end:将网格元素与单元格下侧对齐(假设文档流方向没有变)
  • center:将项目在其单元格垂直居中对齐。

也可以通过该align-self属性在单个网格项目上设置此行为。

 

place-items

place-items是align-items和justify-items属性的简写。语法如下:

place-items: <align-items> <justify-items>?;

纵在前,横在后,如果省略第二个值,则将第一个值分配给两个属性。除Edge之外,所有主流浏览器均支持place-items属性。

justify-content

justify-content指定了网格元素的水平分布方式。此属性仅在网格总宽度小于grid容器宽度时候有效果。例如,我们网格设定的都是固定的宽度值,结果还有剩余空间。

  • stretch:宽度填满grid容器,拉伸效果需要网格元素尺寸设为auto时候才有效,如果定死了宽度,则无法拉伸。
  • start:与文档流方向相关。默认表现为左对齐。
  • end:与文档流方向相关。默认表现为右对齐。
  • center:表现为居中对齐。
  • space-between:表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。
  • space-around:每个grid子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。
  • space-evenly:也就是视觉上,每个grid子项两侧空白间距完全相等。

 

align-content

align-content可以看成和justify-content是相似且对立的属性,justify-content指明水平方向grid子项的分布方式,而align-content则是指明垂直方向每一行grid元素的分布方式。如果所有grid子项只有一行,则align-content属性是没有任何效果的。
同样拥有stretch、start、end、center、space-between、space-around、sapce-evenly属性值,方向为垂直方向。

 

place-content

place-content是align-content和justify-content属性的简写。
也是纵在前,横在后。如果省略第二个值,则将第一个值分配给两个属性。除Edge之外,所有主流浏览器均支持place-content属性。

 

grid-auto-columns和grid-auto-rows

指定任何自动生成的网格轨道(也称为隐式网格轨道)的大小。 当网格项目多于网格中的单元格或网格项目放置在显式网格之外时,将创建隐式轨道。

 

grid-auto-flow

grid-auto-flow属性控制没有明确指定位置的grid子项的放置方式。比方说定义了一个5*2的10格子,共有5个元素,其中2个元素指定了放在哪个格子里,还有3个则自生自灭排列。此时,这3个元素如何排列就是由grid-auto-flow属性控制的。
row:默认值。没有指定位置的网格依次水平排列优先。
column:没有指定位置的网格依次垂直排列优先。
dense:如果有设置,则表示自动排列启用“密集”打包算法。如果稍后出现的网格比较小,则尝试看看前面有没有合适的地方放置,使网格尽可能稠密紧凑。此属性值仅仅改变视觉顺序,会导致DOM属性和实际呈现顺序不符合,这对于可访问性是不友好的,建议谨慎使用。

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

您定义一个具有五列两行的网格,并将其设置grid-auto-flow为row(这也是默认值):

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}


将项目放置在网格上时,只需为其中两个指定点:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

因为设置grid-auto-flow为row,所以网格将如下所示。请注意,我们没有放置的三个项目(item-b,item-c和item-d)如何在可用行之间流动:

网格自动流设置为行的示例:如果改为设置grid-auto-flow为column,则item-b,item-c和item-d沿列向下流动:

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

grid

grid是下面所有这些CSS属性的缩写集合,grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns和grid-auto-flow。

  • none:将所有子属性设置为其初始值。
  • <grid-template>:与grid-template简写方式相同。
  • <grid-template-rows> / [auto-flow&&dense?] <grid-auto-columns>?–设置grid-template-rows为指定值。如果auto-flow关键字在斜杠的右侧,则将其设置grid-auto-flow为column。如果dense另外指定了关键字,则自动放置算法将使用“dense”打包算法。如果grid-auto-columns省略,则设置为auto。
  • [auto-flow&&dense?] <grid-auto-rows>?/ <grid-template-columns> -设置grid-template-columns为指定值。如果auto-flow关键字在斜杠的左侧,则将其设置grid-auto-flow为row。如果dense另外指定了关键字,则自动放置算法将使用“dense”打包算法。如果grid-auto-rows省略,则设置为auto。

以下两个代码块是等效的:

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

以下两个代码块是等效的:

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

以下两个代码块是等效的:

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

以下两个代码块是等效的:

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

它还接受一种更复杂但非常方便的语法,用于一次设置所有内容。您可以指定grid-template-areas,grid-template-rows并且grid-template-columns,和其他所有子属性都设置为它们的初始值。您正在执行的操作是在其各自的网格区域内指定行名称和轨道大小。用示例最容易描述:

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

等效于:

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

参考摘录与:

A Complete Guide to Grid

写给自己看的display: grid布局教程

CSS Grid Layout

 

上一篇: ::part()为Shadow DOM中具有匹配part属性的任何元素添加样式  下一篇: 拥抱Grid网格布局基本概念之Grid项目  

拥抱Grid网格布局基本概念之Grid容器相关文章