Cómo recrear el diseño del artículo de Medium con CSS Grid

Cuando las personas piensan en CSS Grid, normalmente visualizan diseños de cuadrícula de imágenes y páginas web completas. Sin embargo, CSS Grid es en realidad una tecnología excelente para diseñar artículos, ya que le permite hacer cosas que antes era difícil de lograr.

En este tutorial, explicaré cómo recrear el famoso diseño del artículo medio utilizando CSS Grid.

Nota: También he sido parte de la creación de un curso gratuito de CSS Grid de 13 partes en Scrimba. Obtenga acceso al curso aquí.

Haga clic en la imagen para acceder al curso completo de CSS Grid.

En el curso, mi colega Magnus Holm explicará cómo crear un diseño de artículo usando CSS Grid. Entonces, si prefiere mirar en lugar de leer, asegúrese de ver su screencast.

El contenido

Comenzaremos con un archivo HTML básico, que contiene el tipo de contenido que normalmente encontrarás en un artículo medio. Por ejemplo: título, párrafos, subtítulos, imágenes, citas, etc. Aquí hay un outtake:

Ejecutar cualquier paquete NPM en el navegador localmente

JavaScript nunca ha tenido una solución oficial para distribuir paquetes, y cada plataforma web (Rails, Django, etc.) tiene su propia idea de cómo estructurar y empaquetar JavaScript. En los últimos años, NPM se ha convertido en la forma de distribución canónica, con Webpack como sistema de compilación, pero no hay forma de cargar paquetes NPM en el navegador sin un componente del lado del servidor.

Scrimba es una plataforma para la codificación interactiva screencast donde puedes ejecutar el código en cualquier momento.

Si abre este archivo en un sitio web sin ajustar ningún diseño, se verá así:

No particularmente elegante. Así que arreglemos con CSS Grid. Lo haremos paso a paso para que sea fácil de seguir.

Configuración básica para márgenes

Lo primero que debemos hacer es convertir toda la etiqueta del artículo en una cuadrícula y asignarle al menos tres columnas.

artículo {
    pantalla: cuadrícula;
    columnas-plantilla-cuadrícula: 1fr 740px 1fr;
}

La primera y la última columna responden y actúan como márgenes. Contendrán espacios en blanco en la mayoría de los casos. La columna central se fija en 740 píxeles y contendrá el contenido del artículo.

Tenga en cuenta que no estamos definiendo las filas, ya que simplemente serán tan altas como sea necesario para que se ajusten a su contenido. Cada bloque de contenido en el artículo (párrafo, imagen, título) tendrá su propia fila.

El siguiente paso es asegurarse de que todo el contenido de la cuadrícula comience en la segunda línea de la columna de forma predeterminada.

artículo> * {
    columna de cuadrícula: 2;
}

Ahora tenemos el siguiente resultado:

Podemos ver instantáneamente que esto se ve mejor, ya que el espacio en blanco en cada lado hace que el texto sea más fácil de leer.

Sin embargo, este efecto podría haberse logrado con la misma facilidad al configurar la propiedad de margen izquierdo y derecho en automático. Entonces, ¿por qué usar CSS Grid?

Bueno, el problema surge cuando queremos imitar las características de imagen de Medium. Por ejemplo, creando imágenes de ancho completo, como esta:

Si hubiéramos usado el margen: 0 automático, esto nos habría obligado a aplicar márgenes negativos a las imágenes para que ocupen todo el ancho del sitio web, lo cual es hacky.

Sin embargo, con CSS Grid, esto se convierte en pan comido, ya que simplemente usaremos columnas para establecer el ancho. Para que nuestra imagen ocupe todo el ancho, solo diremos que abarca desde la primera hasta la última línea de columna.

artículo> figura {
    columna de cuadrícula: 1 / -1;
    margen: 20px 0;
}

También hemos establecido un margen en la parte superior e inferior. Y luego tenemos una bonita imagen de ancho completo:

Expandiendo con más columnas

Sin embargo, esto no nos ayuda hasta el final, ya que Medium tiene algunos otros diseños que debemos tener en cuenta. Veamos algunos de ellos:

Imágenes de tamaño medio

Esta es la opción de imagen entre la normal y la de ancho completo, que llamaremos de tamaño medio. Se parece a esto:

NOTA: Si está viendo en un dispositivo móvil, esta imagen es idéntica a la de ancho completo. En este artículo, nos centramos solo en el diseño del escritorio.

Esto requerirá al menos dos nuevas columnas para nuestro diseño.

Citas

Además, Medium también coloca una línea vertical en el lado izquierdo del artículo si agrega una cita:

← Observe la línea vertical. Tendremos que agregar una columna adicional a nuestra cuadrícula debido a eso.

Esto requiere una pequeña columna en el lado izquierdo de la cuadrícula. Para hacer las cosas simétricas, también agregaremos una columna similar en el lado derecho.

Entonces, para admitir tanto las comillas como las imágenes de tamaño medio, tendremos que dividir todo el ancho en siete columnas en lugar de tres, de esta manera:

artículo {
    pantalla: cuadrícula;
    cuadrícula-plantilla-columnas: 1fr 1fr 10px 740px 10px 1fr 1fr;
}

Si utilizamos el inspector de Chrome, podemos ver las líneas de cuadrícula subyacentes (ver imagen a continuación). Además, agregué punteros para que sea más fácil reconocer las diferentes columnas.

He agregado punteros para que sea más fácil reconocer las diferentes columnas.

Lo primero que debemos hacer es hacer que todos los elementos predeterminados comiencen en la cuarta línea de la columna en lugar de la segunda.

artículo> * {
    columna de cuadrícula: 4;
}

Entonces podemos crear la imagen de tamaño medio haciendo:

artículo> figura {
    columna de cuadrícula: 2 / -2;
    margen: 20px 0;
}

Así es como se ve con el inspector de Chrome activado:

Las citas se crean fácilmente haciendo lo siguiente:

artículo> blockquote {
    columna de cuadrícula: 3/5;
    relleno-izquierda: 10px;
    color: # 666;
    borde izquierdo: 3px negro sólido;
}

Hacemos que abarque desde la tercera hasta la tercera hasta la quinta línea de columna. También estamos agregando padding-left: 10px; para que el texto parezca comenzar en la cuarta línea de la columna (la tercera columna también tiene 10 píxeles de ancho). Así es como se ve en la cuadrícula.

Marcas secundarias

Ahora hay una última cosa que debemos apoyar. Medium tiene una forma bastante agradable de indicar qué contenido del artículo está más destacado. El texto se vuelve verde y obtiene un resaltado superior en el lado derecho.

Sería una pesadilla crear el elemento de texto destacado superior si utilizáramos el margen: 0 automático; en cambio si CSS Grid. Esto se debe a que el elemento actúa de manera diferente a todos los demás elementos del artículo. En lugar de aparecer en una nueva línea, se supone que debe aparecer en el lado derecho del elemento anterior. Si no usamos CSS Grid, probablemente tendríamos que comenzar a jugar con position: absolute; para hacer que esto funcione

Pero con CSS Grid es súper simple. Simplemente haremos que ese tipo de elemento comience en la cuarta línea de la columna.

.aside {
    columna de cuadrícula: 5;
}

Eso hará que se coloque automáticamente a la derecha del artículo:

Nota: no he resaltado el texto en verde, ya que eso no tiene nada que ver con CSS Grid.

¡Y eso es! Ahora hemos recreado la mayor parte del diseño del artículo de Medium usando CSS Grid. Y en realidad fue bastante fácil. Sin embargo, tenga en cuenta que no hemos tocado la capacidad de respuesta, ya que eso requiere un artículo completamente nuevo en sí mismo.

Echa un vistazo a este patio de recreo Scrimba para ver todo el código.

¡Gracias por leer! Mi nombre es Per, soy cofundador de Scrimba y me encanta ayudar a las personas a aprender nuevas habilidades. Sígueme en Twitter si deseas recibir notificaciones sobre nuevos artículos y recursos.