No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Maquetación de Layouts con CSS Grid en iPad

4/12
Recursos

¿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.

Aportes 14

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Fuente Lato 😃

Por aquí les dejo las líneas de código que debemos agregar a nuestro proyecto para las fuentes.
Import link:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&display=swap" rel="stylesheet"> 

Import Style:

<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&display=swap');
</style>

Aplicacion en CSS

font-family: 'Lato', sans-serif;

Les dejo 4 extensiones que me ayudan mucho al momento de maquetar.
Responsive Viewer
What Font
Simple mass downloader
Site Palette

Me parece que en otro curso mencionaron que no era tan conveniente nombrar las variables con el nombre de su color, ya que si dado el caso cambia los colores de la marca ya no tendrian relacion con su nombre de variable

Asi que sugiero esta forma:

:root {
            --principal-color: #ffd602;
            --brand-color: #d5040a;
            --secondary-color: #036cb6;
        }

Creo que sería mejor nombrarlos así:

:root {
    --primary-color: #ffd602;
    --secundary-color: #d5040a;
    --tertiary-color: #036cb6;
}

Imagínate que el sitio web decida cambiar de colores, entonces debes ir por todo el documento a cambiar el nombre de la variable

Layout con CSS Grid

Código de la clase: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/4-layout-con-CSS-Grid

  • Algo que podemos hacer para temas de optimizacion es descargar las fuentes y agregarlas desde nuestro proyecto en local:
    Quedaría algo asi para las 3 fuentes
    Es importante poner este código primero(antes del :root) para que CSS las este preparando primero.
@font-face {
    font-family: "Lato";
    src: url('../assets/fonts/Lato-Thin.woff2') format("woff2"),
         url('../assets/fonts/Lato-Light.woff2') format("woff2"),
         url('../assets/fonts/Lato-Bold.woff2') format("woff2");
    font-weight: 100, 300, 700;
    font-style: lighter, normal, bold;
}

Pueden descargar las fuentes desde el link del código que deje anteriormente. 😄

Para ver la grid pueden verlo con ayuda de DevTools. Se van al contenedor al lado deberá aparecer un botón que diga grid le dan click y despues les va a aparecer la grid 📐
Recuerden que saber debuggear es importantísimo 🙌

ok lo de Color Zilla me encantó. Es magnifico cuando te dan herramientas tan excelentes para facilitar nuestras vidas lm/

Para las variables:

:root{
    --yellow: #ffd602;
    --red: #d5040a;
    --blue: #036cb6;
}

una forma nativa que me parece super util de seleccionar colores en tu computadora es una herramienta de microssoft power Toys te permite seleccionar los colores en distintos formatos como (rgb. hexadecimal, rgba, etc)

Les recomiendo que instalen las PowerToys oficiales de Microsoft para Win10, que aún estando en versión beta son muy estables y añaden un montón de funcionalidades increíblemente útiles. Entre ellas un color picker con un shortcut para acceso rápido. Les dejo el enlace del Github de Microsoft:
https://github.com/microsoft/PowerToys
Espero les guste tanto como a mi 😉

Muy buena explicacion sobre la grid de la pagina web!

Solo agregue el grid area en sus respectivos lugares

También pueden conseguir los colores desde inspeccionar.

Dejo esto por aquí por si alguien mas tenia mi misma duda referente a root en css https://developer.mozilla.org/es/docs/Web/CSS/:root