Hola, en este tutorial veremos la forma de crear un mosaico de cards, algo básico a lo que luego se le pueden agregar muchos más elementos y usarlo como presentación de productos en tu página web. Las herramientas que necesitaremos son las siguientes:
-Visual Studio Code (Editor de código)
-Ganas de aprender. (La más importante)
Para empezar armaremos una estructura básica con un contenedor, y dentro de él tendremos las cards:
<section class="card-container">
<div class="card">
<img src="https://images.pexels.com/photos/7284714/pexels-photo-7284714.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Challenger">
</div>
<div class="card">
<img src="https://images.pexels.com/photos/15156219/pexels-photo-15156219.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
</div>
<div class="card">
<img src="https://images.pexels.com/photos/9703460/pexels-photo-9703460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
</div>
<div class="card">
<img src="https://images.pexels.com/photos/13542034/pexels-photo-13542034.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
</div>
<div class="card">
<img src="https://images.pexels.com/photos/5866426/pexels-photo-5866426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
</div>
<div class="card">
<img src="https://images.pexels.com/photos/10014318/pexels-photo-10014318.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
</div>
<div class="card">
<img src="https://images.pexels.com/photos/12393010/pexels-photo-12393010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
</div>
<div class="card">
<img src="https://images.pexels.com/photos/6720492/pexels-photo-6720492.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
</div>
</section>
Dentro de cada card he agregado una imagen, ustedes pueden agregar texto o si bien desean, una imagen como yo.
Luego de tener esta estructura, vamos a editar los estilos de esta página:
.card{
width: 250px;
height: 250px;
border-radius: 10px;
box-shadow: 5px5px10pxrgba(0,0,0,0.5);
overflow: hidden;
}
.cardimg{
width: 250px;
}
Lo que hicimos acá para empezar fue editar las cards, estas tienen unas dimensiones de 250x250 píxeles, y le añadimos una pequeña curvatura a las esquinas con el border-radius de 10px, ustedes pueden elegir la curvatura que desee, entre mayor el número, el borde se irá haciendo más curveado hasta llegar a tener un marco circular. La siguiente línea de nuestro código se refiere a una sombra sexy, esta es opcional, y por último le decimos que, ya que los bordes estén curveados, si hay contenido en las imágenes que se salga de el borde, que la desaparezca, así le daremos a la imagen el efecto del borde de nuestra card.
Por último le decimos que las imágenes van a tener un ancho por defecto que serán 250px igual que nuestras card, para que se ajusten a ese tamaño.
Ahora pasaremos a la parte más importante para lograr que nuestras cards se vean de forma de mosaico, y usaremos el display grid:
.card-container{
height: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
row-gap: 30px;
justify-items: center;
}
Aquí estamos determinando que la altura que tendrá nuestro contenedor se ajustará a la cantidad de contenido que haya dentro de él. La siguiente línea le indicamos que tomaremos la alternativa del display grid, que nos hace el trabajo más sencillo para hacer mosaicos como lo buscamos, en la siguiente línea en seguida le indicamos que tendrá 4 columnas y estas tendrán un tamaño de 1 fracción de pantalla, lo que nos ayuda a que sea uniforme y se ajuste al ancho de la pantalla. Luego le indicamos que la separación entre filas será de 30px, esto para darle un aspecto un poco más organizado, y finalmente le damos un ‘justify-items: center’ para que nuestras cards queden centradas en la pantalla del navegador.
Espero que te haya servido mucho. 😁👍
