CSS Grid layout for dynamic content - css

Question

I wonder how can I set (with CSS grid only) layout for content that could be dynamic.
Let's say I have a Header, Body, and a sidebar.
the sidebar can be displayed, or not.
How can I apply such behaviour with CSS grid?
I want the header and the chart content to stretch over the .sidebar area when the .sidebar is not displayed
// Comment OR uncomment the .sidebar HTML tag
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
}
.wrapper {
background: #fed;
height: 100%;
display: grid;
grid-template-columns: auto 300px;
grid-template-rows: 80px auto;
grid-auto-rows: 100px;
grid-template-areas:
"header sidebar"
"chart sidebar";
}
.header {
background: hotpink;
grid-column: 1/ 2;
grid-row: 1 /1;
overflow: auto;
}
.chart {
background: lightblue;
grid-column: 1/ 2;
grid-row: 2 / 2;
}
.sidebar {
background: rgba(255, 209, 62, 0.7);
grid-column: 2/ 2;
grid-row: 1 /span 2;
}
<div class="wrapper">
<div class="header"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio officiis deserunt cum, iusto veniam, perspiciatis atque dolore eum ab. Accusamus ratione repellat, laboriosam magnam exercitationem illum tempore quidem nam eveniet!</div>
<div>Iste nobis eveniet quibusdam aspernatur necessitatibus dolore perspiciatis fuga, quaerat ipsum minus eum placeat iure quas! Adipisci optio fugit laudantium voluptatem maiores, reiciendis laboriosam cupiditate blanditiis, quia consequatur voluptas! Nihil.</div>
<div>Nam dolorem atque, maxime ipsa aspernatur quo eveniet necessitatibus, dignissimos incidunt, sapiente quas eius tempore provident rem accusantium explicabo quia. Suscipit dolorem quo, voluptatum corporis. Enim minus repellat iure illum.</div>
<div>Ad voluptas, hic a vitae recusandae sit dignissimos beatae nemo eaque iusto culpa repudiandae quas asperiores repellendus nesciunt mollitia atque pariatur, reprehenderit rerum. Perspiciatis quod blanditiis deserunt iure consectetur tempore.</div>
<div>Placeat id, non quos incidunt rem, cumque, enim quidem consectetur obcaecati, dolor nihil beatae! Officiis necessitatibus nobis esse quaerat! Consectetur maiores praesentium libero hic at rem iste, assumenda vitae aperiam.</div>
<div>Illo tenetur libero nemo perspiciatis, quisquam minima sequi voluptate, dignissimos maiores hic aliquam et nobis quo iure, doloribus inventore repudiandae assumenda. Ad labore, quas alias explicabo excepturi saepe ullam repellendus!</div>
<div>Sint iure, hic quis eaque, deleniti asperiores quasi obcaecati cumque modi, iste laborum? Unde fugit quos itaque, molestias dolorum vero distinctio iste nisi ex repellat ut, voluptatem, ratione consectetur nihil?</div>
<div>Laudantium veniam aliquam provident doloremque excepturi eveniet iste illo consequatur eaque aut, ad, quae fugiat molestiae vitae autem laboriosam nulla accusantium. Tempora necessitatibus natus adipisci ab non, nihil quasi corporis!</div>
<div>Explicabo cumque unde tempore nihil, id. Nobis, iure veniam, dignissimos ullam nemo cumque voluptates voluptate atque eius unde tempora et, eos porro quo aut debitis. Consequatur neque, quaerat quae deleniti.</div>
<div>Repellat doloribus ipsa officia, debitis aspernatur blanditiis sit dignissimos nesciunt cum. Perspiciatis molestiae distinctio quas magni similique, mollitia obcaecati modi est ab quasi, ut. Sit libero adipisci sint consectetur molestias.</div></div>
<div class="chart">chart</div>
<!-- Comment / uncomment the sidebar -->
<div class="sidebar">sidebar</div>
</div>

Answer 1

No need to define the area for the sidebar. You can define the template to be one column and then force the sidebar to be on a second column which will create that column only when the sidebar is there (you will have an implicit defined grid)
// Comment OR uncomment the .sidebar HTML tag
body {
padding: 0;
margin: 0;
}
.wrapper {
background: #fed;
min-height: 100vh;
display: grid;
grid-template-rows: 80px auto;
grid-auto-rows: 100px;
}
.header {
background: hotpink;
overflow: auto;
}
.chart {
background: lightblue;
}
.sidebar {
background: rgba(255, 209, 62, 0.7);
grid-column: 2/ 2;
grid-row: 1 /span 2;
width:300px;
}
<div class="wrapper">
<div class="header"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio officiis deserunt cum, iusto veniam, perspiciatis atque dolore eum ab. Accusamus ratione repellat, laboriosam magnam exercitationem illum tempore quidem nam eveniet!</div>
<div>Iste nobis eveniet quibusdam aspernatur necessitatibus dolore perspiciatis fuga, quaerat ipsum minus eum placeat iure quas! Adipisci optio fugit laudantium voluptatem maiores, reiciendis laboriosam cupiditate blanditiis, quia consequatur voluptas! Nihil.</div>
<div>Nam dolorem atque, maxime ipsa aspernatur quo eveniet necessitatibus, dignissimos incidunt, sapiente quas eius tempore provident rem accusantium explicabo quia. Suscipit dolorem quo, voluptatum corporis. Enim minus repellat iure illum.</div>
<div>Ad voluptas, hic a vitae recusandae sit dignissimos beatae nemo eaque iusto culpa repudiandae quas asperiores repellendus nesciunt mollitia atque pariatur, reprehenderit rerum. Perspiciatis quod blanditiis deserunt iure consectetur tempore.</div>
<div>Placeat id, non quos incidunt rem, cumque, enim quidem consectetur obcaecati, dolor nihil beatae! Officiis necessitatibus nobis esse quaerat! Consectetur maiores praesentium libero hic at rem iste, assumenda vitae aperiam.</div>
<div>Illo tenetur libero nemo perspiciatis, quisquam minima sequi voluptate, dignissimos maiores hic aliquam et nobis quo iure, doloribus inventore repudiandae assumenda. Ad labore, quas alias explicabo excepturi saepe ullam repellendus!</div>
<div>Sint iure, hic quis eaque, deleniti asperiores quasi obcaecati cumque modi, iste laborum? Unde fugit quos itaque, molestias dolorum vero distinctio iste nisi ex repellat ut, voluptatem, ratione consectetur nihil?</div>
<div>Laudantium veniam aliquam provident doloremque excepturi eveniet iste illo consequatur eaque aut, ad, quae fugiat molestiae vitae autem laboriosam nulla accusantium. Tempora necessitatibus natus adipisci ab non, nihil quasi corporis!</div>
<div>Explicabo cumque unde tempore nihil, id. Nobis, iure veniam, dignissimos ullam nemo cumque voluptates voluptate atque eius unde tempora et, eos porro quo aut debitis. Consequatur neque, quaerat quae deleniti.</div>
<div>Repellat doloribus ipsa officia, debitis aspernatur blanditiis sit dignissimos nesciunt cum. Perspiciatis molestiae distinctio quas magni similique, mollitia obcaecati modi est ab quasi, ut. Sit libero adipisci sint consectetur molestias.</div></div>
<div class="chart">chart</div>
<!-- Comment / uncomment the sidebar -->
<div class="sidebar">sidebar</div>
</div>
Without sidebar:
// Comment OR uncomment the .sidebar HTML tag
body {
padding: 0;
margin: 0;
}
.wrapper {
background: #fed;
min-height: 100vh;
display: grid;
grid-template-rows: 80px auto;
grid-auto-rows: 100px;
}
.header {
background: hotpink;
overflow: auto;
}
.chart {
background: lightblue;
}
.sidebar {
background: rgba(255, 209, 62, 0.7);
grid-column: 2/ 2;
grid-row: 1 /span 2;
width:300px;
}
<div class="wrapper">
<div class="header"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio officiis deserunt cum, iusto veniam, perspiciatis atque dolore eum ab. Accusamus ratione repellat, laboriosam magnam exercitationem illum tempore quidem nam eveniet!</div>
<div>Iste nobis eveniet quibusdam aspernatur necessitatibus dolore perspiciatis fuga, quaerat ipsum minus eum placeat iure quas! Adipisci optio fugit laudantium voluptatem maiores, reiciendis laboriosam cupiditate blanditiis, quia consequatur voluptas! Nihil.</div>
<div>Nam dolorem atque, maxime ipsa aspernatur quo eveniet necessitatibus, dignissimos incidunt, sapiente quas eius tempore provident rem accusantium explicabo quia. Suscipit dolorem quo, voluptatum corporis. Enim minus repellat iure illum.</div>
<div>Ad voluptas, hic a vitae recusandae sit dignissimos beatae nemo eaque iusto culpa repudiandae quas asperiores repellendus nesciunt mollitia atque pariatur, reprehenderit rerum. Perspiciatis quod blanditiis deserunt iure consectetur tempore.</div>
<div>Placeat id, non quos incidunt rem, cumque, enim quidem consectetur obcaecati, dolor nihil beatae! Officiis necessitatibus nobis esse quaerat! Consectetur maiores praesentium libero hic at rem iste, assumenda vitae aperiam.</div>
<div>Illo tenetur libero nemo perspiciatis, quisquam minima sequi voluptate, dignissimos maiores hic aliquam et nobis quo iure, doloribus inventore repudiandae assumenda. Ad labore, quas alias explicabo excepturi saepe ullam repellendus!</div>
<div>Sint iure, hic quis eaque, deleniti asperiores quasi obcaecati cumque modi, iste laborum? Unde fugit quos itaque, molestias dolorum vero distinctio iste nisi ex repellat ut, voluptatem, ratione consectetur nihil?</div>
<div>Laudantium veniam aliquam provident doloremque excepturi eveniet iste illo consequatur eaque aut, ad, quae fugiat molestiae vitae autem laboriosam nulla accusantium. Tempora necessitatibus natus adipisci ab non, nihil quasi corporis!</div>
<div>Explicabo cumque unde tempore nihil, id. Nobis, iure veniam, dignissimos ullam nemo cumque voluptates voluptate atque eius unde tempora et, eos porro quo aut debitis. Consequatur neque, quaerat quae deleniti.</div>
<div>Repellat doloribus ipsa officia, debitis aspernatur blanditiis sit dignissimos nesciunt cum. Perspiciatis molestiae distinctio quas magni similique, mollitia obcaecati modi est ab quasi, ut. Sit libero adipisci sint consectetur molestias.</div></div>
<div class="chart">chart</div>
<!-- Comment / uncomment the sidebar
<div class="sidebar">sidebar</div>
-->
</div>