Clase 21 - Diseño Basado en Grids

El sistema de Grid en CSS3 es una poderosa herramienta diseñada para crear complejos y responsivos layouts web de manera intuitiva y eficiente.

Proporciona un nivel de flexibilidad y control que simplifica el proceso de diseño, especialmente en comparación con los métodos más tradicionales como los floats y posicionamientos.

Este sistema permite a los diseñadores y desarrolladores estructurar el contenido de una página usando columnas y filas, y manejar el espacio entre ellos de forma precisa.

Fundamentos del Sistema de Grid

El Grid Layout define un contenedor como un sistema de ‘grid‘ que puede tener filas y columnas.

Se basa en dos componentes principales: los grid containers y los grid items.

Grid Container: El elemento que define el espacio de grid y contiene los grid items.
Grid Items: Los hijos directos del grid container.

Propiedades Principales del Grid

display

Establece el elemento como un grid container.

.container {
  display: grid;
}

grid-template-columns y grid-template-rows

Define las columnas y filas del grid con tamaños específicos.

.container {
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px auto;
}

grid-column y grid-row

Especifica dónde deben ubicarse los grid items dentro del grid.

.item {
  grid-column: 1 / 3;
  grid-row: 1;
}

gap (anteriormente conocido como grid-gap)

Define el espacio entre las filas y columnas del grid.

.container {
  gap: 10px 20px; /* 10px entre filas y 20px entre columnas */
}

justify-items y align-items

Alinea los grid items dentro de sus celdas en el eje horizontal y vertical, respectivamente.

.container {
  justify-items: center;
  align-items: center;
}

Ejemplo Completo de un Layout de Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 15px;
  justify-items: stretch;
  align-items: stretch;
}

.item {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 20px;
  text-align: center;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- Más items -->
</div>

Este ejemplo muestra un contenedor de grid con tres columnas iguales, donde cada item se estira para llenar su celda.

El sistema de Grid en CSS3 es una herramienta indispensable para los desarrolladores web que buscan implementar diseños complejos y responsivos de manera eficiente.

Ofrece un control detallado sobre la estructura del layout, mejorando la capacidad de respuesta y la coherencia visual de las aplicaciones web.

Clase 21 – Diseño Basado en Grids