CSS grid with dynamic number of rows and adjustable width

Question

I am trying to create a dynamic grid layout with two columns that is #red-container and #green-container. Each container or column should be resizable horizontally and the main container #container should be resizable vertically. Resizing the container should adjust the height of the child elements. The #red-container and #green-container have cells which are added dynamically to the container with the JavaScript function in a row-wise fashion. I have the following working implementation:

function addCell(color) {
  let container = document.getElementById(color + "-container");
  
  let cell = document.createElement("div");
  cell.innerText = color;
  container.appendChild(cell).className = "container-item";
}

#container {
  border: 1px solid #ddd;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  height: 50vh;
  resize: vertical;
  overflow: auto;
}

#red-container {
  flex-grow: 1;
  display: grid;
  grid-auto-flow: row;
  margin: 10px;
  resize: horizontal;
  overflow: auto;
  border: 1px solid red;
}

#green-container {
  flex-grow: 1;
  display: grid;
  grid-auto-flow: row;
  margin: 10px; 
  resize: horizontal; 
  overflow: auto;
  border: 1px solid green;
}

.container-item {
  padding: 10px;
  border: 1px solid black;
}

<button onclick="addCell('red')">add red cell</button>
<button onclick="addCell('green')">add green cell</button>

<div id="container">
  <div id="red-container"></div>
  <div id="green-container"></div>
</div>

However, there are two problems with it:

The first time the user clicks add red cell it increases the width of #red-container.
adjusting the width of the red and green container is inconsistent and I am unable to adjust the width of the red container to less than 50% of the width.

Any ideas on how to fix these two problems? Additionally, any advice on writing the css in a more concise manner is welcome (#red-container and #green-container contain duplicate code).

Laaouatni Anas · Answer 1 · 2022-07-31T16:00:00.893

do these two things to solve the problem:

make the #container with grid-template-columns: 1fr 1fr; so whatever it happens, the child will be always half-width.

because if you want to use flex, it only grows to 1, but does not always mean half precisely, so go for grid layout

for not making repetitive code just make the two selectors in one by using , (comma)
#red-container, #green-container

not important but can help:

adding box-sizing: border-box for solving extra problems if you add padding or something similar
also don't write grid-auto-flow: row because grid is by default row
also use gap instead of margin, gap makes the same value of px between element on a grid/flex layout.
if you are using margin, then if you write for example 10px as a value you will get 20px

here the correct code:

function addCell(color) {
  let container = document.getElementById(color + "-container");

  let cell = document.createElement("div");
  cell.innerText = color;
  container.appendChild(cell).className = "container-item";
}

* {
  box-sizing: border-box;
}

#container {
  border: 1px solid #ddd;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 50vh;
  resize: vertical;
  overflow: auto;
  gap: 10px;
  /* if you want like before, here in gap: write 20px */
  padding: 10px;
}

#red-container,
#green-container {
  display: grid;
  resize: horizontal;
  overflow: auto;
}

#red-container {
  border: 1px solid red;
}

#green-container {
  border: 1px solid green;
}

.container-item {
  padding: 10px;
  border: 1px solid black;
}

<button onclick="addCell('red')">add red cell</button>
<button onclick="addCell('green')">add green cell</button>

<div id="container">
  <div id="red-container"></div>
  <div id="green-container"></div>
</div>

if you didn't understand something, write me a comment here, I will answer to you
however here some documentations that can help you:

grid-template-columns: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

gap: https://developer.mozilla.org/en-US/docs/Web/CSS/gap

Thanks, I have two questions. 1) is it possible to make west edge of `#green-container` follow the east edge of `#red-container` when reducing the width of `#red-container`? As of now, these edges are only aligned when increasing the width of `#red-container`. 2) When increasing the width of `#red-container` it will eventually push off `#green-container`, is it possible to prevent this behavior? This does not occur with the red container, so maybe one can move the resize icon in the bottom-right corner to the bottom-left corner for the green container? — Kevin, Jul 31 '22 at 17:55

score 2 · Accepted Answer · answered Jul 31 '22 at 19:28

Make only the red container resizable with an initial width equal to 50% and use flex-grow:1 on the green container

function addCell(color) {
  let container = document.getElementById(color + "-container");
  
  let cell = document.createElement("div");
  cell.innerText = color;
  container.appendChild(cell).className = "container-item";
}

#container {
  border: 1px solid #ddd;
  display: flex;
  gap: 10px;
  padding: 10px;
  height: 50vh;
  resize: vertical;
  overflow: auto;
}

#green-container,
#red-container {
  display: grid;
  overflow: auto;
}
#red-container {
  border: 1px solid red;
  width: 50%;
  resize: horizontal; 
}
#green-container {
  border: 1px solid green;
  flex-grow: 1;
}


.container-item {
  padding: 10px;
  border: 1px solid black;
}

<button onclick="addCell('red')">add red cell</button>
<button onclick="addCell('green')">add green cell</button>

<div id="container">
  <div id="red-container"></div>
  <div id="green-container"></div>
</div>

CSS grid with dynamic number of rows and adjustable width

2 Answers2

Linked