Tailwind教程之8 - 网格系统

在页面布局时，主要采用的方式有Grid系统或者Flex布局，下面介绍如何在Tailwind中使用Grid布局。

Grid的基本使用

首先在父容器上指定以下属性：

• grid：表面容器为一个网格布局
• grid-cols-4: 代表网格共有4列。需要注意的是，在网格布局的时候，还需要考虑响应式设计。比如使用：lg-grid-cols-4，代表只有在大屏幕时使用4列布局，默认情况下仍然时1列布局。
• gap-12：代表网格之间的距离
• col-span-3: 如果在进行布局的时候，想要第一个div占据1列，第二个div占据3列，可以使用col-span-1,col-span-3来实现。如果同时考虑响应式布局的话，可以使用类似md:col-span-1,md:col-span-3等。

例如：

<div class="mt-4 grid lg:grid-cols-4 gap-12">
  <div>
    1行1列
  </div>
  <div>
    1行2列
  </div>
  <div>
    1行3列
  </div>
  <div>
    1行4列
  </div>
  <div>
    2行1列
  </div>
  <div>
    2行2列
  </div>
</div>