如何在不调用 CSS Grid 属性的情况下制作网格？

当我们需要在网页中展示类似于表格的数据时，通常会使用 CSS Grid 属性来制作网格布局。但是，如果你不想使用这个属性，该怎么办呢？在这篇文章中，我们将介绍一些实现网格布局的方法。

1. 使用浮动

浮动可以用来创建水平排列的元素。我们可以创建若干个块级元素，并使用 CSS 将它们浮动到左边或右边。这种方法需要一些额外的布局管理，但它可以很好地实现网格。

.grid {
  overflow: hidden;
  margin: 0 auto;
}

.grid-item {
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 20px;
}

.grid-item:last-child {
  margin-right: 0;
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

2. 使用 inline-block

当使用 inline-block 属性时，元素的边框和间距很容易出现问题。然而，我们可以使用 font-size: 0 的技巧来避免这个问题。

.grid {
  font-size: 0;
  letter-spacing: -4px;
  margin: 0 auto;
}

.grid-item {
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  margin-top: 20px;
  font-size: 16px;
  letter-spacing: normal;
}

.grid-item:first-child {
  margin-left: 0;
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

3. 使用 table 属性

使用 table 属性是一种最古老的方式来实现网格布局。这种方法已经被淘汰，不太推荐在现代网站中使用。

.table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}

.table-row {
  border: 1px solid black;
}

.table-cell {
  border: 1px solid black;
  width: 16.6%;
}

<table class="table">
  <tr class="table-row">
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
  </tr>
  <tr class="table-row">
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
  </tr>
  <tr class="table-row">
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
    <td class="table-cell"></td>
  </tr>
</table>

结论

虽然使用 CSS Grid 属性可以让网格布局更方便，但是在某些情况下，这个属性可能并不可用或不可靠。在这些情况下，我们可以使用上述方法来实现网格布局。选择适合自己项目的最佳方法吧！