CODEWITHSUNDEEP
javascriptcss
kfx
kfx

Reputation: 8537

CSS grid layout dynamic resizing

I have a grid layout with a workspace and two footers. All these elements have resize: vertical set in the CSS. When I resize the workspace (top element) the grid container itself resizes nicely. However, when I resize one the footers, there are two problems:

  1. Size of the grid container stays constant, it does not expand/contract.
  2. The size of the other footer does not change, so either the footers start to overlap each another or a blank space appears between them.

Desired behavior:

  1. When footer 1 is resized, footer 2 expands / contracts
  2. When footer 2 is resized, the grid container itself expands / contracts

I assume I need some JavaScript to achieve the desired behavior?

.grid-container {
    display: grid;
    border: 3px dotted red;
    grid-gap: 3px;
    grid-template-rows: 1fr 200px 200px;
    grid-template-columns: 1fr;
}

.workspace {
    grid-row-start: 1;
    grid-row-end: 1;
    border: 3px dotted blue;
    resize: vertical;
    overflow:scroll;
    height:200px;
}

#chart {
    height:1000px;
    width:1000px;
}

.footer1 {
    grid-row-start: 2;
    grid-row-end: 2;
    border: 3px dotted blue;
    overflow: scroll;
    resize: vertical;
}

.footer2 {
    grid-row-start: 3;
    grid-row-end: 3;
    border: 3px dotted blue;
    overflow: scroll;
    resize: vertical;
}
<div class="grid-container">
  <div class="workspace">
    <div id="chart"></div>
  </div>

  <div class="footer1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue placerat odio sed fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse luctus velit ipsum, vitae finibus metus auctor ut. Nullam ac elit quis turpis consectetur ultricies in consectetur massa.
  </div>
  <div class="footer2">&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;</div>
</div>

Upvotes: 0

Views: 3238

Answers (1)

Matan Sanbira
Matan Sanbira

Reputation: 1513

after a few testing, there's a problem. the grid-template-rows definition is tricky if you set 1fr 1f 1fr the first container dictates the height of both footer elements and their height resize won't affect the grid cell size. to answer your first problem, if you set it to auto 1fr 1fr the main container will resize independently and the grid will adjust, and the first footer dictates the second footer's height. the problem begins when you want to resize the 2nd footer and it gets a little buggy because the cells need to be in the same heigh. no straight forward solution but consider moving to flex-box or set all rows to auto.

Upvotes: 1

Related Questions