Composants Disposition de la grille Disposition brutaliste de la grille

Disposition brutaliste de la grille

Un composant de mise en page de grille réactif doté d’un style de conception brutaliste avec un contraste élevé, des mises en page inhabituelles et une prise en charge du thème sombre.

Aperçu

HTML Code

<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 1</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a description for the first block. It's intentionally raw and bold.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 2</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a description for the second block. Explore the unusual layout!</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 3</h2>
                <p class="text-gray-700 dark:text-gray-300">A bold statement piece in the grid. Unconventional and striking.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 4</h2>
                <p class="text-gray-700 dark:text-gray-300">Another block to emphasize the raw beauty of brutalism.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 5</h2>
                <p class="text-gray-700 dark:text-gray-300">Each block tells a story through its design and layout.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 6</h2>
                <p class="text-gray-700 dark:text-gray-300">Exploring textures and contrasts in brutalist design.</p>
            </div>
        </div>
    </div>
</div>
<style>
    .dark .border-gray-300 { border-color: gray; }
    .dark .text-gray-700 { color: #e5e7eb; }
</style>

Composants associés

Disposition de la grille de conception matérielle

Composant de mise en page de grille réactif avec le style Material Design, y compris les effets d’ombre et la prise en charge du mode sombre.

Ouvrir

Composant de disposition de grille de skeuomorphisme

Composant de mise en page de grille Skeuomorphism avec effets réactifs et prise en charge du thème sombre.

Ouvrir

Disposition minimaliste de la grille bleu océan

Un composant de mise en page de grille minimaliste et réactif pour les marques de mode/beauté, avec des tons bleu océan et la prise en charge du mode sombre.

Ouvrir