Boletín informativo para desarrolladores

Recibe las últimas noticias, técnicas y actualizaciones directamente en tu bandeja de entrada.

Ediciones anteriores

Lee las ediciones anteriores del boletín informativo mensual para desarrolladores web

Este es un diseño común para los sitios de marketing, por ejemplo, que pueden tener una fila de tres elementos, por lo general, con una imagen, un título y, luego, un texto que describe algunas características de un producto. En pantallas más

Con la propiedad aspect-ratio, a medida que cambias el tamaño de la tarjeta, el bloque visual verde mantiene esta relación de aspecto de 16 × 9. Respetamos la relación de aspecto con aspect-ratio: 16 / 9. Para mantener una relación de aspecto de 16:9

This demo uses container queries to create an intrinsic, responsive card. The card goes from a single-column layout at more narrow sizes to a two-column layout when it is at wider sizes. To create the container, first set containment on the parent:

A centering technique that only aligns content and doesn't change their size during the process. See the full article for many more details about this technique and when it's efficient. Full article · Video on YouTube · Source on Github

A centering technique where an element pushes equally from all edges of a flex container. Best for quick centering for single items only. See the full article for many more details about this technique and when it's efficient. Full article · Video on

Unlike the deconstructed pancake, this example does not wrap its children when the screen size changes. Commonly referred to as a sticky footer, this layout is used for both websites and apps, across mobile applications (the footer is commonly a

In this demo, you are setting the width using clamp() like so: width: clamp(<min>, <actual>, <max>). This sets an absolute min and max size, and an actual size. With values, that can look like: The minimum size here is 23ch or 23

For this seventh example, combine some of the concepts you've already learned about to create a responsive layout with automatically-placed and flexible children. Pretty neat. The key terms to remember here are repeat, auto-(fit|fill), and minmax(),

For this classic holy grail layout, there is a header, footer, left sidebar, right sidebar, and main content. It's similar to the previous layout, but now with sidebars! To write this entire grid using a single line of code, use the grid-template

A centering technique that puts the content in the center via equal padding around all its sides. See the full article for many more details about this technique and when it's efficient. Full article · Video on YouTube · Source on Github

The main point demonstrated here is the use of justify-content: space-between, which places the first and last child elements at the edges of their bounding box, with the remaining space evenly distributed between the elements. For these cards, they

Use place-items: center to center an element within its parent. This enables the content to be perfectly centered within the parent, regardless of intrinsic size.