Я бы подготовил макет блога с использованием CSS Grid. В настоящее время я пытаюсь указать динамический максимум красного элемента (будут сообщения). Я думаю, что это должно иметь автоматическое сворачивание строк, зависит от содержимого (он не может изменить размер правой колонки). К сожалению, я не знаю, как написать это правило.
Я оставляю на своем Codepen виртуальное правило для установки конца строки = 19. Он показывает окончательный вид, но не динамический. Я знаю, что красный и зеленый элемент находятся в одном ряду, и это, вероятно, сложно.
Если у вас есть идея, пожалуйста, поделитесь со мной. Привет! * * 1005
https://codepen.io/SeboFE/pen/zXBrQx
html, body{
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
}
/* fw = full width */
.grid-12-col-fw{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 20px;
}
/* For visualize layout grid */
.item{
/* width: 100%; */
height: 100%;
background-color: aqua;
}
.top-fullwidth-navbar{
/* width: 100vw; */
min-height: 8vh;
max-height: 10vh;
padding: 0.4rem;
grid-column-start: 1;
grid-column-end: -1;
align-items: center;
background-color: blue;
}
.filter-component{
grid-column-start: 2;
grid-column-end: 9;
grid-row-start: 2;
grid-row-end: 3;
padding: 0.4rem;
background-color: pink;
}
.current-date-component{
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 9;
grid-column-end: -2;
padding: 0.4rem;
background-color: purple;
}
.posts-component{
height: 1000px;
grid-row-start: 3;
grid-row-end: 10;
grid-column-start: 2;
grid-column-end: 9;
padding: 0.4rem;
background-color: red;
}
.popular-posts-component{
grid-row-start: 3;
grid-column-start: 9;
grid-column-end: -2;
padding: 0.4rem;
background-color: green;
}
.choosed{
grid-row-start: 4;
grid-column-start: 9;
grid-column-end: -2;
padding: 0.4rem;
background-color: orange;
}
.subscribe{
grid-row-start: 5;
grid-column-start: 9;
grid-column-end: -2;
padding: 0.4rem;
background-color: gray;
}
<html>
<body>
<div class="grid-12-col-fw">
<div class="top-fullwidth-navbar item">NAV</div>
<div class="filter-component"></div>
<div class="current-date-component" ></div>
<div class="posts-component"></div>
<div class="popular-posts-component"></div>
<div class="choosed"></div>
<div class="subscribe"></div>
</div>
</body>
</html>