css grid 栅格布局
2023-10-12 本文已影响0人
暴躁程序员
一、常用单位和值
{
grid-template-columns: auto auto; /* 2列 自动填满、等比分配空间 */
grid-template-columns: 100px 100px; /* 2列 固定单位 */
grid-template-columns: 20% 20%; /* 2列 自动填充、百分比分配空间 */
grid-template-columns: 1fr 2fr; /* 2列 自动填充、按比分配空间 */
grid-template-columns: repeat(2,200px); /* 2列 每列等宽 */
grid-template-columns: repeat(auto-fill,200px); /* 2列 行填满 列数+1 */
grid-template-columns: 200px minmax(100px, 1fr); /* 2列 列宽极值，display: grid; 最大值生效，display: inline-grid; 最小值生效*/
}
二、常用属性：网格容器、列、行、间距
- 网格容器
{
display: grid; /* 块级容器 宽度拉满*/
display: inline-grid; /* 行内容器 */
}
- 列
{
grid-auto-columns: 50px; /* 设置默认列宽 */
grid-template-columns: 100px 1fr 2fr; /* 设置列数、列宽 */
}
- 行
{
grid-auto-rows: 100px; /* 设置默认行高 */
grid-template-rows: 50px auto; /* 设置行高 */
}
- 间距
{
column-gap: 10px; /* 列间距 */
row-gap: 10px; /* 行间距 */
gap: 20px 20px; /* 行、列间距 */
}
三、对齐方式
- 在网格容器中定义 对齐方式
/* 定义单元格在容器中的对齐方式，值：start、cente、end、stretch、space-around、space-between、space-evenly */
{
justify-content: center; /* 定义单元格在容器中的 水平 对齐方式 */
align-content: center; /* 定义单元格在容器中的 垂直 对齐方式 */
place-content: center center; /* 合并 justify-content 和 align-content */
}
/* 定义单元格内元素的对齐方式，变成行内元素，值：start、center、end、stretch */
{
justify-items: center; /* 定义单元格内元素的 水平 对齐方式 */
align-items: center; /* 定义单元格内元素的 垂直 对齐方式 */
place-items: center center; /* 合并 justify-items 和 align-items */
}
- 在网格容器的子项目中定义 当前子项目的对齐方式
/* 覆盖网格容器中的 justify-items、align-items、place-items 属性，值：start、center、end、stretch 默认 */
{
justify-self: center; /* 定义单元格内元素的 水平 对齐方式 */
align-self: center; /* 定义单元格内元素的 垂直 对齐方式 */
place-self: center; /* 合并 justify-self 和 align-self */
}
四、网格合并拆分
- 在网格容器中通过
grid-template-areas定义网格行列布局
{
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 九行 */
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 九列 */
grid-template-areas: /* 九行九列布局 */
"header header header header header header header header header"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide footer footer footer footer footer footer footer footer"
}
- 在网格容器的子项目中通过
grid-area指定子项目在容器中的网格位置
{
grid-area: header;
}
- 示例：九行九列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>栅格布局合并单元格</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.grid-container {
display: grid;
height: 100%;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"header header header header header header header header header"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide main main main main main main main main"
"slide footer footer footer footer footer footer footer footer"
}
.grid-item:nth-child(1) {
grid-area: header;
background: yellow;
}
.grid-item:nth-child(2) {
grid-area: slide;
background: yellowgreen;
}
.grid-item:nth-child(3) {
grid-area: main;
background: pink;
}
.grid-item:nth-child(4) {
grid-area: footer;
background: blueviolet;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">header</div>
<div class="grid-item">slide</div>
<div class="grid-item">main</div>
<div class="grid-item">footer</div>
</div>
</body>
</html>
