开启grid布局
一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后,它就变成了一个网格容器
<style>
.wrapper {
display: grid;
/* 设置列之间的网格间距 */
grid-column-gap: 50px;
//通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列
grid-template-columns: auto auto auto auto;
grid-template-rows: 100px;
//使用 grid-row-gap 属性来设置行之间的网格间距
grid-row-gap: 50px;
}
.item{
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item" >1</div>
<div class="item" >2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>