Contenido del curso
Para quienes les interese conocer un poco más del funcionamiento de CSS Grid, cuando se utiliza la clase col-span-2 de Tailwind, realmente se está empleando la propiedad grid-column: span 2, la cual a su vez está abreviando otras 2 propiedades llamadas grid-column-start y grid-column-end.
Este valor span 2 es una de las formas en las que se puede asignar valor a la propiedad grid-column en CSS puro, e indica que Grid tomará el grid item involucrado y lo ubicará en la primera columna disponible en la que sea posible que dicho elemento abarque las 2 columnas especificadas.
En el playground de Tailwind esta equivalencia se expresa utilizando de forma redundante el valor span y por eso se ve como grid-column: span 2 / span 2, pero esto lo hace para asegurar que el grid item involucrado ocupe las 2 columnas especificadas y mantener la coherencia con otras clases que emplean el mismo formato, aunque el navegador interpreta grid-column: span 2.
Les sugiero el siguiente vídeo para conocer más acerca del funcionamiento de CSS Grid:
Aquí explican muy bien cuando usar Flex y Cuando Grid, incluso la mezcla de ambos
aquí del mismo pero la explicación de solo grid
🚀🚀Elaboré los siguientes retos.
El primero basado en flexbox y las cards basadas en GRID:
Para los que tenemos algo de experiencia con grillas, sabemos que una de las cosas más complicadas era usar: grid areas en el contenedor. y luego grid-template-areas y asignar cada nombre a cada elemento de la grilla
Usando CSS sería
<div class="grid-container">
<div class="header">Header</div>
<div class="nav">Nav</div>
<div class="main">Main</div>
<div class="aside">Aside</div>
<div class="footer">Footer</div>
</div>
Y para armar la grilla
.grid-container {
display: grid;
grid-template-areas:
"header header"
"nav main"
"aside main"
"footer footer";
grid-template-columns: 1fr 2fr;
grid-template-rows: auto 1fr 1fr auto;
gap: 10px;
height: 100vh;
padding: 10px;
}
.header {
grid-area: header;
background: #4CAF50;
color: white;
text-align: center;
padding: 10px;
}
.nav {
grid-area: nav;
background: #2196F3;
color: white;
padding: 10px;
}
.main {
grid-area: main;
background: #f1f1f1;
padding: 10px;
}
.aside {
grid-area: aside;
background: #FF9800;
color: white;
padding: 10px;
}
.footer {
grid-area: footer;
background: #333;
color: white;
text-align: center;
padding: 10px;
}
Pero con tailwind esto se hace mucho más facil usando la clase de utilidad order
<div class="grid grid-cols-3 gap-4 justify-items-center">
<div class="bg-blue-500 p-4 order-5">Elemento 1</div>
<div class="bg-pink-500 p-4 order-4">Elemento 2</div>
<div class="bg-red-500 p-4 order-3">Elemento 3</div>
<div class="bg-green-500 p-4 order-2">Elemento 4</div>
<div class="bg-gray-500 p-4 order-1">Elemento 5</div>
</div>
Cómo resultado...
Similar a Bootrsap Grid Sistem col-12
CSS Grid es una técnica de diseño que permite crear layouts bidimensionales. Aquí tienes un ejemplo básico:
<div class="grid-container"> <div class="grid-item">Elemento 1</div> <div class="grid-item">Elemento 2</div> <div class="grid-item">Elemento 3</div> <div class="grid-item">Elemento 4</div> </div>
.grid-container { display: grid; grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual tamaño */ gap: 10px; /* Espacio entre elementos */ } .grid-item { background-color: lightblue; padding: 20px; text-align: center; }
Este código crea un contenedor de grid con dos columnas y un espacio entre los elementos, aplicando un estilo básico. Puedes personalizarlo según tus necesidades.
está muy bueno, no conocía esa funcionalidad de grid
