Css Grid. При добавлении контента в любой див, все остальные дивы расширяются

@iwarhill · Регистрация: 14.08.2017

Author24 — интернет-сервис помощи студентам

Суть в чем. Надо чтобы блоки расширялись только в том случае, когда в них есть контент. Запутался я в этих колонках и линиях(.

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
 
 
<div class="grid-container">
    
 
<div class="header">HEADER</div>
 
<div class="sidebar">SIDEBAR
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur molestiae facilis, eum sit! Fugiat iusto repellat harum fugit quis aliquam ut perferendis, aspernatur vel. Ut repellendus, voluptates, deleniti dolorem at suscipit corrupti minus beatae facilis veniam nobis cupiditate culpa velit! Ut sed, perferendis, nam a illo aperiam pariatur fuga, esse quis eos consequuntur quia, amet dignissimos! Doloribus eos cumque deleniti ipsam odio autem laborum debitis. Fugit quaerat aliquid modi debitis, pariatur velit incidunt minus ducimus, ad iste nam asperiores eaque nisi dolores et tenetur voluptas distinctio, deserunt, itaque id eligendi nesciunt! Numquam odit minima labore esse, dolorem, laborum nihil optio!</p>
 
 
</div>
<div class="search">SEARCH</div>
<div class="content">MAIN</div>
 
<div class="footer">FOOTER</div>
 
</div>
 
 
 
 
 
    
</body>
</html>

CSS

body{
font-family: Verdana;
font-size: 12px;    
}
.grid-container{
display: grid;  
grid-template-columns: 10% 250px 1fr 1fr 10%;
grid-template-rows: 35px 1fr 1fr 35px;
grid-gap: 10px;
grid-template-areas: 
 
"header header  header   header  header"
 
".      sidebar search   search  ."
 
".      .       content  content ."
 
"footer footer  footer   footer  footer ";
 
}
 
.header{
padding: 10px;
background: #ff0000;
grid-area: header;
}
 
.sidebar{   
padding: 10px;
background: #ff00ff;
grid-area: sidebar;
}
 
.search{
padding: 10px;
background: #0000ff;
grid-area: search;  
}
 
.content{
padding: 10px;
background: #0000ff;
grid-area: content;
}
 
.footer{
padding: 10px;
background: #ff0000;
grid-area: footer;
}
 
 
@media screen and (max-width: 768px) {
 
.grid-container{
display: grid;
grid-template-areas: 
 
"header header header header header"
"sidebar sidebar sidebar sidebar sidebar"
"search search search search search"
"main main main main main"
"footer footer footer footer footer";
}
    
}

@Htext · 23.09.2017, 21:33

Сообщение от iwarhill

Надо чтобы блоки расширялись только в том случае, когда в них есть контент.

Пока код не смотрел. Но, в общем случае, если Вам надо именно так, то это делается через таблицы. Т.е. задаете

HTML5

1	<div style="display:table-cell">контент</div>

Именно таблицы (точнее, их ячейки) дают возможность динамически изменять ширину блоков - в зависимости от содержимого.

	23.09.2017, 21:33