make a Grid system like bootstrap in Tailwind

Question

i am using TailWind with blade template in laravel, how can i make those card like in the bootstrap, i mean every three items in the one column :

@section('content')
    <div class="flex justify-center">
        <div class="w-8/12 bg-white p-6 rounded-lg mt-10 ">


                    @forelse($products as $product)

                        <!-- Box -->
                            <div class="md:flex md:justify-center md:space-x-8 md:px-14">
                                <!-- box-1 -->
                                <div class="mt-16 py-4 px-4 bg-whit w-72 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-110 transition duration-500 mx-auto md:mx-0">
                                    <div class="w-sm">
                                        <img class="w-64" src="{{asset('storage/images/products/'.$product->image)}}" alt="" />
                                        <div class="mt-4 text-green-600 text-center">
                                            <h1 class="text-xl font-bold">{{$product->name}}</h1>
                                            <div class="mt-4 text-gray-600">{{$product->info}}</div>
                                            <div class="mt-4 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-300 text-green-800">{{$product->category->name}}</div>
                                            <button class="mt-8 mb-4 py-2 px-14 rounded-full bg-green-600 text-white tracking-widest hover:bg-green-500 transition duration-200">MORE</button>
                                        </div>
                                    </div>
                                </div>
                    @empty
                        <h1 class="text-center">There is no Products</h1>

                    @endforelse

                <div>  {{$products->links()}}</div>
            </div>
    </div>
@endsection

Answer 1

Here's Peppermintology's comment in the form of an answer:

It sounds like you're looking for a 3 column grid. To do that in Tailwind CSS, use the grid classes like this:

<div class="grid grid-cols-3">
   <!--- Generated cards go here --->
</div>

Answer 2

Recreate the Bootstrap grid system in Tailwind CSS

<div class="grid grid-cols-12">Your column goes here</div>

You can follow this link for further details. https://shortbuzz.in/blog/shortbuzz.in/how-to-create-tailwind-css-grid-system-like-the-bootstrap-grid-system

Answer 3

    <div class="container mx-auto">
  <div class="grid grid-cols-12 gap-1">
    <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
    <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
    <div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
  </div>
</div>

Answer 4

you can easily use tw-bootstrap-grid-optimizer plugin, all your problem will be fix with less coding and important thing is responsive of grid , to responsive your grid css always should to make some trick for that but with this package you can easily handle that

npm i tw-bootstrap-grid-optimizer

Configuration:

module.exports = withMT({
    content: ['./src/**/*.{js,jsx,ts,tsx,css,scss}', './index.html'],
    darkMode: 'media', // or 'media' or 'class',
    development: true,
    mode: "jit",
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [
        require('tw-bootstrap-grid-optimizer')
    ],
});

function App() {
    return (
        <>
            <div className="container bg-red-600 text-center">
                <div className="row">
                    <div className="sm:col-6 md:col-4">Column 1</div>
                    <div className="sm:col-6 md:col-4">Column 2</div>
                    <div className="sm:col-6 md:col-4">Column 3</div>
                </div>
            </div>
        </>
    )
}

its simple and responsive with less code