前端之Grid布局

网格

CSS网格是一个用于web的二维布局系统.
可以把内容按照行与列的格式进行排版.

网格布局

网格是由一系列水平及垂直的线构成的一种布局模式。
网格具有 列（column）与行（row），间隙(又叫"沟槽")（gutter）。

创建网格

选择一个容器,加上属性
display:grid;
就创建了一个只有一列的网格

网格添加列

1. 固定: 可以用px, 百分比,等任何单位.
2. 灵活网格: 使用fr(剩余空间)重复构建列

<style>
.container {
    display: grid;
    /* 均分三列 
    等价于  grid-template-columns: repeat(3, 1fr);*/
    grid-template-columns: 1fr 1fr 1fr;
}
</style>

1fr 的意思是“100%的剩余空间”.
repeat(3, 1fr) 重复三个1fr.

网格间隙 gap

<style>
.container {
    display: grid;
    /* 均分三列 */
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: 1fr 2fr 3fr;
	/* 间隙 */
    gap: 10px;
}
</style>

网格添加行属性

<style>

.container {
    /* width: 100vw;
    height: 100vh; */
    display: grid;
    /* 均分三列 */
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: 1fr 2fr 3fr;
    grid-template-rows: 1fr 2fr 3fr;
    gap: 10px;
}
</style>

显式网格与隐式网格的区别

1. 显式网格是我们用grid-template-columns 或 grid-template-rows 属性创建的.
2. 隐式网格则是当有内容被放到网格外时才会生成的。显式网格与隐式网格的关系与弹性盒子的main和cross轴的关系有些类似。隐式网格中生成的行/列大小是参数默认是auto，大小会根据放入的内容自动调整。也可以使用grid-auto-rows和grid-auto-columns属性手动设定隐式网格的大小。eg:

<style>
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    grid-gap: 20px;
}
</style>

minmax() 函数

尽可能多地放下这些二百像素的网格:

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

1. 设定为至少100像素, 尺寸保证能容纳所有内容:grid-auto-rows: minmax(100px, auto);

<style>
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 行高最小100px,不设上限 */
    grid-auto-rows: minmax(100px, auto);
    gap: 20px;
}
</style>

固定三列,每个网格的行高根据内容大小自动扩大.

变成:

自动使用多列填充

<style>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}
</style>

基于线的元素放置

在英文中，第一条列分隔线（即网格边缘线）在网格的最左边
grid-column-start (en-US):
grid-column-end (en-US)

最左边那条线是 1
最右边那条线是 n(列数) + 1 或 -1

而第一条行分隔线在网格的最上面。
grid-row-start (en-US):
grid-row-end (en-US)

grid-column CSS属性是 
grid-column-start (en-US) 和 grid-column-end (en-US) 
的简写属性，

<style>
/*占两列, 结尾线的编号是7*/
grid-column: span 2 / 7;


/*第一条线开头占两行*/
grid-row: 1 / span 2;

/* 从第二条线开始,到最后*/
grid-row: 2 / -1;
</style>

划分好区域:,grid内子元素的部分会按序对号入座:

<style>

/* 基于线布局  */

header {
    grid-column: 1 / 3;
    grid-row: 1;
}
/* 第二列 第二行 */
article {
    grid-column: 2;
    grid-row: 2;
}

aside {
    grid-column: 1;
    grid-row: 2;
}


footer {
    grid-column: 1 / 3;
    grid-row: 3;
}
</style>

ctrl+u查看原码, css样式表,不同方法会被注释;可以放到自己的编译器,进行修改.包含下面几种方式.

网页实例

grid-template-areas属性放置元素

<style>
/* 基于grid-template-areas属性布局
-------------------------------------------------- */

.container {
    display: grid;
    grid-template-areas: "header header" "sidebar content" "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px;
}

header {
    grid-area: header;
}

article {
    grid-area: content;
}

aside {
    grid-area: sidebar;
}

footer {
    grid-area: footer;
}
</style>

使用.符号，让一个格子留空

下一节: 前端之浮动布局