grid布局点
grid
grid-template
grid-template-columns
grid-template-rows
grid-template-areas
repeat
fr
minmax
auto-fill
fit-content
grid
display: grid
grid-template
.grid-container {
display: grid;
// 设置为3行4列,三行的高度是40px 60px 90px
grid-template: 60px 60px 90px /auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
图示如下:
grid-template-rows
grid-template-rows网格布局中的行数及高度
.grid-container {
display: grid;
grid-template-rows: 60px 90px; //2行,高度是60px 90px
}
grid-template-columns
grid-template-columns
设置网格布局中的列数及宽度
.grid-container {
display: grid;
grid-template-columns: 40px 90px 60px auto;
}
默认值: | auto |
---|---|
继承: | no |
动画: | 支持。 阅读关于 animatable |
版本: | CSS 网格布局模块 Level 1 |
JavaScript 语法: | object.style.gridTemplateColumns=”50px 50px 50px” |
- 语法
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
值 | 描述 |
---|---|
none | 默认值,不指定列的大小。 |
auto | 列的大小由容器的大小和列中网格元素内容的大小决定。 |
max-content | 每列的大小设置为该列中最大网格元素的大小。 |
min-content | 每列的大小设置为该列中最小网格元素的大小。 |
length | 长度值,可以是 px 为单位的数值或百分比 %。 0 是默认值。 了解更多长度单位。 |
initial | 将此属性设置为默认值。 initial 阅读关于 initial |
inherit | 从父元素继承该属性。 阅读关于 inherit |
grid-template-areas
grid-template-areas属性用于设置网格布局
上级元素的grid-area 属性可以对网格元素进行命名。
下级元素可以通过容器的 grid-template-areas 属性来引用。
每行由单引号内 ‘ ‘ 定义,以空格分隔。
. 号表示没有名称的网格项。
默认值: | auto |
---|---|
继承: | no |
动画: | 支持。 阅读关于 animatable |
版本: | CSS 网格布局模块 Level 1 |
JavaScript 语法: | object.style.gridTemplateAreas=”. . . myArea myArea” |
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
如下
grid效果为5列,
其中可看到item1的div因为使用了myArea区域,占据2列,其宽度 = div的宽度*2 + grid的gap数值
repeat
fr
在 CSS Grid 网格布局中,引入了一种新的长度单位 fr(fraction)
。它表示 Grid 布局中中剩余空间(leftover space)的一部分(fraction)。
一般来说 1fr
的意思是“100%的剩余空间”, .25fr
意味着“25%的剩余空间”。当 fr数值总和
大于 1 的时候,则会按照计算比例来分配。
- 用法
- 均分剩余空间
首先我们先建立如下的网格布局
<div class="grid-container">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
</div>
然后将 ABCD 四块进行均分,我们可以用 grid-template-columns: repeat(4, 1fr)
这里的和 grid-template-columns: repeat(4, .25fr)
效果是一样的。.25
来自于 100%/4=25%
。
非常建议使用 fr>=1
的方式, 比如说 1fr 2fr
就比 .33fr .67fr
可读性更强。
实现效果如下:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 10px;
}
2. 和其他单位混合使用
在 grid 布局中,有时候我们需要固定某些列的长度,可以用以下方法,这里 A
和 D
都是固定的 50px
,C
是占总宽度的 40%
,剩余空间就可以分配给 B
。
这种情况,在设计响应式布局的时候非常有用。
.grid-container {
grid-template-columns: 50px 1fr 40% 50px;
column-gap: 10px;
}
好文章:grid
原文链接:https://juejin.cn/post/7341783797329526818 作者:我是大龄程序员