等高布局的新时代：使用Flexbox和Grid告别传统布局，解锁现代网页设计之美！

很久以前（大约2013年），我写了一个jQuery插件来计算等高的列。它确保了一个有三列的行的非常特殊的情况下，无论内容的长度如何，都能保持内容框的等高。当时主流的布局方法--浮动--并不能处理这个问题，而Flexbox和Grid也没有出现。

但现在，我们有了Flexbox和Grid，它们可以轻松实现等高布局。而且，它们比jQuery插件更强大、更灵活。

Flexbox

Flexbox是一个一维布局模型，这意味着它只能在一个方向上排列元素。然而，这并不意味着它不强大。Flexbox可以轻松创建复杂的布局，包括等高布局。

要使用Flexbox创建等高布局，只需将容器设置为display: flex，并将子元素设置为flex: 1。这将告诉浏览器将容器中的可用空间平均分配给子元素。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
}

Grid

Grid是一个二维布局模型，这意味着它可以同时在两个方向上排列元素。这使得它比Flexbox更强大，但它也更复杂。

要使用Grid创建等高布局，只需将容器设置为display: grid，并将子元素设置为grid-row: 1 / span 2。这将告诉浏览器将容器中的可用空间平均分配给子元素，并将子元素跨越两行。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: grid;
}

.item {
  grid-row: 1 / span 2;
}

哪个更好？

Flexbox和Grid都是创建等高布局的强大工具。然而，在某些情况下，一个比另一个更好。

如果你的布局只需要在一个方向上排列元素，那么Flexbox是一个不错的选择。它比Grid更简单，而且在所有浏览器中都得到很好的支持。

如果你的布局需要在两个方向上排列元素，那么Grid是一个更好的选择。它比Flexbox更强大，但它也更复杂，而且在某些浏览器中的支持还不是很好。

实例

为了更好地理解Flexbox和Grid如何用于创建等高布局，让我们来看一个实例。

这个实例是一个简单的三列布局。每一列都包含一个标题和一段文本。我们希望这些列无论内容的长度如何，都能保持等高。

要使用Flexbox创建这个布局，我们可以使用以下代码：

<div class="container">
  <div class="column">
    <h1>Title 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nunc eget lacus eget nunc luctus finibus. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  </div>
  <div class="column">
    <h1>Title 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  </div>
  <div class="column">
    <h1>Title 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec sed odio dui.</p>
  </div>
</div>

.container {
  display: flex;
}

.column {
  flex: 1;
}

要使用Grid创建这个布局，我们可以使用以下代码：

<div class="container">
  <div class="column">
    <h1>Title 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nunc eget lacus eget nunc luctus finibus. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  </div>
  <div class="column">
    <h1>Title 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  </div>
  <div class="column">
    <h1>Title 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec sed odio dui.</p>
  </div>
</div>

.container {
  display: grid;
}

.column {
  grid-row: 1 / span 2;
}

正如你所看到的，Flexbox和Grid都可以轻松创建等高布局。然而，在某些情况下，一个比另一个更好。