Search code examples
cssflexboxcss-grid

Special grid or flexbox layout: Issues with inserting text in boxes

I worked for a few hours on this:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100vw;
  height: 100vh;
}

body {
  background-color: blue;
}

.content {
  padding: 27px;
  grid-column-gap: 27px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.area {
  overflow: scroll;
  width: 100%;
  background-color: white;
  height: calc(100vh - 27px * 2);
}

.left_area {
  grid-column-start: 1;
  grid-column-end: 6;
}

.right_area {
  grid-column-start: 6;
  grid-column-end: 11;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.top_right_area {
  grid-column-start: 2;
  grid-column-end: 6;
  height: calc(200% - 27px);
}

.bottom_right_area {
  bottom: 0;
  grid-column-start: 1;
  grid-column-end: 11;
  height: 200px;
  align-self: end;
}
<div class="content">

  <div class="area left_area">
  </div>

  <div class="right_area">

    <div class="area top_right_area">
    </div>

    <div class="area bottom_right_area">
    </div>

  </div>

</div>

This is how it should look like: enter image description here In the white boxes should be text.

The problem is: If you insert text in the areas, it destroys the layout. The text should be scrollable. I also tried to do it with flexbox, but I didn't find a solution.

Would be so thankful for help!

Solution

  • Your code is a bit complex. You can simplify it like below:

    body {
  background-color: blue;
  margin: 0;
}

.content {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 27px;
  height: 100vh;
  padding: 27px;
  box-sizing:border-box;
}

.content > * {
  overflow: auto;
  background-color: white;
  grid-column:span 5;
}

.left_area {
  grid-row:span 2;
}

.top_right_area {
  grid-column:span 4/-1;
}
    <div class="content">
  <div class="left_area">
  Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy. Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</div>
  
  <div class="top_right_area">
  Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.</div>

  <div class="bottom_right_area">
  Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy. 
  Lorem ipsum dolor amet tousled viral art party blue bottle single-origin coffee cardigan, selvage man braid helvetica. Banh mi taxidermy meditation microdosing. Selvage cornhole YOLO, small batch vexillologist raclette VHS prism sustainable 8-bit ugh semiotics letterpress disrupt pop-up. Celiac shabby chic ugh, jianbing whatever kitsch tattooed edison bulb kogi irony etsy.
</div>
</div>