Esta clase acepta más de un valor en Tailwind CSS, todas las propiedades están cubiertas como en el formulario de clase. Es la alternativa de la propiedad grid-column de CSS en CSS que se usó 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 usando 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 el desarrollo rápido de front-end. El número de columnas se establece por el número de valores dados a esta clase.
Comienzo/fin de la columna de cuadrícula:
- col-auto
- col-span-1
- col-span-2
- col-span-3
- col-span-4
- col-span-5
- col-span-6
- col-span-7
- col-span-8
- col-span-9
- col-span-10
- col-span-11
- col-span-12
- col-span-full
- col-start-1
- col-start-2
- col-start-3
- col-start-4
- col-start-5
- col-start-6
- col-start-7
- col-start-8
- col-start-9
- col-start-10
- col-start-11
- col-start-12
- col-start-13
- col-start-auto
- col-end-1
- col-end-2
- col-extremo-3
- col-extremo-4
- col-end-5
- col-end-6
- col-end-7
- col-extremo-8
- col-end-9
- col-end-10
- col-end-11
- col-end-12
- col-end-13
- col-end-auto
Columnas de expansión (col-span): esta clase cubrirá el área del tramo, el número mencionado después de que la clase contenga el área de un tramo, todos sabemos que hay 12 columnas de cuadrícula o puede decir 12 tramos de cuadrícula.
Sintaxis:
<element class="col-span-number"> Contents... </element>
Valor de cuadrícula de clase: esta clase acepta un solo valor como se mencionó anteriormente y se describe a continuación:
- número: contiene el número de tramos que tomará una columna de cuadrícula.
Ejemplo:
HTML
<!DOCTYPE html> <head> <title>Tailwind col-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 col-span Class</b> <div id="main" class="m-8 grid grid-cols-3 gap-1 justify-evenly"> <div class="bg-green-300 rounded-lg h-12">1</div> <div class="bg-green-300 rounded-lg h-12">2</div> <div class="bg-green-300 rounded-lg h-12">3</div> <div class="bg-green-500 col-span-2 rounded-lg h-12">4</div> <div class="bg-green-300 rounded-lg h-12">5</div> <div class="bg-green-500 col-span-3 rounded-lg h-12">6</div> </div> </body> </html>
Producción:
Líneas de inicio y finalización (col-start|end): esta clase se utiliza para hacer que un elemento comience o finalice en la enésima línea de cuadrícula. Estos también se pueden combinar con las utilidades col-span-number para abarcar un número específico de columnas.
Nota: Podemos fusionar esta clase con la clase descrita anteriormente (columnas de expansión (col-span)), el siguiente ejemplo le dará una idea de cómo usar eso.
Sintaxis:
<element class="col-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 columna de cuadrícula o columna normal.
Ejemplo:
HTML
<!DOCTYPE html> <head> <title>Tailwind col-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 col-start|end Class</b> <div id="main" class="m-8 grid grid-cols-4 gap-1 justify-evenly"> <div class="bg-green-500 col-start-2 col-span-2 rounded-lg h-12">1</div> <div class="bg-green-300 rounded-lg h-12">2</div> <div class="bg-green-300 rounded-lg h-12">3</div> <div class="bg-green-500 col-start-2 col-end-4 rounded-lg h-12">4</div> <div class="bg-green-300 rounded-lg h-12">5</div> <div class="bg-green-300 rounded-lg h-12">6</div> <div class="bg-green-300 rounded-lg h-12">7</div> <div class="bg-green-500 col-start-2 col-span-3 rounded-lg h-12">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