掌握二维布局的终极解决方案
Grid 布局由两个主要部分组成：
display: grid 的元素.grid-basic {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}用于定义网格的列和行。
.container {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 100px 200px;
}fr 单位表示可用空间的一部分，是 Grid 布局中最常用的单位。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 比例 */
}用于重复创建相同大小的列或行。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 列，每列 1fr */
grid-template-rows: repeat(2, 100px); /* 2 行，每行 100px */
}用于设置最小值和最大值。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}.container {
display: grid;
gap: 20px; /* 行列间隙相同 */
row-gap: 10px; /* 行间隙 */
column-gap: 20px; /* 列间隙 */
}.grid-areas {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-rows: 100px 200px 100px;
gap: 10px;
}
.grid-areas .header {
grid-area: header;
}
.grid-areas .sidebar {
grid-area: sidebar;
}
.grid-areas .content {
grid-area: content;
}
.grid-areas .footer {
grid-area: footer;
}用于控制 Grid 项目的位置和大小。
.item {
grid-column: 1 / 3; /* 从第 1 列开始，到第 3 列结束 */
grid-row: 1 / 2; /* 从第 1 行开始，到第 2 行结束 */
}
/* 简写形式 */
.item {
grid-area: 1 / 1 / 2 / 3; /* 行开始 / 列开始 / 行结束 / 列结束 */
}.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}auto-fill - 尽可能多地创建列，即使是空的auto-fit - 只创建需要的列，空列会被压缩
.magazine-layout {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
gap: 20px;
height: 100vh;
}.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.dashboard-card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}.photo-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}
.photo-item:nth-child(3) {
grid-column: span 2;
grid-row: span 2;
}