Grid System
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system.
Row Column
TailPro’s grid system uses a series of containers, rows, and columns to layout and align content.
<div class="flex flex-wrap flex-row -mx-4">
<!-- Grid column in here -->
</div>
Grid column
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
<!-- Content here -->
</div>
You can edit grid column with change w-full md:w-1/2 lg:w-1/3 xl:w-1/4
Example Responsive Grid
example content
example content
example content
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/3">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/3">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/3">
example content
</div>
</div>
You can edit grid column with change w-full lg:w-1/3
12 Grid Column
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
example content
content
content
content
content
content
content
content
content
content
content
content
content
<!-- row 1 -->
<div class="flex flex-wrap flex-row -mx-4 justify-center">
<div class="max-w-full px-4 w-full lg:w-4/5">
example content
</div>
</div>
<!-- row 2 -->
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/2">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/2">
example content
</div>
</div>
<!-- row 3 -->
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/3">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/3">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/3">
example content
</div>
</div>
<!-- row 4 -->
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/4">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/4">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/4">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/4">
example content
</div>
</div>
<!-- row 5 -->
<div class="flex flex-wrap flex-row -mx-4 justify-center">
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/5">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/5">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/5">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/5">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/5">
example content
</div>
</div>
<!-- row 6 -->
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
</div>
<!-- row 12 -->
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
</div>
You can edit responsive grid column with change sm:, md:, lg:, xl:
Mix Responsive Grid
.w-1/3
.w-2/3
.w-1/6
.w-2/3
.w-1/6
<!-- row -->
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-full md:w-1/3">
.w-1/3
</div>
<div class="flex-shrink max-w-full px-4 w-full md:w-2/3">
.w-2/3
</div>
</div>
<!-- row -->
<div class="flex flex-wrap flex-row -mx-4">
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/6">
.w-1/6
</div>
<div class="flex-shrink max-w-full px-4 w-full lg:w-2/3">
.w-2/3
</div>
<div class="flex-shrink max-w-full px-4 w-full lg:w-1/6">
.w-1/6
</div>
</div>
You can see complete width of Tailwind css in here Tailwindcss Width