сетка из нескольких столбцов элементов с абсолютным позиционированием с переменными javascript && css

Question

Я пытаюсь сделать сетку, в которой предметы бывают абсолютными.

Моя попытка

https://stackblitz.com/edit/design-tokens-scss-mixins-mnurju?file=src%2Fapp%2Fapp.component.ts

, которую вы можете увидеть в app.component.ts, есть функция, которая выполняется onInit

this.setColumnVars(3, 20);

первый аргумент per_row (px) - это количество элементов в строке, а второй gap (px) - разрыв между ними.

функция выполняет некоторые вычисления и вставки css переменных для использования в файле s css.

Проблема

Если вы измените per row, вы увидите, что он всегда выключен на несколько пикселей. Можете ли вы увидеть, что мне нужно сделать, чтобы элементы точно соответствовали ширине bar независимо от того, что per_row или gap?

Есть ли библиотека, которая делает это? ? или примеры абсолютных сеток?

setColumnVars(3, 20);




function setColumnVars(per_row, gap) {
    const inside_container = document.querySelector(".column-wrapper")
    const bounds = (el) => el.getBoundingClientRect();
    const columns_width = (bounds(inside_container).width) - (gap*(per_row)) + gap;
    const item_width = (columns_width / per_row);
    console.log('item_width :', item_width);
    let values = [
      {
        name: 'columns-width',
        value: columns_width + 'px',
      },
      {
        name: 'item-width',
        value: item_width + 'px',
      },
      {
        name: 'column-percent',
        value: item_width * 100 + '%',
      },
      {
        name: 'gap',
        value: gap + 'px',
      },
      {
        name: 'neg-gap',
        value: (gap) * -1 + 'px',
      }
    ];
    let i;
    for (i = 0; i < 100; i++) {
      values.push({
        name: `col-left-${i+1}`,
        value: (item_width * i) + (gap*i) + (i) + 'px',
      })
    }
    console.log('col values', values);
    values.forEach((item) => {
      document.querySelector('body').style.setProperty(`--${item.name}`, item.value);
    });
  }

.column-wrapper {
	 position: relative;
}
 .column-wrapper .absolute-columns {
	 position: relative;
}
 .column-wrapper .absolute-columns .absolute-column {
	 width: var(--item-width);
	 position: absolute;
	 border: 1px solid #ccc;
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(0) {
	 left: var(--col-left-0);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(1) {
	 left: var(--col-left-1);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(2) {
	 left: var(--col-left-2);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(3) {
	 left: var(--col-left-3);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(4) {
	 left: var(--col-left-4);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(5) {
	 left: var(--col-left-5);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(6) {
	 left: var(--col-left-6);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(7) {
	 left: var(--col-left-7);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(8) {
	 left: var(--col-left-8);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(9) {
	 left: var(--col-left-9);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(10) {
	 left: var(--col-left-10);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(11) {
	 left: var(--col-left-11);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(12) {
	 left: var(--col-left-12);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(13) {
	 left: var(--col-left-13);
}
 .column-wrapper .absolute-columns .absolute-column:nth-child(14) {
	 left: var(--col-left-14);
}
 .column-wrapper .absolute-columns .absolute-column .column-inner-wrapper {
	 background: #efefef;
	 position: relative;
   text-align: center;
}
 .column-wrapper .absolute-columns .absolute-column .column-inner-wrapper p {
	 font-weight: bolder;
	 padding: 2em;
	 text-transform: uppercase;
	 margin: 0;
}
 .bar {
	 padding: 1em;
	 text-align: center;
	 font-weight: bold;
	 background: #333;
	 color: #fff;
}
 

<div class="column-wrapper">
    <div class="bar">width</div>
    <div class="absolute-columns">
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
        <div class="absolute-column">
            <div class="column-inner-wrapper">
                <p>{{item}}</p>
            </div>
        </div>
    </div>
</div>