Turbine UI - Laravel and Tailwind CSS Grid Component

Grid

Structure content effectively with responsive grids

Tag: x-turbine-ui-grid

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	Description
cols	string	Sets column count
gap	string	Adds a gap
rows	string	Sets row count