Skip to content

Commit 2257282

Browse files
samdevegasamdevega
committed
post. masonry layout with three lines of css
1 parent 72831c2 commit 2257282

File tree

5 files changed

+114
-0
lines changed

5 files changed

+114
-0
lines changed

‎public/images/masonry_before.png

100 KB
Loading

‎public/images/masonry_landscape.png

106 KB
Loading

‎public/images/masonry_portrait.png

255 KB
Loading

‎src/content/posts/en/masonry-layout-with-three-lines-of-css.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: "Masonry Layout with three lines of CSS"
3+
pubDate: 2025-06-04T22:30:00Z
4+
tags: ['css']
5+
---
6+
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.
7+
8+
The following code example shows a set of images of different sizes.
9+
10+
```html
11+
<div>
12+
<img src="https://picsum.photos/seed/random10/320/400.jpg" />
13+
<img src="https://picsum.photos/seed/random20/300/400.jpg" />
14+
<img src="https://picsum.photos/seed/random30/400/400.jpg" />
15+
<img src="https://picsum.photos/seed/random40/400/320.jpg" />
16+
<img src="https://picsum.photos/seed/random50/400/300.jpg" />
17+
<img src="https://picsum.photos/seed/random60/400/400.jpg" />
18+
<img src="https://picsum.photos/seed/random70/320/400.jpg" />
19+
<img src="https://picsum.photos/seed/random80/300/400.jpg" />
20+
<img src="https://picsum.photos/seed/random90/400/400.jpg" />
21+
<img src="https://picsum.photos/seed/random100/320/400.jpg" />
22+
<img src="https://picsum.photos/seed/random110/400/300.jpg" />
23+
</div>
24+
```
25+
26+
This is what the images initially look like on screen:
27+
![Example before the CSS](/images/masonry_before.png)
28+
29+
The three lines of CSS to apply are the `columns`, `gap` and `width` properties.
30+
31+
The CSS shorthand property `columns` sets the number of columns to use when drawing an element's content, as well as the width of those columns.
32+
33+
The CSS shorthand property `gap` defines the spaces between rows and columns. This property applies to multi-column, flexible, and grid containers.
34+
35+
The CSS `width` property defines the width of an element. By default, it defines the width of the content area, but if `box-sizing` is set to `border-box`, it defines the width of the border area.
36+
37+
```css
38+
div {
39+
columns: 320px;
40+
gap: 4px;
41+
}
42+
img {
43+
width: 100%;
44+
}
45+
```
46+
47+
These values ​​have been used for convenience. `columns: 320px`, `gap: 4px`, and `width: 100%` are equivalent to the Tailwind CSS classes `columns-xs`, `gap-1`, and `w-full`. The four pixel spacing is the default browser spacing between images when the `columns` property is not set. Giving images a width of 100% will make them fit properly within their column width.
48+
49+
Images now automatically reorder to fill the available space between them.
50+
51+
This is what the images look like after applying them:
52+
![Example after the CSS in landscape](/images/masonry_landscape.png)
53+
54+
The design even adapts to different screen sizes and orientations:
55+
![Example after the CSS in portrait](/images/masonry_portrait.png)
56+
57+
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.

‎src/content/posts/es/masonry-layout-with-three-lines-of-css.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: "Masonry Layout con tres líneas de CSS"
3+
pubDate: 2025-06-04T22:30:00Z
4+
tags: ['css']
5+
---
6+
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.
7+
8+
El siguiente ejemplo de código muestra un conjunto de imágenes de diferentes tamaños.
9+
10+
```html
11+
<div>
12+
<img src="https://picsum.photos/seed/random10/320/400.jpg" />
13+
<img src="https://picsum.photos/seed/random20/300/400.jpg" />
14+
<img src="https://picsum.photos/seed/random30/400/400.jpg" />
15+
<img src="https://picsum.photos/seed/random40/400/320.jpg" />
16+
<img src="https://picsum.photos/seed/random50/400/300.jpg" />
17+
<img src="https://picsum.photos/seed/random60/400/400.jpg" />
18+
<img src="https://picsum.photos/seed/random70/320/400.jpg" />
19+
<img src="https://picsum.photos/seed/random80/300/400.jpg" />
20+
<img src="https://picsum.photos/seed/random90/400/400.jpg" />
21+
<img src="https://picsum.photos/seed/random100/320/400.jpg" />
22+
<img src="https://picsum.photos/seed/random110/400/300.jpg" />
23+
</div>
24+
```
25+
26+
Así es como se ven inicialmente las imágenes en la pantalla:
27+
![Ejemplo antes del CSS](/images/masonry_before.png)
28+
29+
Las tres líneas de CSS a aplicar son las propiedades `columns`, `gap` y `width`.
30+
31+
La propiedad abreviada de CSS `columns` establece la cantidad de columnas que se utilizarán al dibujar el contenido de un elemento, así como el ancho de esas columnas.
32+
33+
La propiedad abreviada de CSS `gap` define los espacios entre filas y columnas. Esta propiedad se aplica a contenedores multicolumna, flexibles y de cuadrícula.
34+
35+
La propiedad CSS `width` define el ancho de un elemento. Por defecto, define el ancho del área de contenido, pero si `box-sizing` se establece en `border-box`, define el ancho del área del borde.
36+
37+
```css
38+
div {
39+
columns: 320px;
40+
gap: 4px;
41+
}
42+
img {
43+
width: 100%;
44+
}
45+
```
46+
47+
Se han utilizado esos valores por comodidad. `columns: 320px`, `gap: 4px` y `width: 100%` equivalen a las clases `columns-xs`, `gap-1` y `w-full` de Tailwind CSS. Los cuatro píxeles de separación es lo que aplica el navegador por defecto para separar las imágenes entre sí cuando no se aplica la propiedad `columns`. Dar un ancho del 100% a las imágenes hará que se adapten adecuadamente al ancho de su columna.
48+
49+
Ahora las imágenes se reordenan automáticamente para rellenar el espacio disponible entre ellas.
50+
51+
Así es como se ven las imágenes después de aplicarlas:
52+
![Ejemplo tras el CSS en horizontal](/images/masonry_landscape.png)
53+
54+
El diseño incluso se adapta a diferentes tamaños y orientaciones de pantalla:
55+
![Ejemplo tras el CSS en vertical](/images/masonry_portrait.png)
56+
57+
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.

0 commit comments

Comments
 (0)