¿Cómo puedo crear un sistema de columnas básico con CSS Grid?

Crear un sistema de columnas básico con CSS Grid es una tarea muy sencilla y eficiente, gracias a las potentes propiedades que ofrece para la maquetación bidimensional.

1. Convertir un elemento en contenedor Grid:
   Primero, necesitas un elemento HTML que actúe como contenedor para tus columnas. A este elemento le aplicas la propiedad display: grid;.
   <div class="mi-rejilla-columnas">
<div>Columna 1</div>
<div>Columna 2</div>
<div>Columna 3</div>
</div>
2. Definir las columnas con grid-template-columns:
   Esta es la propiedad clave para establecer el número y el tamaño de tus columnas. Tienes varias formas de hacerlo:
   • Usando la unidad fr (fracción): Esta unidad representa una fracción del espacio disponible en el contenedor de la cuadrícula. Es ideal para columnas flexibles que se reparten el espacio proporcionalmente.
     .mi-rejilla-columnas {
display: grid;
/* Tres columnas de igual ancho que ocupan el espacio disponible */
grid-template-columns: 1fr 1fr 1fr;
}
   • Usando la función repeat(): Para definir patrones repetitivos de forma concisa.
     .mi-rejilla-columnas {
display: grid;
/* Doce columnas de igual ancho */
/* grid-template-columns: repeat(12, 1fr); */

/* Cuatro columnas de igual ancho (alternativa al ejemplo anterior) */
grid-template-columns: repeat(4, 1fr);
}
   • Combinando unidades: Puedes mezclar fr con unidades fijas como px o porcentajes.
     .mi-rejilla-columnas {
display: grid;
/* Una columna fija a la izquierda, y el resto del espacio para la segunda */
/* grid-template-columns: 200px 1fr; */

/* Tres columnas: 1fr, 2fr (el doble que la primera), 1fr */
grid-template-columns: 1fr 2fr 1fr;
}
3. Añadir espaciado entre columnas (gaps):
   Para crear un espacio (o «canalón», «gutter») entre las columnas, utiliza la propiedad gap o la más específica column-gap.
   .mi-rejilla-columnas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; /* Aplica 20px de espacio entre filas y columnas */
/* O solo para columnas: */
/* column-gap: 20px; */
}

Ejemplo completo de un sistema de 4 columnas:

CSS

.sistema-4-columnas {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas de igual tamaño */
  gap: 15px; /* Espacio de 15px entre ellas */
  padding: 10px; /* Espacio interno del contenedor */
  border: 1px solid #eee; /* Para visualizar */
}

/* Estilos para los ítems dentro de las columnas (opcional, para visualización) */
.sistema-4-columnas > div {
  background-color: lightsteelblue;
  padding: 20px;
  text-align: center;
}Lenguaje del código: PHP (php)

Los elementos hijos directos del contenedor (.sistema-4-columnas en este caso) se colocarán automáticamente en las celdas de la cuadrícula, llenando una columna tras otra y pasando a la siguiente fila si es necesario (comportamiento de auto-colocación de Grid). Para un sistema de columnas «básico», la auto-colocación suele ser suficiente. Si necesitas un control más preciso sobre dónde va cada elemento, puedes usar propiedades como grid-column en los elementos.