Cards responsivas sin Media Queries.

Veremos cómo realizar un grid y tener un full responsive layout card.

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.

Francisco
Francisco

👀 Me interesa... Seguir aprendiendo y colaborando en nuevos proyectos
🌱 Actualmente estoy aprendiendo... Desarrollo de Plugin,GitHub, React y NodeJs.
💞️ Busco colaborar en ...programación web, Aplicaciones
📫 Como contactarme... francisco@calymayor.dev

Artículos: 50
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x