Aprenda CSS Grid recreando diseños familiares: Airbnb, Youtube y más

Aprendo mejor con el ejemplo y supongo que has llegado aquí porque tú también. Descubrí que aprender las características de CSS Grid es mucho más fácil al volver a crear los diseños de productos y sitios web con los que estoy familiarizado.

Para cada diseño, he usado una vista principal única como base para comprender cómo se construiría con la cuadrícula CSS.

Como nota: he omitido la mayoría de los detalles complejos sobre cómo se maneja el diseño (animaciones, datos, etc.) para que el enfoque esté en explorar el diseño y cómo funcionan las características de la cuadrícula. Por lo tanto, tenga en cuenta que los diseños pueden no comportarse exactamente como lo hacen oficialmente.

Mi objetivo es que este artículo sea un punto de referencia y una guía para arrancar diseños similares con relativamente poco código (por eso CSS Grid es bueno en lo que hace).

Planeo agregar diseños adicionales a esta publicación en tiempo extra.

Última actualización: 11 de diciembre de 2017

Diseños actuales:

  1. Página de inicio de Airbnb
  2. Página de inicio de YouTube
  3. Vista de inicio de Pinterest

Subiendo:

  • Soundcloud
  • Bloomberg
  • Correo Huffington

Cuadrículas CSS

¿Qué es la cuadrícula CSS?

CSS Grid Layout se destaca al dividir una página en regiones principales, o al definir la relación en términos de tamaño, posición y capa, entre partes de un control construido a partir de primitivas HTML.
Al igual que las tablas, el diseño de cuadrícula permite a un autor alinear elementos en columnas y filas. Sin embargo, muchos más diseños son posibles o más fáciles con CSS Grid que con tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse de modo que realmente se superpongan y superpongan, de manera similar a los elementos posicionados CSS. - MDN

En resumen, CSS Grid proporciona un conjunto de controles de diseño y herramientas que implementaciones existentes de diseños basados ​​en columnas y filas creados a partir del uso de anchos y propiedades flotantes.

CSS Grid también es más que esto. Puede actualizar dinámicamente las propiedades en función de las reglas que defina (como: "cuando el navegador tenga este ancho, haga esto"). Por lo tanto, creo que es el futuro de los enfoques de diseño front-end.

Para aquellos nuevos en el concepto de una cuadrícula en sí: una cuadrícula es un conjunto de líneas (piense en ello como un viejo libro de trabajo de matemáticas) donde tiene líneas horizontales y verticales que permiten definir la ubicación de los elementos.

Terminología de cuadrícula:

Contenedor de rejilla

El contenedor de cuadrícula es el padre que contendrá todos los elementos colocados en la cuadrícula. Define el estado inicial de las líneas de la cuadrícula (vertical y horizontal).

Para crear una cuadrícula CSS, simplemente agrega display: grid; al contenedor o contenedor con el que está trabajando en su documento.

Artículo de cuadrícula

Todos los elementos secundarios del contenedor de cuadrícula se referencian como elemento de cuadrícula.

Cuadricula

Las líneas de cuadrícula representan las columnas verticales (líneas de cuadrícula de columna) y horizontales (líneas de cuadrícula de fila).

Hay dos propiedades de columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula que se utilizan para definir las líneas de cuadrícula del diseño.

grid-template-columnas define la ubicación de la columna y grid-template-rows define la ubicación de la fila.

Cuadrícula de celdas

Esta es el área más pequeña dentro del diseño de cuadrícula, que es el espacio definido por cuatro líneas de cuadrícula.

Área de cuadrícula

Un área de cuadrícula es un área de contenedor con nombre específico que contiene celdas de cuadrícula definidas por líneas de cuadrícula.

Aprendiendo CSS Grid a través del ejemplo

1. Airbnb

Diseño de documento:

  
Airbnb
       
       
      Nombre del hogar   
                 
        

Rejilla principal:

.wrapper {
  margen: 0 automático;
  pantalla: cuadrícula;
  cuadrícula-plantilla-columnas: 65% 35%;
  brecha de cuadrícula: 16px;
}

La clase wrapper define el contenedor de cuadrícula, el que contiene los bloques de documentos centrales (artículo que es el área que contienen los elementos de inicio, aparte del mapa de la barra lateral).

Después de que se haya establecido la propiedad display: grid, el diseño se ha definido realmente como una cuadrícula donde podemos usar las columnas de plantilla de cuadrícula para declarar el tamaño de pista de las columnas usando porcentajes.

El tamaño de la pista puede ser una longitud, un porcentaje o una fracción del espacio libre en la cuadrícula (usando la unidad fr).

.contenido {
  acolchado: 8px;
  pantalla: cuadrícula;
  margen: 0 automático;
  cuadrícula-plantilla-columnas: repetición (autocompletar, minmax (230px, 1fr));
  grid-auto-rows: minmax (264px, auto);
  brecha de cuadrícula: 16px;
}

La cuadrícula principal contiene un contenedor secundario (una cuadrícula secundaria) con un nombre de clase de .content. Esto representa el área del elemento del artículo que contiene todos los elementos del hogar.

La subcuadrícula se define con ambas columnas y con filas para que todos los elementos se puedan ajustar para que quepan.

Aquí se usan algunas cosas nuevas, así que analicemos cada una de ellas.

Al definir las columnas usamos repetir (autocompletar, minmax (300px, 1fr)); como:

repeat () esencialmente evita la repetición de declarar el tamaño de la pista para cada columna, pero se vuelve más interesante cuando se usa junto con el autocompletado.

Cuando el autocompletado se proporciona como el número de repetición, si el contenedor de la cuadrícula tiene un tamaño definido o un tamaño máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de la cuadrícula.

Al usar el llenado automático con repetición (), le hemos dicho a la cuadrícula que calcule cuántos elementos puede caber dentro del tamaño del contenedor automáticamente sin que tengamos que hacer ningún cálculo adicional.

minmax define un rango de tamaño mayor o igual que min y menor o igual que max.

Si max

La unidad fr le permite establecer el tamaño de una pista como una fracción del espacio libre del contenedor de cuadrícula.

Por ejemplo, lo siguiente establecerá cada elemento en un tercio del ancho del contenedor de cuadrícula:

minmax nos permite especificar el ancho en el que el artículo debe permanecer fijo mientras cambia el tamaño.

Con las columnas declaradas, pasamos a las filas grid-auto-rows: minmax (275px, auto);

Hemos utilizado minmax nuevamente aquí para especificar la altura máxima de cada elemento que se coloca en la subcuadrícula, en este caso, cada hogar tendrá 275 px.

Como máximo, es idéntico a max-content. Como mínimo, representa el tamaño mínimo más grande (según lo especificado por ancho mínimo / alto mínimo) de los elementos de la cuadrícula que ocupan la pista de la cuadrícula.

auto se usa en lugar de 1fr en la declaración de la columna porque queremos que el ancho del elemento cambie automáticamente en función del ancho de la columna.

@media (ancho máximo: 1100px) {
  .wrapper {
    grilla-plantilla-columnas: 1fr;
  }
  
  .sidebar {
    pantalla: ninguno;
  }
  
  .contenido {
    ancho: 100%;
    cuadrícula-plantilla-columnas: repetir (autocompletar, minmax (360px, 1fr));
    grid-auto-rows: minmax (300px, auto);
  }
}

Lo mejor de las cuadrículas CSS en este ejemplo es que el diseño solo requería una consulta de medios para crear un diseño receptivo simple.

Antes de establecer este punto de interrupción, configuré unos individuales para tabletas, dispositivos móviles, etc., pero descubrí que creaba un cambio espantoso en el tamaño de los elementos del hogar al cambiar el tamaño en el navegador, así que me quedé con uno que proporcionaba un Experiencia más suave.

La diferencia clave en el diseño dentro de la consulta de medios es que la cuadrícula principal que inicialmente contenía dos columnas definidas por porcentajes ahora tiene una columna definida con el tamaño de pista de 1fr (también he ocultado la barra lateral según el comportamiento en producción) .

Luego, para cada elemento se utilizan las mismas propiedades y métodos, pero la diferencia clave es que he aumentado la altura y el ancho de los elementos (360 px, 300 px).

Eso es todo para la página de inicio de Airbnb, revise el ejemplo de CodePen anterior para ver cómo funciona de manera receptiva.

2. YouTube

Diseño de documento:

  
Youtube
             
          
              Título del video        
       346,112 vistas     
                   
    

Rejilla principal:

.wrapper {
  margen: 0 automático;
  pantalla: cuadrícula;
  grilla-plantilla-columnas: 15% 85%;
  brecha de cuadrícula: 16px;
}

La clase contenedora se utiliza nuevamente para definir la cuadrícula principal. Hay dos columnas en la cuadrícula principal que están asociadas con las etiquetas

y