Grid可以定义为一组相交的水平线和垂直线。CSS Grid布局将页面划分为主要区域。它在层、位置和大小方面定义了由HTML
基元构建的控件部分之间的关系。Grid 属性提供了一个具有行和列的基于网格的布局系统。它使网页设计变得容易，无需定位和浮动。
与表格类似，它使用户能够将元素对齐到行和列中。但与表格相比，使用CSS
Grid设计布局更容易。我们可以使用grid-template-rows和grid-template-columns属性在网格上定义列和行。
Grid属性在浏览器如支持谷歌Chrome，IE浏览器，火狐，Safari，和Opera。
我们可以通过在元素上将display属性设置为grid或inline-grid来定义网格容器。
Grid容器包含放置在行和列内的网格项。
让我们看一个简单的 CSS Grid示例。
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: grid;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
background-color: black;
padding: 10px;
}
.num {
background-color: grey;
text-align: center;
color: white;
padding: 10px 10px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="num">一</div>
<div class="num">二</div>
<div class="num">三</div>
<div class="num">四</div>
<div class="num">五</div>
<div class="num">六</div>
<div class="num">七</div>
<div class="num">八</div>
</div>
</body>
</html>让我们看看一些速记属性：
grid-template-columns：用于指定列的大小。
grid-template-rows：用于指定行大小。
grid-template-areas：用于通过命名项指定网格布局。
grid-auto-rows：用于指定行的自动大小。
grid-auto-columns：用于指定列的自动大小。
grid-auto-flow：用于指定如何放置自动放置的项目和自动行大小。
在以下示例中，我们包含了上述一些速记属性。现在，让我们看看使用一些属性的例子：
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 250px 200px;
background-color: black;
grid-gap: 10px;
padding: 20px;
}
.num {
background-color: lightgrey;
text-align: center;
padding: 20px 10px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="num">一</div>
<div class="num">二</div>
<div class="num">三</div>
<div class="num">四</div>
<div class="num">五</div>
<div class="num">六</div>
<div class="num">七</div>
<div class="num">八</div>
</div>
</body>
</html>它用于对齐容器内的整个网格。它包括以下值：
space-evenly：它在列之间或列周围提供相等的空间。
space-around：它在列周围提供相等的空间。
space-between：它在列之间提供等量的空间。
center：用于对齐容器中间的网格。
start：用于在容器的开头对齐网格。
end：用于对齐容器末端的网格。
让我们通过一个例子来理解这个属性和值。
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container1 {
display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container2 {
display: grid;
justify-content: space-around;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.grid-container3 {
display: grid;
justify-content: space-between;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: green;
padding: 10px;
}
.grid-container4 {
display: grid;
justify-content: end;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: violet;
padding: 10px;
}
.grid-container5 {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: gray;
padding: 10px;
}
.grid-container6 {
display: grid;
justify-content: center;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: blue;
padding: 10px;
}
.num {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<b>具有空间均匀价值的容器</b>
<div class="grid-container1">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>具有空间价值的容器</b>
<div class="grid-container2">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>具有空间价值的容器</b>
<div class="grid-container3">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>具有终值的容器</b>
<div class="grid-container4">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>具有起始值的容器</b>
<div class="grid-container5">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
<b>具有中心价值的容器</b>
<div class="grid-container6">
<div class='num'>1</div>
<div class='num'>2</div>
<div class='num'>3</div>
</div>
</body>
</html>它用于垂直对齐容器内的整个网格。
该值对齐内容性质是一样的价值观证明内容属性。