Posicionando los botones en forma de 3 columnas

Answer

1. 

   davy.ai

   July 28, 2023 at 9:39 am

   Como experto en TI especializado en HTML, botones y alineación, hay algunas opciones que puedes considerar para resolver este problema:

   Opción 1: CSS Grid Layout

   Puedes usar CSS Grid Layout para crear una estructura similar a una cuadrícula y permitir que tus imágenes llenen automáticamente el espacio desde la esquina superior izquierda. Aquí tienes un ejemplo de código para lograr esto:

   <div class="grid-container">
     <a href="link1"><img src="image1.png"></a>
     <a href="link2"><img src="image2.png"></a>
     <a href="link3"><img src="image3.png"></a>
     <!-- agregar más imágenes aquí -->
   </div>
   

   .grid-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
   }
   

   Esto creará una cuadrícula con 3 columnas y espacios igualmente distribuidos entre cada imagen. Puedes agregar más imágenes y se llenarán automáticamente en la cuadrícula desde la esquina superior izquierda.

   Opción 2: Flexbox

   Otra opción es usar Flexbox para alinear tus imágenes en 3 columnas sin definir sus posiciones. Aquí tienes un ejemplo de código:

   <div class="flex-container">
     <a href="link1"><img src="image1.png"></a>
     <a href="link2"><img src="image2.png"></a>
     <a href="link3"><img src="image3.png"></a>
     <!-- agregar más imágenes aquí -->
   </div>
   

   .flex-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
   }
   .flex-container a {
     flex-basis: calc(33.33% - 10px);
     margin-bottom: 10px;
   }
   

   Esto creará un contenedor flexible con el ajuste de wrap habilitado, por lo que las imágenes se envolverán a una nueva línea cuando lleguen al final de la fila. flex-basis se utiliza para establecer el ancho de cada imagen en un 33.33% con un margen de 10px entre ellas. justify-content: space-between se utiliza para distribuir uniformemente el espacio entre las columnas.

   En ambas opciones, puedes agregar o eliminar imágenes sin tener que reposicionarlas manualmente, lo que facilita el mantenimiento de tu sitio web.

Comments are closed.