要定义网格，请在父元素上使用display: grid或display:inline-grid。然后可以使用grid-template-columns和grid-template-rows属性创建网格。 我使用grid-gap属性在列和行之间创建一个10px的空白。此属性是grid-column-gap和grid-row-gap的简写，因此可以单独设置这些值。 父元素的所有直接子元素现在都成为网格项，自动放置算法将它们放置在每个网格单元中。根据需要会自动创建所需要的行
A
B
C
D
E
F
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
