Columnas de plantilla de cuadrícula CSS de Tailwind

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 CSS grid-template-columns en CSS. Se usa para establecer el número de columnas y el tamaño de las columnas de la grilla, aquí haremos lo mismo pero para un desarrollo rápido del front-end. El número de columnas se establece por el número de valores dados a esta clase. 

Columnas de plantilla de cuadrícula:

  • grid-cols-1: Cada fila concede solo una columna.
  • grid-cols-2:  Cada fila concede solo dos columnas.
  • grid-cols-3:  Cada fila concede solo tres columnas.
  • grid-cols-4:  Cada fila concede solo cuatro columnas.
  • grid-cols-5:  Cada fila concede solo cinco columnas.
  • grid-cols-6:  Cada fila concede seis columnas.
  • grid-cols-7: Cada fila concede siete columnas.
  • grid-cols-8: Cada fila concede ocho columnas.
  • grid-cols-9: Cada fila concede nueve columnas.
  • grid-cols-10: Cada fila concede diez columnas.
  • grid-cols-11: Cada fila concede once columnas.
  • grid-cols-12: Cada fila concede doce columnas.
  • grid-cols-none: no sigue la propiedad grid-column.

Sintaxis:

<element class="grid grid-cols-number"> Contents... </element>

Ejemplo:

HTML

<!DOCTYPE html> 
<html>
  
<head> 
    <title>Tailwind grid-cols 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-cols Class</b> 
  
    <div id="main" class="grid grid-cols-3 gap-1 justify-evenly"> 
        <div class="bg-green-700 w-26 h-12">1</div> 
        <div class="bg-green-500 w-26 h-12">2</div> 
        <div class="bg-green-300 w-26 h-12">3</div> 
        <div class="bg-green-700 w-26 h-12">4</div> 
        <div class="bg-green-500 w-26 h-12">5</div> 
        <div class="bg-green-300 w-26 h-12">6</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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *