display:grid的基本使用、行和列的基本设置、间距、行列宽高
display: grid; grid-template-columns: 32% 32% 32%; justify-content: space-between;完整
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display:grid;
/* grid-gap: 30px 50px */
grid-column-gap:30px;
grid-row-gap: 50px;
/* 一行放两列、两个auto */
grid-template-columns: auto auto;
background-color: palevioletred;
padding: 10px;
}
.grid-item {
background-color: #fff;
border: 1px solid #999;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
<p>请使用 <em>grid-column-gap</em> 属性调整列之间的空间。</p>
<p>请使用 <em>grid-row-gap</em> 属性调整行之间的空间。</p>
</body>
</html>
grid-column-gap
grid-column-gap 属性设置列之间的间隙：
grid-row-gap
grid-row-gap 属性设置行之间的间隙：
grid-gap
grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写属性：
.grid-container {
display: grid;
grid-gap: 30px 50px;
/*grid-column-gap:30px;
grid-row-gap: 50px;*/
}
grid-column 属性定义将项目放置在哪一列上。您可以定义项目的开始位置以及结束位置。
注释：grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性。
如需放置某个项目，您可以引用行号（line numbers），或使用关键字 “span” 来定义该项目将跨越多少列。
使 “item1” 从第 1 列开始并在第 5 列之前结束
.item1 {
grid-column: 1 / 5;
}
grid-row属性
grid-row 属性定义了将项目放置在哪一行。
注释：grid-row 属性是 grid-row-start 和 grid-row-end 属性的简写属性。
如需放置项目，您可以引用行号，或使用关键字 “span” 定义该项目将跨越多少行：
使 “item1” 在 row-line 1 开始，在 row-line 4 结束：
.item1 {
/* grid-column: 1 / 5; */
grid-row: 1 / 5;
}
grid-template-columns 属性
grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度。
该值是以空格分隔的列表，其中每个值定义相应列的长度。
如果您希望网格布局包含 4 列，请指定这 4 列的宽度；如果所有列都应当有相同的宽度，则设置为 "auto"。
两个auto就是一行放两个且等宽。
grid-template-columns: auto auto;
grid-template-rows 属性
.grid-container{
grid-template-rows: 50px 100px 150px;
}
原创文章，转载请注明：display:grid的基本使用、行和列的基本设置、间距、行列宽高 | 知识改变命运
