Я пытаюсь создать страницу биографии с простым текстом и хочу, чтобы мой текст заполнил все пустое пространство.Я хочу использовать CSS GRID для этого проекта, не хочу иметь дело с поплавками.Я добавлю изображение, чтобы показать вам, как я хочу выглядеть и где моя проблема, может быть, кто-то будет знать, как исправить.Я не написал в этом HTML все строки, потому что это много.Но вы можете видеть на изображении.
Я знаю, что использовал 2 элемента span в одном месте, но я хотел показать вам, как я хочу, чтобы мой текст заполнил пустое пространство.
Пожалуйста, не стесняйтесь показывать мне другие примеры с методами, чтобы текст заполнял все пробелы.
.bio-content {
display: grid;
margin-top: 10rem;
grid-template-columns: 3fr;
grid-template-rows: 3fr;
}
.bio-content .info-img {
margin-left: 1.5rem;
grid-column: 1/2;
grid-row: 1/2;
}
.bio-content .biography,
.bio-content biography2 {
margin-left: 2rem;
margin-bottom: 0rem;
line-height: 30px;
color: white;
border-left: none;
padding: 0 1rem;
}
.bio-content .biography {
grid-column: 2/4;
grid-row: 1/4;
}
.bio-content .biography2 {
grid-column: 1/4;
grid-row: 3/4;
}
.bio-content table {
grid-row: 2/3;
grid-column: 1/2;
}
/* G-CYR : I added bg to see white text */
body {background:gray;}
<main id="bio">
<div class="container">
<div class="bio-content">
<div class="info-img">
<img src="/Core/img/bio.jpg" alt="">
<table>
<tr>
<td>NAME:</td>
<td>LAZAR ANGELOV</td>
</tr>
<tr>
<td>HEIGHT:</td>
<td>6"0(180 CM)</td>
</tr>
<tr>
<td>WEIGHT:</td>
<td>195 LBS(88 KG)</td>
</tr>
<tr>
<td>DATE OF BIRTH:</td>
<td>SEPTEMBER 22ND, 1984</td>
</tr>
<tr>
<td>BIRTHPLACE:</td>
<td>SOFIA,BULGARIA</td>
</tr>
</table>
</div>
<div class="biography">
<h1>Biography</h1>
<p>Before becoming a bodybuilder and a personal point guards of his class. At the age of 16 he bodies.</p>
<p> He dedicated his life to bodybuilding and since Lazar dominates other bodybuilders with balanced physique and incredible definition.</p>
</div>
<div class="biography2">
<p>
<p>He owns some of the best abs in the world. As a personal trainer he has been able to transform the chance to receive everything needed for reaching the maximum physical potential without using steroids.</p>
</div>
</div>
</div>
</main>
РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ Я попытался удалить строку сетки и определить .biography2 grid-row: 4/4;и, кажется, не работает так, как я хочу ... Пожалуйста, посмотрите на последнее изображение. Это остается белым пробелом под изображением 