1

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Hulke
  • 847
  • 5
  • 22

1 Answers1

2

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415