post. masonry layout with three lines of css

Author: samdevega

public/images/masonry_before.png

@@ -0,0 +1,47 @@
+---
+title: "Masonry Layout with three lines of CSS"
+pubDate: 2025-06-04T22:30:00Z
+tags: ['css']
+---
+The masonry layout consists of a group of elements of unequal size, arranged in such a way that there are no uneven gaps. A clear example is the Metro menu in Microsoft Windows.
+
+The following code example shows a set of images of different sizes.
+
+```html
+<div>
+  <img src="https://picsum.photos/seed/random10/320/400.jpg" />
+  <img src="https://picsum.photos/seed/random20/300/400.jpg" />
+  <img src="https://picsum.photos/seed/random30/400/400.jpg" />
+  <img src="https://picsum.photos/seed/random40/400/320.jpg" />
+  <img src="https://picsum.photos/seed/random50/400/300.jpg" />
+  <img src="https://picsum.photos/seed/random60/400/400.jpg" />
+  <img src="https://picsum.photos/seed/random70/320/400.jpg" />
+  <img src="https://picsum.photos/seed/random80/300/400.jpg" />
+  <img src="https://picsum.photos/seed/random90/400/400.jpg" />
+  <img src="https://picsum.photos/seed/random100/320/400.jpg" />
+  <img src="https://picsum.photos/seed/random110/400/300.jpg" />
+</div>
+```
+
+This is what the images initially look like on screen:
+![Example before the CSS](/images/masonry_before.png)
+
+The three lines of CSS to apply are the `column`, `gap` and `width` properties.
+
+```css
+div {
+  columns: 320px;
+  gap: 4px;
+}
+img {
+  width: 100%;
+}
+```
+
+This is what the images look like after applying them:
+![Example after the CSS in landscape](/images/masonry_landscape.png)
+
+The design even adapts to different screen sizes and orientations:
+![Example after the CSS in portrait](/images/masonry_portrait.png)
+
+Thanks to the advances of CSS, a complex design that previously required multiple lines of CSS, in addition to the use of JavaScript, can now be implemented with just a few lines of CSS.

public/images/masonry_landscape.png

@@ -0,0 +1,47 @@
+---
+title: "Masonry Layout con tres líneas de CSS"
+pubDate: 2025-06-04T22:30:00Z
+tags: ['css']
+---
+El masonry layout consiste en un grupo de elementos de tamaño desigual, dispuestos de forma que no haya espacios desiguales. Un claro ejemplo es el menú Metro de Microsoft Windows.
+
+El siguiente ejemplo de código muestra un conjunto de imágenes de diferentes tamaños.
+
+```html
+<div>
+  <img src="https://picsum.photos/seed/random10/320/400.jpg" />
+  <img src="https://picsum.photos/seed/random20/300/400.jpg" />
+  <img src="https://picsum.photos/seed/random30/400/400.jpg" />
+  <img src="https://picsum.photos/seed/random40/400/320.jpg" />
+  <img src="https://picsum.photos/seed/random50/400/300.jpg" />
+  <img src="https://picsum.photos/seed/random60/400/400.jpg" />
+  <img src="https://picsum.photos/seed/random70/320/400.jpg" />
+  <img src="https://picsum.photos/seed/random80/300/400.jpg" />
+  <img src="https://picsum.photos/seed/random90/400/400.jpg" />
+  <img src="https://picsum.photos/seed/random100/320/400.jpg" />
+  <img src="https://picsum.photos/seed/random110/400/300.jpg" />
+</div>
+```
+
+Así es como se ven inicialmente las imágenes en la pantalla:
+![Ejemplo antes del CSS](/images/masonry_before.png)
+
+Las tres líneas de CSS a aplicar son las propiedades `column`, `gap` y `width`.
+
+```css
+div {
+  columns: 320px;
+  gap: 4px;
+}
+img {
+  width: 100%;
+}
+```
+
+Así es como se ven las imágenes después de aplicarlas:
+![Ejemplo tras el CSS en horizontal](/images/masonry_landscape.png)
+
+El diseño incluso se adapta a diferentes tamaños y orientaciones de pantalla:
+![Ejemplo tras el CSS en vertical](/images/masonry_portrait.png)
+
+Gracias a los avances de CSS, un diseño complejo que antes requería múltiples líneas de CSS, además del uso de JavaScript, ahora se puede implementar con solo unas pocas líneas de CSS.