66 lines
2.3 KiB
Markdown
66 lines
2.3 KiB
Markdown
---
|
|
title: Responsive image mosaic
|
|
tags: layout,intermediate
|
|
---
|
|
|
|
Creates a responsive image mosaic.
|
|
|
|
- Use `display: grid` to create an appropriate responsive layout.
|
|
- Use `grid-row: span 2 / auto` and `grid-column: span 2 / auto` to create items that span two rows or two columns respectively.
|
|
- Wrap the previous styles into a media query to avoid applying on small screen sizes.
|
|
|
|
```html
|
|
<div class="image-mosaic">
|
|
<div class="card card-tall card-wide" style="background-image:url('https://picsum.photos/id/564/1200/800')"></div>
|
|
<div class="card card-tall" style="background-image:url('https://picsum.photos/id/566/800/530')"></div>
|
|
<div class="card" style="background-image:url('https://picsum.photos/id/575/800/530')"></div>
|
|
<div class="card" style="background-image:url('https://picsum.photos/id/626/800/530')"></div>
|
|
<div class="card" style="background-image:url('https://picsum.photos/id/667/800/530')"></div>
|
|
<div class="card" style="background-image:url('https://picsum.photos/id/678/800/530')"></div>
|
|
<div class="card card-wide" style="background-image:url('https://picsum.photos/id/695/800/530')"></div>
|
|
<div class="card" style="background-image:url('https://picsum.photos/id/683/800/530')"></div>
|
|
<div class="card" style="background-image:url('https://picsum.photos/id/693/800/530')"></div>
|
|
<div class="card" style="background-image:url('https://picsum.photos/id/715/800/530')"></div>
|
|
<div class="card" style="background-image:url('https://picsum.photos/id/610/800/530')"></div>
|
|
<div class="card" style="background-image:url('https://picsum.photos/id/599/800/530')"></div>
|
|
</div>
|
|
```
|
|
|
|
```css
|
|
.image-mosaic {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
grid-auto-rows: 240px;
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #353535;
|
|
font-size: 3rem;
|
|
color: #fff;
|
|
box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
transition: all 500ms;
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
@media screen and (min-width: 600px) {
|
|
.card-tall {
|
|
grid-row: span 2 / auto;
|
|
}
|
|
|
|
.card-wide {
|
|
grid-column: span 2 / auto;
|
|
}
|
|
}
|
|
```
|