Tailwind CSS Grid - Versoly UI

We use a mobile responsive grid system based on a container, row and column layout. Each grid has 12 columns and a column can be between 1-12 columns wide.

Each column has a fixed padding.

Added in 1.0

Example

We use a mobile responsive grid system based on a container, row and column layout. Each grid has 12 columns and a column can be between 1-12 columns wide.

Each column has a fixed padding.

1
2
3
<div class="row">
  <div class="col w-4/12 h-32">
    <div class="w-full h-full bg-primary flex flex-row items-center justify-center">1</div>
  </div>
  <div class="col w-4/12 h-32">
    <div class="w-full h-full bg-primary flex flex-row items-center justify-center">2</div>
  </div>
  <div class="col w-4/12 h-32">
    <div class="w-full h-full bg-primary flex flex-row items-center justify-center">3</div>
  </div>
</div>

2 Responsive Columns

1
2
<div class="row">
  <div class="col md:w-6/12 h-32 mb-6">
    <div class="w-full h-full bg-primary flex flex-row items-center justify-center">1</div>
  </div>
  <div class="col md:w-6/12 h-32 mb-6">
    <div class="w-full h-full bg-primary flex flex-row items-center justify-center">2</div>
  </div>
</div>

3 Responsive Columns

1
2
3
<div class="row">
  <div class="col md:w-4/12 h-32 mb-6">
    <div class="w-full h-full bg-primary flex flex-row items-center justify-center">1</div>
  </div>
  <div class="col md:w-4/12 h-32 mb-6">
    <div class="w-full h-full bg-primary flex flex-row items-center justify-center">2</div>
  </div>
  <div class="col md:w-4/12 h-32 mb-6">
    <div class="w-full h-full bg-primary flex flex-row items-center justify-center">3</div>
  </div>
</div>