Turbine UI - Laravel and Tailwind CSS Grid Component

Grid

Structure content effectively with responsive grids

x-t-grid

Preview and Examples

1 Column Grid

2 Column Grid

3 Column Grid

4 Column Grid

5 Column Grid

6 Column Grid

<x-t-grid cols="1" gap>
    <div>...</div>
</x-t-grid>
 
<x-t-grid cols="2" gap>
    <div>...</div>
    <div>...</div>
</x-t-grid>
 
<x-t-grid cols="3" gap>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</x-t-grid>
 
<x-t-grid cols="4" gap>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</x-t-grid>
 
<x-t-grid cols="5" gap>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</x-t-grid>
 
<x-t-grid cols="6" gap>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</x-t-grid>

Attributes

Name	Type	Options	Description
cols	string	1 2 3 4 5 6 12	Sets column count
gap	string	none xs sm md lg xl 2xl	Adds a gap
rows	string	1 2 3 4 5 6	Sets row count