Hoy veremos cómo realizar un grid y tener full responsive en cajas.
- Lo primero que haremos es colocar un (Div) con la clase (cards), este será el contenedor padre.
- Dentro de este (Div) se colocarán 3 (Divs) más con la clase (card).
- Dentro de estos (divs) irá el contenido.
En este ejemplo colocaremos tres imágenes.
Cabe mencionar que a las imágenes se le agregaron estilos CSS, para que encajaran en el ancho de la caja y alto.
Con esto se irán ajustando los elementos a los diferentes tipos de pantallas.
- Para que las cajas sean responsivas se utilizó:
display: grid; (Muestra el contenido en forma de cuadrícula.) - grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));( define el nombre de las líneas y las funciones de tamaño de línea de grid columns.)
- gap:10px;( Aquí asignamos el espacio entre cada Caja)
Lo anterior se aplica a la clase (cards).
Prueba el código.
<style>
.cards{
display: grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:10px;
}
.card img{
width: 100%;
height: 100%;
}
</style>
<div class="cards">
<div class="card">
<img decoding="async" src="">
</div>
<div class="card"><img decoding="async" src=""> </div>
<div class="card"> <img decoding="async" src=""></div>
</div>
Si te ha servido de algo, házmelo saber, deja un comentario o comparte este articulo. Ayudemos a más usuarios. En el camino andamos y en él nos encontraremos.
