3 columns grid layout with auto placement items in each column

Question

I checked this article Make grid container fill columns not rows but it is not I'm looking for. I need to display fixed number of columns 3!!! and a dynamic number of rows!!! It can be 10 or 1000 items in 3 rows, they should be go one after another:

1 50 100 2 51 101 3 52 ... 4 53 5 54 ... ...

I have an example in which I cannot configure 3 columns layout with auto-placement of items. I need items in the first column to be 1, 2, 3, 4 etc. It is possible with a display: grid? How can I achieve this? The number of items could be dynamic, it could be 100 items

.test-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.test-row-item {
  padding-bottom: 3.2rem;
  border-right-color: #2C327A;
  border-right-width: 1px;
  border-right-style: solid;
}

<div class="test-row">
  <div class="test-row-item">
    1
  </div>
   <div class="test-row-item">
    2
  </div>
   <div class="test-row-item">
    3
  </div>
   <div class="test-row-item">
    4
  </div>
   <div class="test-row-item">
    5
  </div>
   <div class="test-row-item">
    6
  </div>
   <div class="test-row-item">
    7
  </div>
  <div class="test-row-item">
    8
  </div>
  <div class="test-row-item">
    9
  </div>
  <div class="test-row-item">
    10
  </div>
   <div class="test-row-item">
    11
  </div>
   <div class="test-row-item">
    12
  </div>
  <div class="test-row-item">
    13
  </div>
  <div class="test-row-item">
    14
  </div>
  <div class="test-row-item">
    15
  </div>
   <div class="test-row-item">
    16
  </div>
   
  
</div>

I need items in the first column to be 1, 2, 3, 4. Check example, what do you see in the first column? — rick1, Apr 05 '22 at 09:29
@nicael no, because if there will be more items, they will create additional columns, I need them to be in 3 columns but any number of rows — rick1, Apr 05 '22 at 09:30
I think @BeanBoy's answer will satisfy your problem. Isn't it? — Danielprabhakaran N, Apr 05 '22 at 09:49

BeanBoy · Answer 1 · 2022-04-07T12:58:03.723

you don't need grid at all. Just use: column-count.

.test-row {
  column-count: 3;
  width: 50%;
  position: relative;
  transform: translateX(5px);

}

.test-row-item {
  border-right-color: #2C327A;
  border-right-width: 1px;
  border-right-style: solid;
  text-align: center;
}

.line-remove {
  height: 100%;
  background: white;
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  z-index: 1;
  border: 0;
}

<div class="test-row">
  <div class="test-row-item">
    1
  </div>
   <div class="test-row-item">
    2
  </div>
   <div class="test-row-item">
    3
  </div>
   <div class="test-row-item">
    4
  </div>
   <div class="test-row-item">
    5
  </div>
   <div class="test-row-item">
    6
  </div>
   <div class="test-row-item">
    7
  </div>
  <div class="test-row-item">
    8
  </div>
  <div class="test-row-item">
    9
  </div>
  <div class="test-row-item">
    10
  </div>
   <div class="test-row-item">
    11
  </div>
   <div class="test-row-item">
    12
  </div>
  <div class="test-row-item">
    13
  </div>
  <div class="test-row-item">
    14
  </div>
  <div class="test-row-item">
    15
  </div>
   <div class="test-row-item">
    16
  </div>
  
  
   <div class="line-remove">
   
   </div>
  
</div>

Thank you. It would be great to add border to the 1 and 2 row only. I tried :nth-child(n + 4) but doesn't work — rick1, Apr 05 '22 at 10:08
I hid the last column with a div, which is exactly on top of the line and has the same bachground-color. This solution is also dynamic. — BeanBoy, Apr 07 '22 at 13:01

MagnusEffect · Answer 2 · 2022-04-05T09:56:14.280

If I understands correctly , you want to display like this

1  5  9   13
2  6  10  14
3  7  11  15
4  8  12  16

You can do like this

var numberOfColumns = 3;

document.head.appendChild(document.createElement('style'));

var newStyles = document.styleSheets[(document.styleSheets.length - 1)];

var myGrid = document.getElementsByClassName('my-grid')[0];
var myGridUnits = myGrid.getElementsByTagName('div');

var tallColumn = Math.ceil(myGridUnits.length /  numberOfColumns);
var shortColumn = Math.floor(myGridUnits.length / numberOfColumns);

var nextUnit = 1;
var unitsRemaining = myGridUnits.length;
var xTranslate, yTranslate;
var columns = [];

for (var i = 0; i < (numberOfColumns - 1); i++) {


    if (unitsRemaining % shortColumn === 0) {
    
        columns.push(shortColumn);
    }

    else {

        columns.push(tallColumn);
    }
    
    nextUnit += columns[(columns.length - 1)];
    unitsRemaining -= columns[(columns.length - 1)];
    
    xTranslate = ((i + 1) * 48);
    yTranslate = 0;
    columns.forEach(function(columnHeight){yTranslate += (columnHeight * 48);});
                         
    newStyles.insertRule('.my-grid div:nth-of-type(n+' + nextUnit + ') {transform: translate(' + xTranslate + 'px, ' + (0 - (yTranslate)) + 'px);}', newStyles.cssRules.length);

}

.my-grid {
display: inline-grid;
grid-row-gap: 6px;
}

.my-grid div {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid rgb(127, 127, 127);
}

<div class="my-grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>

</div>

your example has fixed number of rows, but I need them to be dynamic — rick1, Apr 05 '22 at 09:44

3 columns grid layout with auto placement items in each column

2 Answers2