css网格_CSS网格容器

css网格

CSS | 网格容器 (CSS | Grid Containers)

There are numerous ways to display our list items or elements. For instance, we can display them in the navigation bar, in a menu bar and whatnot. Well, it would be right to say that there are many more such methods to imply to our web page. Besides, it is solely the developers' choice of what kind of styling or formatting they want to use for their list items. But let us discuss one such method which is used very often and also helps in making your web page much versatile and responsive, CSS Grid Container.

有很多方法可以显示我们的列表项或元素。例如，我们可以在导航栏，菜单栏等中显示它们。好吧，很正确地说，还有更多这样的方法暗示着我们的网页。此外，这完全是开发人员选择要用于其列表项的样式或格式的选择。但是，让我们讨论一种经常使用的方法，它还有助于使您的网页具有更多用途和响应能力，即CSS Grid Container 。

Grid container is not a tough method to use to display the elements of your web page. Well, what is the grid container is the first place? So, grid containers comprise of grid items and those same items are placed or inserted inside columns and rows. We all have come across various grids in our daily life, so imagine one such empty grid and start placing items inside that grid's rows and columns and there you are, that is a grid container and the same thing is possible in CSS as well.

网格容器并不是用来显示网页元素的艰难方法。那么，什么是网格容器才是第一位的？因此，网格容器由网格项目组成，并且将那些相同的项目放置或插入到列和行内。我们每个人在日常生活中都遇到过各种各样的网格，所以想象一个空的网格并开始将项目放置在该网格的行和列中，然后就可以了，这是一个网格容器，并且CSS中也可以做到这一点。

Implementation:

实现方式：

With the definition of a grid container in mind, let us now understand how to make an element behave like a grid container. This again is not a tough task, all you gotta do is modify the display property a little bit. To make an element behave like a grid container, you will have to set your display property to grid or inline-grid. This way your HTML element will start behaving like a grid container.

考虑到网格容器的定义，让我们现在了解如何使元素表现得像网格容器一样。再次这不是一项艰巨的任务，您要做的只是稍微修改一下显示属性。为了使元素的行为像网格容器一样，您必须将display属性设置为grid或inline-grid 。这样，您HTML元素将开始表现得像一个网格容器。

Syntax:

句法：

Element {
display: grid/inline-grid;
}

Properties:

特性：

Now let us look at some of the grid container's properties:

现在让我们看一下网格容器的一些属性：

1)grid-template-columns属性 (1) The grid-template-columns property)

The fundamental use of grid-template-columns-property is to specify the total number of columns in the grid layout and it can also be used to specify the width of those columns.

grid-template-columns-property的基本用途是指定网格布局中的总列数，也可以用于指定这些列的宽度。

The values of this property are space-separated lists where each value would define the length of every column.

此属性的值是用空格分隔的列表，其中每个值将定义每列的长度。

For instance, if you wish to add 4 columns in your grid layout, just specify the width of the 4 columns or just type in auto for every column to have the same width.

例如，如果您希望在网格布局中添加4列，则只需指定4列的宽度，或者仅键入auto即可使每列具有相同的宽度。

Syntax:

句法：

Element {
display: grid;
grid-template-columns: auto auto auto auto;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 15px;
background-color: red;
padding: 10px;
}
.grid> div {
background-color: pink;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>CSS Grid container</h1>
</br>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>

Output

输出量

Note: One thing to keep in mind here is that if you have more than 4 elements in a 4 column grid, then the grid will create a new row itself to fit in the items.

注意：这里要记住的一件事是，如果在4列网格中有4个以上的元素，则网格将自己创建一个新行以适合项目。

2)grid-template-rows属性 (2) The grid-template-rows property)

This property is the opposite of column property, in this, you can define the height of each row in the grid.

此属性与column属性相反，在此属性中，您可以定义网格中每一行的高度。

Syntax:

句法：

Element {
grid-template-rows: 50px 100px;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 150px;
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.grid > div {
background-color: pink;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>CSS Grid container</h1>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

Output

输出量

In the above example both rows are set by property grid-template-rows to 80px and 150px.

在上面的示例中，两行都通过属性grid-template-rows设置为80px和150px 。

3)证明内容属性 (3) The justify-content property)

To fit in the entire grid within the container justify-content property is used.

为了适合容器内的整个网格，使用了justify-content属性。

Syntax:

句法：

Element {
justify-content: space-evenly;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
justify-content: space-evenly;
grid-template-columns: 40px 60px 70px;
grid-gap: 10px;
background-color: pink;
padding: 10px;
}
.grid> div {
background-color: red;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>CSS Grid container</h1>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

Output

输出量

Note: For this property to actually work, make sure that the grid's entire width should be less than that of the container's width.

注意：为了使此属性真正起作用，请确保网格的整个宽度应小于容器的宽度。

4)align-content属性 (4) The align-content property)

To align the entire grid vertically inside the container this property is used.

要在容器内垂直对齐整个网格，请使用此属性。

Syntax:

句法：

Element {
align-content: center;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
height: 400px;
align-content: center;
grid-gap: 15px;
grid-template-columns: auto auto auto;
background-color: pink;
padding: 10px;
}
.grid > div {
background-color: red;
text-align: center;
padding: 20px 0;
font-size: 40px;
}
</style>
</head>
<body>
<h1>CSS Grid container</h1>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>

Output

输出量