I want to create a dynamic grid layout of 2 columns and any number of rows there. in this grid, I put the element's name. as per the element name's length the width of the grid going to adjust. like if the element length is less than 13 then element adjust in grid column ('1 / 2') or ('2 / 3') otherwise it take width ('1 / 3') of grid. and there is a condition is that in the grid layout there is no one going to blank.

I tried for that and I did the code but in some cases, there are some blank spaces. So try and share the optimum solution with me.

  const setGrid = (a) => {
  a.forEach((obj) => {
    if (obj.innerText.length > 13) {
      const parent = obj.parentNode;
      if (parent) {
        parent.style.gridColumn = "1 / 3";
      }
      const parentLeft = parent.previousSibling;
      if (parentLeft) {
        if (parentLeft.innerText.length < 13) {
          const parentLeftL = parentLeft.previousSibling;
          if (parentLeftL) {
            if (parentLeftL.innerText.length < 13) {
              const parentLeftLL = parentLeftL.previousSibling;
              if (parentLeftLL) {
                if (parentLeftLL.innerText.length < 13) {
                  parentLeftLL.style.gridColumn = "1/2";
                  parentLeftL.style.gridColumn = "2/3";
                  parentLeft.style.gridColumn = "1/3";
                } else {
                  parentLeftLL.style.gridColumn = "1/3";
                  parentLeftL.style.gridColumn = "1/2";
                  parentLeft.style.gridColumn = "2/3";
                }
              } else {
                parentLeftL.style.gridColumn = "1/2";
                parentLeft.style.gridColumn = "2/3";
              }
            } else {
              parentLeftL.style.gridColumn = "1/3";
              parentLeft.style.gridColumn = "1/3";
            }
          } else {
            parentLeft.style.gridColumn = "1/3";
          }
        } else {
          parentLeft.style.gridColumn = "1/3";
        }
      }
    }
  });
};

I want this kind of output