Нужно мне сверстать такой блок я попробовал использовать CSS GRID получилось, но не знаю стоит уже использовать уже на реальных проектах решил и на flexbox сделать но не пойму как правильно раскидать на flexbox блоки?
Подкиньте идею
.grid {
display: grid;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
max-width: 75rem;
margin: 0 auto;
}
.categories {
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.catblock {
min-height: 32vh;
padding: 10px;
}
.catblock:nth-child(1) {
grid-column: 1/3;
grid-row: 1/6;
border: 1px solid red;
}
.catblock:nth-child(2) {
grid-row: 1/2;
border: 1px solid green;
}
.catblock:nth-child(3) {
border: 1px solid blue;
}
.catblock:nth-child(4) {
grid-column: 3/5;
border: 1px solid #222;
grid-row: 2/6;
}
.catblock:nth-child(5) {
grid-column: 1/3;
border: 1px solid #dddddd;
}
.catblock:nth-child(6) {
border: 1px solid #666;
}
.catblock:nth-child(7) {
border: 1px solid #777;
}
.categoryItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 75rem;
margin: auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.category__items {
border: 1px solid #111;
min-height: 32vh;
padding: 10px;
}
.category__items:nth-child(1) {
width: 50%;
height: 400px;
}
.category__items:nth-child(2) {
width: 25%;
height: 200px;
}
.category__items:nth-child(3) {
width: 25%;
height: 200px;
}
.category__items:nth-child(4) {
width: 50%;
}
.category__items:nth-child(5) {
width: 50%;
}
.category__items:nth-child(6) {
width: 25%;
}
.category__items:nth-child(7) {
width: 25%;
}
<div class="categories grid">
<div class="catblock"><a href="">Ведущие диджеи 1</a></div>
<div class="catblock">Ведущие диджеи 2</div>
<div class="catblock">Ведущие диджеи 3</div>
<div class="catblock"><a href="">Ведущие диджеи 4</a></div>
<div class="catblock"><a href="">Ведущие диджеи 5</a></div>
<div class="catblock"><a href="">Ведущие диджеи 6</a></div>
<div class="catblock"><a href="">Ведущие диджеи 7</a></div>
</div>
<hr>
<hr>
<div class="categoryItem">
<div class="category__items"><a href="">Ведущие диджеи 1</a></div>
<div class="category__items">Ведущие диджеи 2</div>
<div class="category__items">Ведущие диджеи 3</div>
<div class="category__items"><a href="">Ведущие диджеи 4</a></div>
<div class="category__items"><a href="">Ведущие диджеи 5</a></div>
<div class="category__items"><a href="">Ведущие диджеи 6</a></div>
<div class="category__items"><a href="">Ведущие диджеи 7</a></div>
</div>