Three Column Grid

Responsive three-column grid layout

Preview

Column 1

First column

Column 2

Second column

Column 3

Third column

View Code

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Column 1</h3>
        <p class="text-gray-600 dark:text-gray-400">First column</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Column 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Second column</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Column 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Third column</p>
    </div>
</div>