Когда я впервые работал с «display: grid», у меня были проблемы с вставкой контента в одну из сеток.
Что происходит? При сборке сеток все очень красиво и так, как мне нужно, но когда я вставляю текст в одну из них, она удлиняется и теряет весь макет. Почему это происходит и как это предотвратить?
.agrupou-a-grid {
display: grid;
grid-gap: 10px;
grid-template-columns: auto;
grid-template-rows: 50px 50px 50px 50px 50px;
grid-template-areas:
'a a b'
'c d b'
'e f f'
'g g h'
'i j j';
}
.agrupou-a-grid .box {
background: red;
}
<div class="agrupou-a-grid">
<div class="box gd1">
<div class="group-content">
<h2>Coleção em destaque</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure.
</p>
</div>
</div>
<div class="box gd2"></div>
<div class="box gd3"></div>
<div class="box gd4"></div>
<div class="box gd5"></div>
<div class="box gd6"></div>
<div class="box gd7"></div>
<div class="box gd8"></div>
<div class="box gd9"></div>
<div class="box gd10"></div>
</div>
Перед размещением текста
После размещения текста
