Grid

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system.

Default container

Our default .container class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.

			                
			                  <div class="container xl:max-w-6xl mx-auto px-4">
			                    <!-- Content here -->
			                  </div>
			                
			              

After creating the container, then please create grid rows and columns

Row Column

Tailback’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 with column 1 -->
			                  <div class="flex flex-wrap flex-row -mx-4 justify-center">
			                    <div class="max-w-full px-4 w-full">
			                       example content    
			                    </div>
			                  </div>
			                  <!-- row with column 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 with column 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 with column 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 with column 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 with column 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 with column 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