Перепишите этот заголовок на русском языке, не меняя html-код, сделайте блоки адаптивными к содержимому. Только за счет стилей.

Вопрос или проблема

div {
  font-size: 20px;
  font-weight: bold;
}

.gl {
  display: grid;
  grid-template-columns: 500px 200px;
  gap: 20px;
}

.b_1 {
  aspect-ratio: 1;
  background: red;
}

.b_2 {
  background: blue;
}

.Content {
  background: #0caa27;
  padding: 10px;
}

<div class="gl">
  <div class="b_1">Блок_1</div>
  <div class="b_2">Блок_2</div>
  <div class="Content">Содержимое</div>
  <div class="News">Новости</div>
</div>

</div><div class="s-prose js-post-body" itemprop="text">

.sidebar {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}

<div class="b_1">Блок_1</div>
<div class="content">Содержимое</div>
<div class="sidebar">
  <div class="b_2">Блок_2</div>
  <div class="news">Новости</div>
</div>

body {
  background: #eee;
  font-size: 20px;
  font-weight: bold;
  margin: 1em;
  display: grid;
  grid-template-columns: 5fr 2fr;
  gap: 1em;
}

.b_1, .b_2, .content, .news {
  padding: 0.5em;
}

.b_1 {
  aspect-ratio: 1;
  background: red;
}

.b_2 {
  background: blue;
}

.sidebar {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.content {
  background: #0caa27;
}

<div class="b_1">Блок_1</div>
<div class="content">Содержимое</div>
<div class="sidebar">
  <div class="b_2">Блок_2 Блок_2 Блок_2 Блок_2 Блок_2 Блок_2 Блок_2 Блок_2 Блок_2 Блок_2 Блок_2 Блок_2 Блок_2</div>
  <div class="news">Новости</div>
</div>

div {
  font-size: 20px;
  font-weight: bold;
}

.gl {
  display: grid;
  grid-template-columns: 500px 200px;
  grid-template-rows: repeat(4,auto); /* 4 строки с автоматической высотой */
  align-content: start; /* убедитесь, что строки имеют автоматическую высоту */
  gap: 20px;
}

.b_1 {
  aspect-ratio: 1;
  grid-row: span 3; /* занимает 3 строки */
  background: red;
}

.b_2 {
  background: blue;
  grid-area: 1/2; /* 1 строка, 2 колонка */
}
.News {
  grid-area: 2/2; /* 2 строка, 2 колонка */
}

.Content {
  background: #0caa27;
  padding: 10px;
  grid-column: 1;
}

<div class="gl">
  <div class="b_1">Блок_1</div>
  <div class="b_2">Блок_2</div>
  <div class="Content">Содержимое</div>
  <div class="News">Новости</div>
</div>

Ответ или решение

Чтобы сделать блоки адаптивными к содержимому без изменения HTML-кода, можно использовать CSS. Вот примеры стилей, которые позволят настроить отображение блоков так, чтобы синий блок был по высоте своего содержимого, а новостной блок прижимался к синему блоку или находился на одном уровне с красным блоком в случае, если синий блок отсутствует.

Для этого можно применить следующие стили:

.gl {
  display: grid;
  grid-template-columns: 500px 200px;
  grid-template-rows: auto; /* Автоматическая высота для строк */
  gap: 20px;
}

.b_1 {
  aspect-ratio: 1; 
  background: red;
  grid-row: span 3; /* блок занимает 3 строки */
}

.b_2 {
  background: blue; 
  align-self: start; /* Синий блок будет по высоте содержимого и прижмется к верхней части ячейки */
}

.Content {
  background: #0caa27;
  padding: 10px; 
  grid-column: 1; 
}

.News {
  grid-column: 2; /* Размещаем новостной блок во 2 колонке */
  grid-row: 2; /* Размещаем новостной блок на 2 строке */
}

Пояснение к коду:

1. Сетка (Grid Layout): Используется grid для управления расположением элементов, что позволяет более точно контролировать размеры и расположение блоков в сетке.

2. Автоматические строки: С помощью grid-template-rows: auto; высота строк будет зависеть от содержания этих строк, что дает адаптивность.

3. Аспектное соотношение: У блока .b_1 задается aspect-ratio: 1, что делает его квадратным и позволяет занимать три строки.

4. Контроль выравнивания: Синий блок (.b_2) будет занимать пространство, равное его содержимому, благодаря align-self: start;, что означает, что он будет прижиматься к верхней части своей ячейки.

5. Новостной блок: Блок .News, находящийся в той же колонке, что и синий, будет располагаться под ним или на одном уровне с красным блоком, если синий блок отсутствует.

Таким образом, предложенное решение позволяет добиться желаемого результата, где высота синих блоков адаптируется под содержимое, и новостной блок размещается корректно, не требует изменения HTML-кода.