CSS 网格交互指南

Posted on by

由于大多数现代浏览器都广泛支持 CSS 网格，因此为您的项目创建响应式布局从未如此简单。过去，经常使用浮点数而不是使用网格，这会导致许多奇怪的行为。下面，我们将介绍网格框的主要功能，以及如何使用它。

使用 CSS 网格，您可以定义网格，通常使用grid-template-columns和grid-template-rows，然后将项目放置在该网格上，这样您就可以完全控制内容的显示位置。

创建一个网格框#

来自生成器的代码

.item-1 {
    grid-column: 1;
    grid-row: 1;
}
.item-2 {
    grid-column: 4/5;
    grid-row: 2/3;        
}
.item-3 {
    grid-column: 1/2;
    grid-row: 3/5;
}
.item-4 {
    grid-column: 3/4;
    grid-row: 4/5;
}


<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

为了使网格工作，container元素必须display: grid;附加到它。我们还可以inline-grid创建与文本内联的网格。

然后我们可以设置grid-template-columns,grid-row-columns如果我们愿意的话。这两个属性定义了网格中出现的行数和列数。

.container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    row-gap: 1px;
    column-gap: 1px;
}

容器的属性#

有关关键网格元素及其工作方式的参考，请参见下文。

网格模板列

设置网格元素的列数。不同的列用空格隔开。您可以拥有任意数量的列。

.container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}

网格模板行

设置网格元素的行数。不同的行用空格隔开。您可以拥有任意数量的行。

.container {
    display: grid;
    grid-template-rows: 60px 60px 60px 60px 60px;
}

对齐项目

设置项目沿列轴的位置，即它们是否应该左对齐或拉伸。

.container {
    display: grid;
    justify-items: start; 
}

对齐项目

设置项目沿行轴的位置，即是否应该在顶部、底部、中心或拉伸对齐。

.container {
    display: grid;
    align-items: start; 
}

行间距/列间距

设置网格中不同列和行之间的间距。

.container {
    display: grid;
    row-gap: 2px;
    column-gap: 2px;
}

项目的属性#

还有一些属性可以应用于网格中的单个项目。以下是这些项目的参考。

网格列/网格行

设置项目在网格中的位置。可以浓缩为grid-area: [row-start] / [column-start] / [row-end] / [column-end].

.item {
    display: grid;
    row-gap: 2px;
    column-gap: 2px;
}

对齐自我

沿行轴对齐特定项目。

.container {
    display: grid;
    align-self: normal;
}

justify-self

沿列轴对齐特定项目。

.container {
    display: grid;
    justify-self: normal;
}

推荐阅读：