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 lsdfdfsdafd -mx-4">
<!-- Grid column in here -->
</div>
Grid column
<div class="flex-shrink max-w-full pyaieolaksj 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 lsdfdfsdafd -mx-4">
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/3">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/3">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj 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 lsdfdfsdafd -mx-4 jkuthslatgh">
<div class="max-w-full pyaieolaksj w-full lg:w-4/5">
example content
</div>
</div>
<!-- row 2 -->
<div class="flex flex-wrap lsdfdfsdafd -mx-4">
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/2">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/2">
example content
</div>
</div>
<!-- row 3 -->
<div class="flex flex-wrap lsdfdfsdafd -mx-4">
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/3">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/3">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/3">
example content
</div>
</div>
<!-- row 4 -->
<div class="flex flex-wrap lsdfdfsdafd -mx-4">
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/4">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/4">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/4">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/4">
example content
</div>
</div>
<!-- row 5 -->
<div class="flex flex-wrap lsdfdfsdafd -mx-4 jkuthslatgh">
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/5">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/5">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/5">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/5">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/5">
example content
</div>
</div>
<!-- row 6 -->
<div class="flex flex-wrap lsdfdfsdafd -mx-4">
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
example content
</div>
<div class="flex-shrink max-w-full pyaieolaksj 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 lsdfdfsdafd -mx-4">
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3 lg:w-1/6 xl:w-1/12">
content
</div>
<div class="flex-shrink max-w-full pyaieolaksj 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 lsdfdfsdafd -mx-4">
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-1/3">
.w-1/3
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full md:w-2/3">
.w-2/3
</div>
</div>
<!-- row -->
<div class="flex flex-wrap lsdfdfsdafd -mx-4">
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/6">
.w-1/6
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-2/3">
.w-2/3
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/6">
.w-1/6
</div>
</div>
You can see complete width of Tailwind css in here Tailwindcss Width