Place items in pairs in two rows using css grid

user_2783730 0
Viewed 3386

I'm trying to render items in a specific order, look at the picture: enter image description here

i.e. there is an infinite number of items, by columns, each column has two items. Do you have any ideas how to code this using grids or flexbox or any other way (maybe by combining them)? I know I can do it with tables, but I'm trying to avoid them this time.

flexbox css-grid css
2 Answers

nth-child() can help here

.box {
  display:grid;
  grid-auto-flow:column dense; /* column flow with "dense" to fill all the cells */
  grid-template-rows:50px 50px; /* 2 rows */
  grid-auto-columns:50px;
}
.box span:nth-child(4n + 2) { /* this will do the trick*/
   grid-row:1; /* we make 2 in the first row and 3 will be pushed to second row */
}

/* irrelevant styles */
.box {
  counter-reset:num;
  grid-gap:5px;

}
.box span {
  background:yellow;
  font-size:25px;
}

.box span::before {
  content:counter(num);
  counter-increment:num;
}
<div class="box">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

user_86203330 

.box{
display: flex;
 flex-wrap: wrap;
width: 100%;
justify-content: space-around;
}
span{
display: inline-block;
margin-bottom: 1rem;
text-align: center;
width: 16%;
height: 5rem;
background-color: #555;
color: #f0f0f0;
}
span:nth-of-type(1), span:nth-of-type(2), span:nth-of-type(5), span:nth-of-type(6), span:nth-of-type(9), span:nth-of-type(10)      {
     order: 0;
}
span:nth-of-type(3), span:nth-of-type(4), span:nth-of-type(7), span:nth-of-type(8), span:nth-of-type(11), span:nth-of-type(12){
     order: 1;
}
<div class="box">
 <span>1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 <span>5</span>
 <span>6</span>
 <span>7</span>
 <span>8</span>
 <span>9</span>
 <span>10</span>
 <span>11</span>
 <span>12</span>

</div>

user_128926500
Related