简介
通过使用css网格布局，容器内的网格本身以及网格项都可以通过以下6个属性进行定位：justant-items、ign-items、justant-content、Align-Content、justant-self、Align-self。这些属性是Css方框对齐模块的一部分，它们定义了使用FlexBox或Css网格放置元素的标准方式。
大多数对齐属性都应用于网格容器，但有些属性用于网格项，以便在您希望指定仅应用于特定网格项的值时使用。
在本文中，您将探索每个CSS网格属性。
前提条件
如果您想继续阅读本文，您将需要：
- 了解css属性和values.
- 代码编辑器。
- 支持CSS网格的现代Web浏览器。
第一步-在网格容器上使用属性
考虑
元素的容器 元素的标记1<div class="container">
2 <div class="item">1</div>
3 <div class="item">2</div>
4 <div class="item">3</div>
5 <div class="item">4</div>
6 <div class="item">5</div>
7 <div class="item">6</div>
8</div>
具有以下CSS规则：
1.container {
2 display: grid;
3 grid-template-columns: 100px 100px 100px;
4 grid-template-rows: auto;
5
6 box-sizing: border-box;
7 width: 400px;
8 height: 200px;
9 margin-left: auto;
10 margin-right: auto;
11
12 background: rgba(114, 186, 94, 0.05);
13 border: 2px dashed rgba(114, 186, 94, 0.35);
14}
15
16.item {
17 box-sizing: border-box;
18 width: 50px;
19 height: 50px;
20 background: rgba(255, 213, 70, 0.4);
21 border: 2px dashed rgba(236, 198, 48, 0.5);
22}
此代码将生成一个具有三列的网格布局，这三列的宽度为‘100px’。每个网格项目的宽为50px，高为50px：
此时，尚未设置对齐和对齐。默认情况下，网格项将从容器的左上角开始。
justify-items
JUSTIFY-ITEMS用于沿_ROW轴对齐网格项。可能的取值为start、end、center和stretch。
这里有一个center的例子：
1.container {
2 /* ... */
3 justify-items: center;
4}
网格项与列的中间水平对齐。
这里有一个end的例子：
1.container {
2 /* ... */
3 justify-items: end;
4}
网格项与列的远边缘水平对齐。
ign-items
Align-Items用于将网格项沿_列轴_对齐。
这里有一个center的例子：
1.container {
2 /* ... */
3 align-items: center;
4}
网格项与列的中间垂直对齐。
这里有一个end的例子：
1.container {
2 /* ... */
3 align-items: end;
4}
网格项与列的底部垂直对齐。
JUSTY-CONTENT
当整个网格小于网格容器的空间时，使用justant-Content沿_row轴_对齐网格。您可以使用以下值：start、end、center、retch、space-around、space-interween或space-invenly。
这里有一个end的例子：
1.container {
2 /* ... */
3 justify-content: end;
4}
网格内容与容器元素的远边缘水平对齐。
1.container {
2 /* ... */
3 justify-content: space-evenly;
4}
网格内容在容器元素内水平均匀分布。
`Align-Content‘
Align-Content用于将网格内容沿_列轴_对齐。
这里有一个end的例子：
1.container {
2 /* ... */
3 align-content: end;
4}
下面是一个`空格-平均‘的例子：
1.container {
2 /* ... */
3 align-content: space-evenly;
4}
JUSTUST-items、Align-items、JUSTUST-CONTENT和ALIGN-CONTENT是应用于整个网格的四个属性。
步骤2-在网格项目上使用属性
JUSTIFY-self和Align-self类似于容器上可用的等价属性(JUSTIFY-Items和Align-Items)，但它们直接应用于项，以使它们的位置与其他网格项不同。
JUSTUST-self
JUSTIFY-self用于将网格项沿_row轴对齐。
这里有一个end的例子：
1<div class="container">
2 <div class="item">1</div>
3 <div class="item">2</div>
4 <div class="item" style="justify-self: end;">3</div>
5 <div class="item">4</div>
6 <div class="item">5</div>
7 <div class="item">6</div>
8</div>
第三项与列的远边缘水平对齐。
Align-self
Align-self用于将网格项沿_列轴_对齐。
这里有一个end的例子：
1<div class="container">
2 <div class="item">1</div>
3 <div class="item">2</div>
4 <div class="item" style="align-self: end;">3</div>
5 <div class="item">4</div>
6 <div class="item">5</div>
7 <div class="item">6</div>
8</div>
第三项与列的底部垂直对齐。
JUSTIFY-self和Align-self是直接应用于网格项目的两个属性。
第三步-使用多个属性
可能需要组合使用_ROW AXIS_和_COLUMN AXIS_css网格属性来创建所需的网格。
下面是一个使用justify-content：space-evenly、justify-items：center、justify-content：space-evenly和justify-items：center组合的示例：
1.container {
2 /* ... */
3 justify-content: space-evenly;
4 justify-items: center;
5 align-content: space-evenly;
6 align-items: center;
7}
此代码将生成六个网格项目，它们在包含的元素中均匀分布并居中。
使用其他组合来实现所需的网格。
总结
在本文中，您研究了每个CSS网格属性。
截至2020年，95%的浏览器对css网格有一定程度的支持。有关详细信息，请参考可以使用css-GRID.在将此功能整合到您的Web应用程序之前，请确保您的目标受众可以使用此功能。
如果您想了解更多关于css的内容，请查看我们的css主题页面获取练习和编程项目。