Tailwind Grid
The tailwind grid utility class allows you to create grid-based layouts quickly and easily. It provides a set of classes that enable you to define grid containers, grid columns, and grid rows, allowing you to create responsive and flexible grid layouts for your web applications.
Setting a Tailwind grid Container
To create a tailwind grid container, you can use the grid
class. This class sets the display property of the element to grid and enables grid behavior. By default, the grid container has a single implicit grid track in each direction.
<div class="grid"> <div class=" ">A</div> <div class=" ">B</div> <div class="...">C</div> <div class=" ">D</div> <div class=" ">E</div> <div class="...">F</div></div>
Preview
Tailwing Grid Rows
To define the tailwind grid rows within a grid container, you can use the grid-rows-{n}
class, where {n}
is the number of desired rows. This class evenly distributes the available space among the specified number of rows.
<div class="grid grid-rows-3"> <div class=" ">A</div> <div class=" ">B</div> <div class="...">C</div> <div class=" ">D</div> <div class=" ">E</div> <div class="...">F</div></div>
Preview
Tailwind Grid columns
To define the tailwind grid columns within a grid container, you can use the grid-cols-{n}
class, where {n}
is the number of desired columns. This class evenly distributes the available space among the specified number of columns
<div class="grid grid-cols-3"> <div class=" ">A</div> <div class=" ">B</div> <div class="...">C</div> <div class=" ">D</div> <div class=" ">E</div> <div class="...">F</div></div>
Preview
Responsive Tailwind Grid
Tailwind CSS provides responsive utility classes for creating grids, allowing you to define different grid layouts at different breakpoints. To use responsive tailwind grid classes, you can append the breakpoint prefix to the grid classes. For example, md:grid-cols-2
sets the number of grid columns to 2 starting from the medium breakpoint and above.
<div class="grid grid-cols-2 md:grid-cols-4"> <div class=" ">A</div> <div class=" ">B</div> <div class="...">C</div> <div class=" ">D</div> <div class=" ">E</div> <div class="...">F</div></div>
Tailwind Grid Column Class Table
Class | Properties |
---|---|
grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); |
grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)); |
grid-cols-6 | grid-template-columns: repeat(6,minmax(0, 1fr)); |
grid-cols-7 | grid-template-columns: repeat(7, minmax(0, 1fr)); |
grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)); |
grid-cols-9 | grid-template-columns: repeat(9,minmax(0, 1fr)); |
grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)); |
grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)); |
grid-cols-12 | grid-template-columns: repeat(12,minmax(0, 1fr)); |
grid-cols-none | grid-template-columns: none; |
Tailwind Grid Rows Class Table
Class | Properties |
---|---|
grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); |
grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); |
grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)); |
grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)); |
grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)); |
grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)); |
grid-rows-none | grid-template-rows: none; |
Windframe Tailwind blocks
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.