使用 Tailwind CSS Grids 重新创建 Bootstrap Grid

Bootstrap 网格由 flexbox 提供支持，它具有十二列系统、五个默认响应层和移动优先系统。

Tailwind CSS 网格由 CSS 网格提供支持，从技术上讲，它可以拥有任意多列、五个响应层、大量的装订线间隙实用程序，并且易于定制。

让我们采用以下引导网格：



<div class="container">
  <div class="row">
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
  </div>
</div>

这将得到如下三列，

我们可以使用这个在 Tailwind 上重新创建相同的内容，



<div class="grid grid-cols-3">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

我们在那里使用 CSS 网格，并使用Grid Template Columns tailwind 实用程序将其分成三列。

CSS 网格没有像引导网格那样内置任何间距，但我们可以像这样使用gap 实用程序来添加它，



<div class="grid grid-cols-3 gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

由于这些网格实用程序默认是移动优先的，我们必须添加其他 cols 实用程序以确保它在移动设备上看起来不错。



<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

在这里，在最低设备宽度上，所有内容都会在一列上，而到达lg断点后，所有内容都会在三列上。

我们有最多 12 列的实用程序类，因此我们可以拥有像 bootstrap 一样的 12 列布局。

相同的响应式类也可以用于间隙实用程序。下面的装订线间隙在到达lg断点后会增加。像这样，



<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

但是，如果您想更改单个列的大小怎么办？您可以使用网格列实用程序来实现。



<div class="grid grid-cols-1 lg:grid-cols-4">
  <div class="col-span-2">Takes two columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

上面的代码使用了网格列实用程序，使第一列占据了两列。而且，这也是移动优先的。因此，如果你想让它在移动设备上占据一列，你可以执行以下操作：



<div class="grid grid-cols-1 lg:grid-cols-4">
  <div class="col-span-1 lg:col-span-2">Takes one column on mobile and two on desktop</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

这是创建类似顺风网格的引导程序的最简单方法。

这是最后的顺风游乐场：

https://play.tailwindcss.com/eAbd7eiQIY

您可以在此处了解有关CSS 网格的更多信息，或者通过播放此交互式教程进行学习。

鏂囩珷鏉ユ簮锛�https://dev.to/praveenjuge/recreating-bootstrap-grid-with-tailwind-css-grids-6j0