Css cheat sheet template-CodePudding

I'm trying to create a template for a cheat sheet in html, take as an example this latex format.
The idea is to create 3 columns of height x and y row. The content has to follow this rule automatically.

This is what I've achieved so far, I'm albe to span the content automatically in multiple columns. The idea is that after the third column the rest of the content go to a new line and start another 3 column of the same height, and so on.

.box {
  column-count: 3;
  column-rule: 2px solid black;
  column-fill: auto;
  height: 100px
}

<div >
  <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> 18 </div>
  <div> 19 </div>
  <div> 20 </div>
</div>

Someone has any idea?

CodePudding user response：

An approximation using CSS grid:

.box {
  display: grid;
  grid-auto-flow: dense;
}
.box :nth-child(15n   5) {
  margin-bottom: 10px;
}

.box :nth-child(15n   1),
.box :nth-child(15n   2),
.box :nth-child(15n   3),
.box :nth-child(15n   4),
.box :nth-child(15n   5){
  grid-column:1;
}
.box :nth-child(15n   6),
.box :nth-child(15n   7),
.box :nth-child(15n   8),
.box :nth-child(15n   9),
.box :nth-child(15n   10){
  grid-column:2;
}
.box :nth-child(15n   11),
.box :nth-child(15n   12),
.box :nth-child(15n   13),
.box :nth-child(15n   14),
.box :nth-child(15n   15){
  grid-column:3;
}

<div >
  <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> 18 </div>
  <div> 19 </div>
  <div> 20 </div>
</div>

CodePudding user response：

.box {
  column-count: 3;
  column-rule: 2px solid black;
  column-fill: auto;
  height: 100px;
}

<div >
  <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>
<div >
  <div> 16 </div>
  <div> 17 </div>
  <div> 18 </div>
  <div> 19 </div>
  <div> 20 </div>
</div>

Hope this help