html四宫格排列

您可以使用HTML和CSS来创建一个四宫格排列的布局。以下是一个简单的示例代码：

HTML代码：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

CSS代码：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

在上面的代码中，我们使用了CSS的Grid布局来创建四宫格排列。我们首先定义了一个包含四个子元素的父元素`div`，这些子元素将会被排列在四宫格布局中。然后，我们将父元素设置为`display: grid`，这样它就可以使用网格布局。接下来，我们定义了网格的列和行，使用`grid-template-columns`和`grid-template-rows`属性。在这个例子中，我们使用了两列和两行，每个单元格的大小将会自动计算为相等的1fr。我们还使用了`gap`属性来定义单元格之间的间距。最后，我们定义了每个单元格的样式，包括背景颜色、内边距和文本对齐方式。

通过这些代码，您可以创建一个简单的四宫格排列布局。您可以根据需要调整样式和单元格数量。