css删格布局尺寸 |鼠标样式变成手css

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

上述代码中的 .container 代表着包含着页面内容的容器。使用 display: grid 将其设置为删格布局。grid-template-columns 和 grid-template-rows 分别表示大家需要多少行和多少列并且每一行或列的宽度和高度都为1份。repeat(4, 1fr) 表示大家需要四列，每一列宽度为1份。repeat(6, 1fr) 则表示大家需要六行，每一行高度为1份。grid-gap 用于指定每个单元格之间的间距。

如果大家需要让单个单元格具有不同的宽度或者高度，大家可以使用 grid-template-areas。在这种情况下，大家需要为容器内的每个单元格定义一个名称。例如：

.container {
display: grid;
grid-template-areas:
"header header header header"
"menu main main main"
"menu main main main"
"menu main main main"
"menu footer footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
}
.menu {
grid-area: menu;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}

此时，.container 将被划分为五个区域，大家给每个区域取了一个名称，然后通过 grid-area 属性将每个单元格放到相应的名称区域中。

总之，CSS删格布局是一种非常强大的布局方式。通过掌握其属性和语法，大家可以为网页构建出精美的布局，带来更好的用户体验。