Tailwind CSS es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita. Tailwind CSS Grid describe la cantidad de propiedades que permiten diseñar la estructura de la cuadrícula y controlar la ubicación de la cuadrícula.
- Columnas de plantilla de cuadrícula CSS de Tailwind
- Tailwind CSS Grid Columna Inicio/Fin
- Filas de plantilla de cuadrícula CSS Tailwind
- Tailwind CSS Cuadrícula Fila Inicio / Fin
- Tailwind CSS Grid Flujo automático
- Tailwind CSS Grid Columnas automáticas
- Tailwind CSS Grid Filas automáticas
- Brecha de CSS de viento de cola
El siguiente ejemplo le dará una breve idea sobre Grid of Tailwind CSS:
Ejemplo:
HTML
<!DOCTYPE html> <head> <title>Tailwind grid-rows Class</title> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS grid-rows Class</b> <div id="main" class="grid grid-rows-3 grid-flow-col"> <div class="bg-green-500 rounded-lg m-4 h-12">1</div> <div class="bg-green-500 rounded-lg m-4 h-12">2</div> <div class="bg-green-500 rounded-lg m-4 h-12">3</div> <div class="bg-green-500 rounded-lg m-4 h-12">4</div> <div class="bg-green-500 rounded-lg m-4 h-12">5</div> <div class="bg-green-500 rounded-lg m-4 h-12">6</div> </div> </body> </html>
Producción:
Cuadrícula CSS de viento de cola
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA