69 lines
2.4 KiB
Markdown
69 lines
2.4 KiB
Markdown
---
|
|
title: Masonry Layout
|
|
tags: layout,advanced
|
|
---
|
|
|
|
Creates a vertical masonry layout using HTML and CSS.
|
|
|
|
- Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed `width` (vertical layout) or a fixed `height` (horizontal layout), forming a perfect fit. Especially useful when working with images.
|
|
- `.masonry-container` is the container for the masonry layout. Within that container, there's a `div.masonry-columns`, which will automatically put each child element, `.masonry-brick`, into the layout.
|
|
- `.masonry-brick` must be have `display: block` to allow the layout to flow properly, while the `:first-child` of this class should have a different `margin` to account for its positioning.
|
|
- CSS variables are used to allow for greater flexibility for the layout, while media queries ensure that the layout flows responsively in different viewport sizes.
|
|
|
|
```html
|
|
<div class="masonry-container">
|
|
<div class="masonry-columns">
|
|
<img class="masonry-brick" src="https://picsum.photos/id/1016/384/256" alt="An image">
|
|
<img class="masonry-brick" src="https://picsum.photos/id/1025/495/330" alt="Another image">
|
|
<img class="masonry-brick" src="https://picsum.photos/id/1024/192/128" alt="Another image">
|
|
<img class="masonry-brick" src="https://picsum.photos/id/1028/518/345" alt="One more image">
|
|
<img class="masonry-brick" src="https://picsum.photos/id/1035/585/390" alt="And another one">
|
|
<img class="masonry-brick" src="https://picsum.photos/id/1074/384/216" alt="Last one">
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
```css
|
|
/* Container */
|
|
.masonry-container {
|
|
--column-count-small: 1;
|
|
--column-count-medium: 2;
|
|
--column-count-large: 3;
|
|
--column-gap: 0.125rem;
|
|
padding: var(--column-gap);
|
|
}
|
|
|
|
/* Columns */
|
|
.masonry-columns {
|
|
column-gap: var(--column-gap);
|
|
column-count: var(--column-count-small);
|
|
column-width: calc(1 / var(--column-count-small) * 100%);
|
|
}
|
|
|
|
@media only screen and (min-width: 640px) {
|
|
.masonry-columns {
|
|
column-count: var(--column-count-medium);
|
|
column-width: calc(1 / var(--column-count-medium) * 100%);
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) {
|
|
.masonry-columns {
|
|
column-count: var(--column-count-large);
|
|
column-width: calc(1 / var(--column-count-large) * 100%);
|
|
}
|
|
}
|
|
|
|
/* Bricks */
|
|
.masonry-brick {
|
|
width: 100%;
|
|
height: auto;
|
|
margin: var(--column-gap) 0;
|
|
display: block;
|
|
}
|
|
|
|
.masonry-brick:first-child {
|
|
margin: 0 0 var(--column-gap);
|
|
}
|
|
```
|