网格grid布局 - 技术栈

grid布局点

grid
grid-template
grid-template-columns
grid-template-rows
grid-template-areas
repeat
fr
minmax
auto-fill
fit-content

grid

arduino 复制代码

display: grid

grid-template

所简写属性：grid-template-rows、grid-template-columns与grid-template-areas

css 复制代码

.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网格布局中的行数及高度

css 复制代码

.grid-container { 
    display: grid; 
    grid-template-rows: 60px 90px;  //2行，高度是60px 90px
}

grid-template-columns

grid-template-columns 设置网格布局中的列数及宽度

css 复制代码

.grid-container { 
    display: grid; 
    grid-template-columns: 40px  90px  60px auto; 
}

默认值:	auto
继承:	no
动画:	支持。阅读关于 animatable
版本:	CSS 网格布局模块 Level 1
JavaScript 语法:	object.style.gridTemplateColumns="50px 50px 50px"

语法

arduino 复制代码

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"

ini 复制代码

.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 的时候，则会按照计算比例来分配。

用法

均分剩余空间

首先我们先建立如下的网格布局

css 复制代码

<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 可读性更强。

实现效果如下：

css 复制代码

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
}

2. 和其他单位混合使用

在 grid 布局中，有时候我们需要固定某些列的长度，可以用以下方法，这里 A 和 D 都是固定的 50px，C 是占总宽度的 40%，剩余空间就可以分配给 B。

这种情况，在设计响应式布局的时候非常有用。

css 复制代码

.grid-container {
  grid-template-columns: 50px 1fr 40% 50px;
  column-gap: 10px;
}

好文章：grid