Maquetación de Layouts con CSS Grid en iPad

¿Cómo construir nuestro layout utilizando grid en CSS?

El diseño de un sitio web puede marcar la diferencia entre una buena experiencia de usuario o una frustrante. Al crear un layout, es fundamental comprender el uso de grid, filas y columnas, y cómo aplicarlas de manera óptima en CSS. En este artículo, te guiaré a través del proceso de creación de un layout utilizando CSS Grid, tomando como ejemplo el diseño inspirado en Lego. Prepárate para transformar tu enfoque sobre la maquetación web en algo mucho más efectivo y visualmente atractivo.

¿Cómo definir las columnas y filas de tu layout?

Para empezar a construir nuestra cuadrícula, primero identificamos las columnas y las filas. Decide cómo organizar los elementos principales de tu diseño y elabora una cuadrícula que los agrupe.

• Columnas:
  • En el ejemplo dado, se crean dos columnas de diferente tamaño.
  • La primera columna ocupa un 55% del espacio, y la segunda el 45% restante.
• Filas:
  • Se construyen tres filas; la primera ocupa un 20% del alto total, la segunda un 50% y la tercera un 30%.

¿Cómo utilizar áreas en CSS Grid?

CSS Grid ofrece la ventaja de poder definir áreas explícitas para organizar de manera lógica y coherente los elementos del layout:

• Al crear las áreas, se las puede nombrar para facilitar su uso posterior en el código CSS.
• En este caso, las áreas se denominaron "NAP", utilizada predominantemente para el encabezado, "ASCII", utilizada para una sección principal de contenido, y "section" y "footer" para el contenido secundario y pie de página, respectivamente.

¿Cómo seleccionar y definir colores y fuentes?

Un aspecto crucial del diseño web es la selección de colores y tipografía, elementos que deben reflejar el propósito y la identidad del sitio:

• Colores: Utiliza herramientas como Color Sila, que te permiten seleccionar y copiar colores directamente del navegador. Los colores seleccionados aquí se basan en la paleta oficial de Lego, incluyendo amarillo, rojo y azul. Define estos colores en el CSS mediante variables para facilitar su gestión:

  :root {
    --yellow: #your-color-code;
    --red: #your-color-code;
    --blue: #your-color-code;
  }
  

• Fuentes: Opta por fuentes versátiles y gratuitas, como Lato desde Google Fonts. Es importante elegir estilos variados para adaptarse a las distintas partes del texto, desde negrita (700) para títulos hasta delgada (100) para textos ligeros:

  @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&display=swap');
  
  body {
    font-family: 'Lato', sans-serif;
  }
  

¿Cómo implementar el grid con CSS?

Con las columnas y filas definidas, se procede a implementarlas mediante display:grid, y se establece la estructura completa del layout que va a soportar toda la página web:

.container {
  display: grid;
  grid-template-columns: 55% 45%;
  grid-template-rows: 20% 50% 30%;
  grid-template-areas: 
    "nav aside"
    "section aside"
    "footer aside";
  width: 100%;
  height: auto; /* Puede ajustarse según necesidades */
}

Cada uno de los espacios de trabajo creados puede ser utilizado para colocar elementos gracias al bajo nivel del código CSS.

¿Qué más podemos definir para nuestro contenedor principal?

Más allá de definir sólo el grid, es posible establecer propiedades para asegurar la consistencia visual y de diseño en el layout.

• Ancho y Alto:
  • Aunque no es obligatorio, es útil fijar el ancho y alto de los elementos, especialmente si se necesita hacer debug o revisar posibles errores visuales.
• Flexibilidad:
  • Considere siempre cómo el cambio en un dispositivo puede influir notablemente en el diseño, y ajuste el grid en función de estos cambios.

Una vez definidos estos parámetros, nuestro escenario está listo para agregar contenido y estilo detallado como parte de un diseño web eficiente y atractivo. ¡Felicitaciones! Ya tienes una sólida base para crear layouts complejos utilizando CSS Grid. Con este conocimiento, anímate a seguir explorando y perfeccionando tus habilidades en diseño de interfaces web.