Hacer un grid con CSS

En este artículo vamos a explicar cómo hacer un sistema de cuadrícula grid con CSS y aplicarlo a cualquier elemento HTML. El sistema de cuadrícula grid en CSS es una herramienta que permite crear diseños de página complejos y estructurados con facilidad.

Un típico error que suele cometerse al definir estructuras de rejillas es utilizar clases CSS específicas para posicionar cada una de las filas e incluso columnas de la rejilla. Esto es innecesario y con grid podemos crear unas reglas para cualquier estructura que queramos mostrar como una rejilla <div>, <p>, <li>, etc.

Básicamente el sistema de cuadrícula grid se utiliza para dividir la página en filas y columnas, lo que facilita la organización y alineación de elementos HTML. Estas son las explicaciones de sus principales utilidades y reglas:

Utilidades de un grid

• Diseño de página estructurado: El grid permite dividir la página en una cuadrícula de filas y columnas, lo que facilita la creación de diseños estructurados y uniformes.
• Alineación de elementos: Puedes alinear elementos en filas y columnas específicas de la cuadrícula, lo que es útil para la alineación precisa de contenido.
• Responsividad: El grid es altamente adaptable a diseños responsivos, lo que significa que puedes ajustar automáticamente la disposición de los elementos en función del tamaño de la pantalla.
• Diseño de cuadrículas: El grid es ideal para crear cuadrículas de contenido, como galerías de imágenes o listas de productos, donde los elementos deben alinearse uniformemente.
• Control de espaciado: Puedes controlar el espacio entre filas y columnas de la cuadrícula, lo que permite un diseño más limpio y ordenado.
• Orden de elementos: Puedes cambiar el orden de los elementos en la cuadrícula sin cambiar el orden en el marcado HTML mediante propiedades como grid-row y grid-column.
• Anidamiento: Puedes anidar cuadrículas dentro de cuadrículas para crear diseños aún más complejos.

Reglas y propiedades CSS

• Display grid: Para crear una cuadrícula, se debe establecer el contenedor padre como un grid utilizando la propiedad display: grid;
• Grid template rows y grid template columns: Estas propiedades permiten definir el número de filas y columnas en la cuadrícula y sus tamaños respectivos.
• Grid gap: La propiedad grid-gap establece el espacio entre las filas y columnas de la cuadrícula.
• Grid column y grid row: Estas propiedades se utilizan para controlar la ubicación de los elementos dentro de la cuadrícula. Puedes especificar en qué fila y columna debe colocarse un elemento.
• Grid area: Permite definir un área dentro de la cuadrícula y asignar elementos a esas áreas.
• Grid auto-flow: Define cómo los elementos se distribuyen automáticamente dentro de la cuadrícula, ya sea en filas o columnas, de acuerdo con la propiedad grid-auto-flow.
• Grid template areas: Permite asignar un nombre a áreas específicas dentro de la cuadrícula y asignar elementos a esas áreas utilizando la propiedad grid-template-areas.
• Justify y align properties: Proporcionan control sobre la alineación horizontal y vertical de elementos dentro de las celdas de la cuadrícula utilizando propiedades como justify-content y align-content.
• Fractional units (fr): Los fracciones (fr) se utilizan para distribuir el espacio disponible de manera equitativa entre las filas o columnas.
• Media queries: Como en todos los diseños «responsive», puedes usar media queries para cambiar el diseño de la cuadrícula en función del tamaño de la pantalla, lo que facilita la creación de diseños responsivos.

El sistema de cuadrícula grid en CSS es una herramienta con un control preciso sobre la disposición y diseño de una página web, muy útil para diseñadores y desarrolladores web.

Hay infinidad de tipos de cuadrículas y opciones que se pueden hacer con grid y CSS, puedes consultar información oficial en CSS Grid Layout. Aquí vamos aver una forma de crear una cuadrícula grid estándar con reglas CSS generales.

Ejemplo de grid con CSS

El punto fuerte de este ejemplo es que vamos a utilizar reglas CSS generales para crear una estructura grid aplicable a cualquier grupo de elementos HTML que queramos estructurar como rejilla. Vamos a verlo aplicándolo a elementos <div>, <ul>, <li> y <p>.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Grid en CSS</title>
  <style>
    body {
      text-align: left;
    } 
    .wrapper {
      width: 50%;
      height: 600px;
      padding: 0;
      margin: auto;
      display: grid;
      grid-gap: 10px;        
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(3, 1fr);
      background-color:aquamarine;
    }
    .wrapper div, .wrapper li, .wrapper p {
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: right;  
      background-color:hotpink;
    }
    .wrapper div:last-child, .wrapper li:last-child, .wrapper p:last-child {
      grid-column: 2;
    }   
    /* Media Query para pantallas más pequeñas (menos de 900px) */
    @media screen and (max-width: 900px) {
      .wrapper {
        width: 400px;
        height: 300px;
      }
    }      
  </style>
</head>
<body>
  <h2>Ejemplo de grid en CSS</h2>
  <p>Ejemplo de grid centrado con una estructura "div"</p>  
    <div class="wrapper">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
      <div>Six</div>
      <div>Seven</div>
    </div>
  <p>Ejemplo de grid centrado con una estructura "li"</p>  
    <ul class="wrapper">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
      <li>Seven</li>
    </ul>
  <p>Ejemplo de grid centrado con una estructura "p"</p>  
    <div class="wrapper">
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
      <p>Four</p>
      <p>Five</p>
      <p>Six</p>
      <p>Seven</p>
    </div> 
    <p>Ejemplo de lista fuera de la estructura grid, recibe el alineamiento del body y no está influenciada por la estructura grid</p>  
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
      <li>Seven</li>
    </ul>    
</body>
</html>

El resultado de este código de ejemplo nos dará tres cuadrículas idénticas que visualmente serán como la siguiente imagen:

Como se puede ver, la fortaleza del grid reside en que se puede aplicar a diferentes elementos CSS con asignar una única clase CSS al contenedor de la estructura. Fuera del elemento contenedor, los elementos HTML siguen funcionando con sus propias reglas CSS.

Reglas CSS del grid

El código CSS proporcionado se utiliza para dar estilo de cuadrícula grid simplemente aplicando la clase .wraper al elemento contenedor del grid.

Vamos a explicar el código CSS paso a paso:

• body Se aplica un estilo al elemento <body> de la página. En este caso, se establece text-align: left;, lo que significa que el texto dentro del cuerpo se alineará a la izquierda. Esto es para demostrar que el grid configura sus elementos HTML a parte.
• .wrapper Se aplica un conjunto de estilos a elementos con la clase .wrapper. Estos estilos se aplicarán al contenedor principal de la cuadrícula grid. Los estilos incluyen:
  • width: 50%; El ancho del contenedor es el 50% del ancho del elemento padre. En este caso el body o el ancho total de la página
  • height: 600px; La altura del contenedor es de 600 píxeles.
  • padding: 0; y margin: auto; Eliminan el margen y el relleno y centran el contenedor horizontalmente.
  • display: grid; Define el contenedor como una cuadrícula CSS.
  • grid-gap: 10px; Crea un espacio de 10 píxeles entre las celdas de la cuadrícula.
  • grid-template-rows: repeat(3, 1fr); y grid-template-columns: repeat(3, 1fr); Configuran la cuadrícula para tener 3 filas y 3 columnas, donde cada fila y columna se ajusta automáticamente al tamaño disponible con 1fr.
  • background-color: aquamarine; Establece el color de fondo del contenedor en «aquamarine».
• .wrapper div, .wrapper li, .wrapper p
  Se aplican estilos a los elementos div, li y p dentro del contenedor .wrapper. Estos estilos sólo se asignan a los elementos <div>, <li> y <p> que esten dentro del grid. Los estilos incluyen:
  • margin: 0; y padding: 0; Eliminan márgenes y rellenos predeterminados.
  • list-style: none; Elimina cualquier estilo de lista en elementos <li>.
  • text-align: right; Alinea el texto a la derecha dentro de estos elementos.
  • background-color: hotpink; Establece el color de fondo en «hotpink» (rosa intenso).
• .wrapper div:last-child, .wrapper li:last-child, .wrapper p:last-child
  Se aplica un estilo específico al último elemento hijo (:last-child) de tipo div, li y p dentro del contenedor .wrapper.
  • grid-column: 2; Significa que el último elemento en cada fila de la cuadrícula se colocará en la segunda columna.

Grid responsive con CSS

Una de las características más importante del CSS es la capacidad de adaptarse a los diferentes tamaños de la pantalla. En este caso hemos añadido una regla «media query» para cumplir con este propósito en pantallas menores a 900 píxeles de ancho.

    /* Media Query para pantallas más pequeñas (menos de 900px) */
    @media screen and (max-width: 900px) {
      .wrapper {
        width: 400px;
        height: 300px;
      }
    }

• @media screen and (max-width: 900px) { Esta línea define el punto de inicio de un media query. Indica que los estilos dentro del bloque se aplicarán solo a dispositivos de pantalla (screen) y cuando el ancho de la pantalla (max-width) sea igual o menor a 900 píxeles.
• .wrapper { Esto selecciona todos los elementos con la clase .wrapper. Cuando la pantalla detectada sea menor a 900px se aplicarán los estilos aquí definidos, el resto no se modificaran.
• width: 400px; Establece el ancho de los elementos .wrapper en 400 píxeles cuando se cumple la condición del media query. En otras palabras, cuando el ancho de la pantalla sea menor o igual a 900 píxeles, los elementos .wrapper tendrán un ancho de 400 píxeles.
• height: 300px; Establece la altura de los elementos .wrapper en 300 píxeles cuando se cumple la condición del media query. De manera similar, cuando el ancho de la pantalla sea menor o igual a 900 píxeles, los elementos .wrapper tendrán una altura de 300 píxeles.
• Los estilos dentro de este bloque solo se aplicarán cuando se cumplan las condiciones especificadas en el media query.

Este media query ajusta el ancho y la altura de los elementos con la clase .wrapper a 400×300 píxeles cuando la pantalla tiene un ancho máximo de 900 píxeles. De esta manera, ajustando únicamente el contenedor, hacemos el diseño «responsive» y que se adapte mejor a dispositivos con pantallas más pequeñas, como tablets o teléfonos móviles.

Hacer un grid con CSS

Este código CSS define estilos para crear una cuadrícula grid centrada en la página y aplica estilos de alineación de texto y colores de fondo a elementos div, li y p dentro de la clase contenedora .wrapper. El último elemento de cada fila en la cuadrícula se coloca específicamente en la segunda columna. Además, hacemos toda nuestra cuadrícula grid «responsive» gracias a la potencia de las reglas «media query» de CSS.

Después del grid volvemos a definir la misma lista <ul>, <li> pero sin añadirle la clase contendora .wraper y, como se puede observar, se comporta de manera ajena al grid. Ahora ya has visto cómo hacer un grid con CSS y la potencia de sus reglas para crear rejillas con cualquier elemento HTML y con un diseño «responsive».

¡ Espero que este artículo sea de vuestro interés !