Esta clase acepta más de un valor en Tailwind CSS. Todas las propiedades están cubiertas como en forma de clase. Es la alternativa de la propiedad de fila de cuadrícula CSS en CSS. Se utiliza para describir la cantidad de propiedades que permiten diseñar estructuras de cuadrícula y controlar la ubicación de los elementos de la cuadrícula utilizando Tailwind CSS. Puede cambiar el diseño de los elementos de la cuadrícula independientemente de su orden de origen, lo que permite mover los elementos de la cuadrícula para adaptarse a estos contextos variables sin tener que modificar el marcado subyacente. Pero para un desarrollo rápido de front-end. El número de filas se establece por el número de valores dados a esta clase.
Inicio/fin de las filas de la cuadrícula:
- fila-auto
- rango-fila-1
- rango-fila-2
- fila-span-3
- fila-span-4
- rango-fila-5
- fila-span-6
- fila-span-7
- fila-span-8
- fila-span-9
- rango-de-filas-10
- rango-de-filas-11
- rango-fila-12
- rango-fila-lleno
- fila-comienzo-1
- fila-inicio-2
- fila-inicio-3
- fila-comienzo-4
- fila-comienzo-5
- fila-comienzo-6
- fila-comienzo-7
- fila-comienzo-8
- fila-comienzo-9
- fila-comienzo-10
- fila-comienzo-11
- fila-comienzo-12
- fila-comienzo-13
- fila-inicio-auto
- fila-final-1
- fila-fin-2
- fila-fin-3
- fila-fin-4
- fila-fin-5
- fila-fin-6
- fila-fin-7
- fila-fin-8
- fila-final-9
- fila-final-10
- fila-fin-11
- fila-fin-12
- fila-fin-13
- fila-final-auto
Filas extendidas (intervalo de filas): esta clase cubrirá el área del intervalo, el número mencionado después de que la clase contenga el área de un intervalo, todos sabemos que hay 12 filas de cuadrícula o puede decir 12 intervalos de cuadrícula.
Sintaxis:
<element class="row-span-number"> Contents... </element>
Parámetro: esta clase acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
número: contiene el número de tramos que ocupará una fila de cuadrícula.
Ejemplo:
HTML
<!DOCTYPE html> <head> <title>Tailwind row-span 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 row-span Class</b> <div id="main" class="m-8 grid grid-row-3 grid-flow-col gap-1"> <div class="bg-green-300 rounded-lg">1</div> <div class="bg-green-300 rounded-lg">2</div> <div class="bg-green-300 rounded-lg">3</div> <div class="bg-green-500 row-span-2 rounded-lg">4</div> <div class="bg-green-300 rounded-lg">5</div> <div class="bg-green-500 row-span-3 rounded-lg">6</div> </div> </body> </html>
Producción:
Líneas de inicio y final (row-start|end): esta clase se usa para hacer que un elemento comience o termine en la enésima línea de cuadrícula. Estos también se pueden combinar con las utilidades fila-span-número para abarcar un número específico de columnas.
Nota: Podemos fusionar esta clase con la clase descrita anteriormente (Columnas de expansión (intervalo de filas)), el siguiente ejemplo le dará una idea de cómo usar eso.
Sintaxis:
<element class="row-start|end-number">..</element>
Parámetro: esta clase acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
número: este parámetro define la posición inicial o final de la fila de cuadrícula o la fila normal.
Ejemplo:
HTML
<!DOCTYPE html> <head> <title>Tailwind row-start|end 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 row-start|end Class</b> <div id="main" class="m-8 grid grid-row-4 grid-flow-col gap-1 "> <div class="bg-green-500 row-start-2 row-span-2 rounded-lg">1</div> <div class="bg-green-300 rounded-lg">2</div> <div class="bg-green-300 rounded-lg">3</div> <div class="bg-green-500 row-start-2 col-end-4 rounded-lg">4</div> <div class="bg-green-300 rounded-lg">5</div> <div class="bg-green-300 rounded-lg">6</div> <div class="bg-green-300 rounded-lg">7</div> <div class="bg-green-500 row-start-2 row-span-3 rounded-lg">8</div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA