Как сверстать такое расположение блоков?
Желательно на флексах, чтобы они уходили друг под друга при сжатии окна.
Можно сделать флексами и медиа вот так:
body {
font-family: sans-serif;
color: whitesmoke;
background: #0a0a0a;
}
.title {
display: inline;
font-weight: 600;
}
.list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
max-height: 100vh;
width: 100%;
}
.item {
width: 200px;
height: 150px;
background-color: gray;
}
@media (max-width: 450px) {
.list {
max-height: none;
}
}
<div class="list">
<h1 class="title">Наши работы:</h1>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<a href="#">Еще работы ---></a>
</div>
body {
margin: 0;
padding: 0;
background-color: #eaeaea;
}
.list {
box-sizing: border-box;
padding: 40px 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.box {
width: calc(50% - 5px);
height: 100px;
background-color: #acacac;
border-radius: 10px;
}
.box:nth-child(even) {
position: relative;
top: -20px;
}
<div class="list">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>