Question 320997 in CSS Question posted in
Some basic documentation can be found here.

CSS nested grid layout overflow issue

I have a grid within a grid. I am having issues where I can’t get the child div in this example to resize to fit the grid. I have tried to create a simple example of what I am trying to do. In reality I am building a React app where I am using grid areas and have many more parent containers and a lot more child divs. I want everything to have 2 columns so I don’t want to autofit the amount of columns. I just want the children to resize to fit the parent-grid. I want the entire thing to fit to the screen. Everything just keeps getting pushed down and nothing I change seems to fix things.

https://codepen.io/amy543/pen/ExMNZgV

any help would be really appreciated 🙂

I have tried making all the child divs 100% height and using 1fr for my grid layout but it the grid still seems to overflow.

.grid {
  display: grid;
  height: 100vh;
  width: 100vw;
  max-height: 100vh;
  max-width: 100vw;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 20px;
  background-color: lightblue;
  grid-template-areas: "area1 area2 area2" "area3 area4 .";
}

.parent-container {
  display: grid;
  flex-direction: column;
  background-color: green;
}

.parent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 10px;
  background-color: rgb(66, 77, 77);
}

.child {
  display: grid;
  background-color: red;
  padding: 20px;
}
<div class="grid">
  <div class="parent-container" style="grid-area: area1;">
    <h2>Grid1 Title </h2>
    <div class="parent-grid">
      <div class="child">
        <h2>ParentGrid1</h2>
        <p>Child1</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid1</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
    </div>
  </div>
  <div class="parent-container" style="grid-area: area2;">
    <h2>Grid2 Title </h2>
    <div class="parent-grid">
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child1</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid2</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
    </div>
  </div>
  <div class="parent-container" style="grid-area: area3;">
    <h2>Grid3 Title </h2>
    <div class="parent-grid">
      <div class="child">
        <h2>ParentGrid3</h2>
        <p>Child1</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid3</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
    </div>
  </div>
  <div class="parent-container" style="grid-area: area4;">
    <h2>Grid4 Title </h2>
    <div class="parent-grid">
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child1</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
      <div class="child">
        <h2>ParentGrid4</h2>
        <p>Child2</p>
        <div class="box"></div>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html, body {
    height: 100%; 
    margin: 0;
    padding: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: auto;
  gap: 5px;
  padding: 20px;
  background-color: lightblue;
  grid-template-areas:
    "area1 area2 area2"
    "area3 area4 .";
  height: 100%;
}

.parent-container {
  display: flex;
  flex-direction: column;
  background-color: green;
}

.parent-grid {
  display: grid;
  gap: 5px;
  padding: 10px;
  background-color: rgb(66, 77, 77);
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  flex-grow: 1;
}

.child {
  display: grid;
  background-color: red;
  height: 100%;
}
h2 ,p{
  font-size: 4vh;
}

    I figured it out by using pretty much with the code above.


  2. 0

    Any height or width that is not in proportion to the percentage and ratio causes problems.
    just remove these lines

    .grid {
/* height: 100vh; */
/* width: 100vw; */
/* max-height: 100vh; */
/* max-width: 100vw;*/
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search