Блог

я хочу получить отзывчивую высоту по отношению к моему контенту.

например, высота, соответствующая тексту внутри

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;titlegt;Documentlt;/titlegt;   lt;!-- LINK ZU CSS FILES--gt;  lt;link rel="stylesheet" href="css/basic.css"gt;  lt;link rel="stylesheet" href="css/main.css"gt;  lt;/headgt; lt;bodygt;  lt;div class="container1"gt;  lt;div class="grid-container"gt;    lt;div class="header"gt;headerlt;/divgt;  lt;div class="menu"gt;menult;/divgt;    lt;div class="content-1"gt;5lt;/divgt;  lt;div class="content-2" gt;  lt;p class="content-text" gt;lorem500lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/bodygt; lt;/htmlgt;  

и css:

 *,*::before,*::after {  box-sizing: border-box; }  .grid-container {    display: grid;  grid-template-columns: repeat(8, 1fr);  grid-auto-rows: 100px;  grid-gap: 5px;  grid-template-areas:   '. header-text header-text header-text header-text menu menu .'  '. content-1 content-1 content-1 content-1 content-1 content-1 .'  'content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2'; }  .header {  grid-area: header-text; }  .menu {  grid-area: menu; } .content-1 {  grid-area: content-1; }  .content-2 {  grid-area: content-2;  min-height: 100vh; }  

я попробовал опцию минимальной высоты для контейнера content-2, но я не знаю, где я ошибся. может быть, у вас есть какие-нибудь другие советы и хитрости, как я мог бы справиться с этой штукой? 4 все ответы и подсказки

Я решил проблему с помощью

 .content-2 {  grid-area: content-2;  height: fit-content; }  

«fit-контент» решил проблему. Мой контейнер-2 растягивается относительно содержимого-текста внутри моего содержимого-2