Grid-column en CSS puede transformar tus diseños

¿Te has parado alguna vez a pensar lo importante que es la primera impresión de un sitio web? Un día, quise buscar información confiable al respecto y encontré que la Universidad de Stanford ha hecho estudios que demuestran que una gran parte de los usuarios juzga la credibilidad de un sitio web en función de su diseño visual y navegación. Por este motivo, para los desarrolladores web, es tan importante pulir cada detalle y saber, por ejemplo, alinear los elementos de una cuadrícula a varias columnas. Así que hoy voy a hablarte de la propiedad grid-column en CSS y cómo usarla para que puedas crear diseños más ordenados, fluidos y profesionales que se ganen el cariño de tus usuarios.

¿Qué es grid-column en CSS?

La propiedad grid-column es una herramienta del sistema CSS Grid con la que puedes controlar la posición y el tamaño de un elemento en las columnas de un contenedor de cuadrícula. En otras palabras, esta propiedad te permite ajustar en qué columna empieza un elemento y cuántas columnas abarca.

Si comparas tu diseño con un tablero de ajedrez, usar esta propiedad sería el equivalente mover tus piezas estratégicamente para ocupar más o menos espacio, según lo necesites.

¿Para qué sirve grid-column?

Puedo decirte que esta propiedad tiene múltiples usos que harán tu vida mucho más fácil cuando trabajes con cuadrículas en CSS. Por ejemplo:

1. Ajustar el tamaño de un elemento en las columnas: Si necesitas que un bloque, como una imagen o un encabezado, ocupe varias columnas dentro de tu diseño, puedes acomodarlo sin complicaciones con esta propiedad.
2. Organizar el contenido de forma precisa: También permite que cada elemento esté exactamente donde quieres, lo que es perfecto para crear layouts personalizados y evitar esos espacios vacíos que a veces aparecen en los diseños.
3. Crear diseños responsivos: Es muy probable que trabajes con diferentes tamaños de pantalla, especialmente si consideramos la variedad de dispositivos desde los que los usuarios podrían entrar a tu página. Esta propiedad te permite ajustar el comportamiento de los elementos en los diferentes dispositivos, asegurando que todo se vea perfecto, sin importar el tamaño de la pantalla.

Sintaxis de grid-column

Ahora, veamos cómo puedes implementar esta propiedad. Como podrás ver a continuación, su sintaxis es bastante simple:

grid-column: <start> / <end>;

Valores

En cuanto a los valores, puedes utilizar los siguientes:

• <start>: Define en qué línea de columna comienza el elemento.
• <end>: Indica hasta qué línea de columna se extenderá el elemento.

Por ejemplo:

.item {
  grid-column: 2 / 4;
}

En este caso, el elemento abarca desde la columna 2 hasta la columna 4 de la cuadrícula.

Ejemplos de grid-column

Vamos a poner esta teoría en práctica con algunos ejemplos que te ayudarán a entender cómo usar grid-column en situaciones reales.

Expandir un elemento en varias columnas

Supongamos que tienes un diseño con tres columnas y quieres que el encabezado ocupe todas ellas.

<div class="grid">
  <header class="header">Encabezado</header>
  <div class="item">Contenido 1</div>
  <div class="item">Contenido 2</div>
</div>

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

  .header {
    grid-column: 1 / 4;
  }
</style>

Aquí, el encabezado comienza en la columna 1 y se extiende hasta la columna 4, ocupando todo el ancho disponible.

Usar span para simplificar

Puedes usar la palabra clave span para evitar calcular manualmente la posición final de las columnas. Por ejemplo:

<div class="grid">
  <div class="item">Elemento 1</div>
  <div class="item span">Elemento grande</div>
  <div class="item">Elemento 2</div>
</div>

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

  .span {
    grid-column: span 2;
  }
</style>

En este caso, el segundo elemento se extiende automáticamente dos columnas hacia adelante.

Crear layouts más complejos

Imagina que estás diseñando una landing page y necesitas una sección principal acompañada por un sidebar. Podrías hacer algo así:

<div class="grid">
  <main class="main">Contenido principal</main>
  <aside class="sidebar">Barra lateral</aside>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
  }

  .main {
    grid-column: 1 / 2;
  }

  .sidebar {
    grid-column: 2 / 3;
  }
</style>

Aquí, la barra lateral ocupa la segunda columna, mientras que el contenido principal domina la primera.

Recomendaciones para usar grid-column

Ya mencioné al principio que, como desarrolladores, debemos estar atentos a los detalles, pues estos pueden hacer una gran diferencia. Es por lo que quiero darte algunas recomendaciones que puedes tener en cuenta al momento de trabajar con esta propiedad, ya que seguramente te serán de ayuda:

1. Dibuja tu diseño primero: Antes de escribir código, haz un boceto de cómo quieres que luzca tu diseño para definir claramente las líneas de columna que usarás.
2. Usa nombres descriptivos en tus clases: Ponerle nombres a las clases facilitará que otras personas, y hasta tú mismo en el futuro, entiendan el código.
3. Prueba en diferentes dispositivos: Recuerda que los diseños deben adaptarse a móviles, tablets y ordenadores. Por eso, te recomiendo combinar grid-column con media queries para obtener mejores resultados.
4. Combina con otras propiedades de CSS Grid: También puedes combinarla con propiedades como grid-template-areas o grid-auto-rows, ya que te ayudarán a crear diseños más avanzados.

Como conclusión, sólo me queda decir que grid-column es una herramienta imprescindible para cualquier desarrollador que quiera crear diseños dinámicos, funcionales y visualmente atractivos. Con los ejemplos que vimos, puedes empezar a usar esta propiedad para organizar tus elementos con precisión y ahorrar tiempo en el proceso. ¡Así que manos a la obra con esas prácticas!

Si quieres convertirte en un experto del desarrollo backend y frontend, tu mejor oportunidad es unirte al Bootcamp en Desarrollo Web de KeepCoding. En este programa, te enseñaremos cómo dominar HTML, CSS, JavaScript, React y las tecnologías más demandadas del sector IT en la actualidad. Anímate a empezar en poco tiempo una nueva carrera como desarrollador web. 

¡Cambia tu vida con la tecnología!