网格布局属性详解

display: grid/inline-grid;完成 grid布局
display:grid和display:inline-grid的区别是：inline-grid容器外部盒子保持内联特性，因此可以和图片文字在同一行显示；grid容器保持块状特性，宽度默认为100%，不和内联元素在一行显示。

基本概念
网格：

行，列， 线段，单元格。

grid-template-columns grid-template-rows;

grid-template-columns 和 grid-template-rows 是用于定义 CSS Grid 布局的两个属性。它们分别用于指定网格容器的列和行的大小和结构。
grid-template-columns设置的列的宽度，单元格的宽度
grid-template-rows设置是行的高度，单元格的高度

支持的参数：
默认值：none

长度值

• px（像素）
• em（相对于当前字体尺寸的单位）
• rem（相对于根元素字体尺寸的单位）
• vw/vh（视口宽度/高度的百分比）
• %（百分比，相对于容器的大小）

分数单位

• fr（fraction，分数单位，代表可用空间的一部分）

关键词

• auto：自动计算每行或每列的大小。
• min-content：设置大小为内容的最小尺寸。
• max-content：设置大小为内容的最大尺寸。

函数

• repeat()：允许重复相同大小的行或列多次。
• minmax()：设置一个大小范围，语法是minmax(min, max)，其中min是最小值，max是最大值。
• fit-content()：限制网格轨道的尺寸，在给定的最大值和所需的最小值之间。

repeat();
预定义的尺寸或重复模式

• auto-fill：自动填充网格线，网格容器会根据列或行的尺寸重复创建尽可能多的轨道，并在容器内填满它们。
• auto-fit：与auto-fill类似，但任何未被内容占用的轨道将会被收缩并且不会占据空间。

repeat()函数只能作用在grid-template-columns和grid-template -rows这两个CSS属性上。

fit-content(limit)

fit-content(limit) = max(min-content, min(limit, max-content))

补充：

repeat()函数只能作用在grid-template-columns和grid-template -rows这两个CSS属性上。

补充：网格线命名

ele {
  grid-template-rows: [line-start] 100px [line-1] 200px [line-end]
}

grid-template-area grid-template

grid-template-areas

CSS Grid 布局中用于指定网格区域的属性。它允许你通过一个字符字符串来定义网格容器的布局，每个字符代表一个单元格，从而创建具有特定区域的网格结构。

若干行字符串表示单元格名称，例如

.ele {
  grid-template-areas: 
    "头部 头部 头部 头部 头部"
    "侧边栏 侧边栏 内容区 内容区 内容区"
    ". footer footer footer ."
}

单元格名称 汉字也可以 . 代表空的单元格

注意：每块区域保证是 矩形 L型， 凹凸型都是无效区域

配合着子项目中的 grid-area属性 使用

.ele {
  grid-template-areas: 
    "头部 头部 头部 头部 头部"
    "侧边栏 侧边栏 内容区 内容区 内容区"
    ". footer footer footer ."
}
.header {
  grid-area: 头部
}
.sidebar {
  grid-area: 侧边栏
}
.content {
  grid-area: 内容区
}
.footer {
  grid-area: footer
}

grid-template: 三个属性的简写

grid-template: 行 / 列

grid-template:

​ area1 行1

​ area2 行2 /

​ 列

包含（区域名称）的grid-template缩写属性是不支持repeat()函数的

grid-auto-columns和grid-auto-rows属性

显式网格：我们定义的网格

隐式网格：超出我们定义的网格的区域

grid-auto-columns和grid-auto-rows属性的作用是指定任何自动生成的网格（也称为隐式网格）的尺寸大小

<style>
  .grid {
    display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
}

</style>
<div class="grid">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
</div>

grid-auto-flow

用于指定在自动生成的网格项目放置到网格容器中时的放置顺序。

默认值： row: 表示没有指定位置的网格在水平（行）方向上自然排列；

column: 没有指定位置的网格在垂直（列）方向上自然排列

dense: 自然排列启用“密集”打包算法，也就是说，如果稍后出现的网格比较小，则尝试看看其前面有没有合适的地方放置该网格，使网格尽可能排列紧凑

grid

熟练使用grid缩写属性，是掌握网格布局的重要标志之一。

grid属性的缩写规则比较复杂。grid是这些CSS属性的缩写集合：grid-template- rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid- auto-columns和grid-auto-flow。

整体可以分为四大类：

grid: none;

grid: grid-template;

grid: / [ auto-flow && dense? ] ?

grid: [ auto-flow && dense? ] ? /

提一嘴 gap:

gap: 用来设置网格行与列之间的间隙

column-gap: 用来设置行元素之间的间隙

row-gap: 用来设置列元素之间的间隙

排列方式

1、justify-items

属性值	描述	图示
start	左对齐。
end	右对齐
center	居中对齐
stretch	拉伸，占满单元格的整个宽度。

2、align-items

属性值	描述	图示
start	上对齐。
end	下对齐
center	居中对齐
stretch	拉伸，占满单元格的整个宽度。
baseline	按照文字基线对齐	有文字按照文字对齐，没有的话按照元素底部对齐

• normal是默认值，会根据使用场景的不同表现为stretch或者start。
• 如果grid子项是具有内在尺寸或具有内在比例的元素，则此时normal的表现类似于start属性值的表现

place-items: ?

justify-content属性和align-content属性分别指定了网格元素整体水平方向和垂直方向上的分布对齐方式。

要想justify-content属性和align-content属性起作用，就需要让grid子项的总尺寸小于grid容器的尺寸。要么给gird子项设置较小的具体的尺寸值，要么让gird子项的尺寸是auto，同时保证内容尺寸较小

3、justify-content

属性值	图示	属性值	图示
start
space-around
end
space-between
center
space-evenly

4、 align-content

属性值	图示	属性值	图示
start
space-around
end
space-between
center
space-evenly

place-content: ?

grid项目区间范围设置属性

grid-column-start

grid-column-end

grid-row-start

grid-row-end

基本用法

.item-1 {
  grid-column-start: -2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: red;
}

表示区域，重点在于合围 四条线合围成一块区域，去找线对应的位置，表示就好了。

span 关键字

合并单元格 指定项目在网格中横向或纵向跨越的轨道数量

不建议grid-column-start和grid-column-end同时使用span 语法，因为完全没有必要，且grid-column-end设置的span 值不会产生任何效果

缩写

grid-row : start / end

grid-column: start / end

grid-area: r-start / c-start / r-end / c-end

grid子项对齐属性justify-self和align-self

.item {
  justify-self: auto | normal | stretch | start | end | center | baseline;
  align-self: auto | normal | stretch | start | end | center | baseline;
}

除了auto属性值，其他各个属性值的含义与justify-items和align-items属性中属性值的含义是一样的.

• auto是默认值，表示使用grid容器上设置的justify-items或align-items属性值。
• normal通常表现为stretch拉伸，如果是具有内在尺寸和原始比例的元素，则表现为start。
• stretch指grid子项拉伸。
• start指grid子项起始位置对齐。
• end指grid子项结束位置对齐。
• center指grid子项居中对齐。
• baseline指grid子项第一行文本基线对齐。