CODEWITHSUNDEEP
htmlcss
Benji
Benji

Reputation: 11

Different number of columns per row

Correct LayoutInstead of 3 columns per row (as below), i want to display the first 2 rows with 3 columns and then the 3rd row with 5 columns and 4th row with 4 columns (changing CSS only)

CSS ul { columns: 3; }

HTML <ul class="list"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li><a href="#">11</a></li> <li><a href="#">12</a></li> <li><a href="#">13</a></li> <li><a href="#">14</a></li> <li><a href="#">15</a></li> </ul> </body>

I can't figure out how to change the number of columns per row.

Upvotes: 1

Views: 163

Answers (1)

Damzaky
Damzaky

Reputation: 10826

You can use css grid model and change the column number with grid-column. This uses some kind of trick though. To achieve this, we can set the original column to be 60, then we can span the first 6 elements (first and second row) to 20, then we span the 7th to 11th elements to 12, finally we span the rest of the elements to 15.

How did we choose those values? we can basically get the LCM of 3, 4, 5 which is 60, then we can divide 60 to each number of column: 60 / 3 = 20, 60 / 5 = 12, 60 / 4 = 15.

ul {
  display: grid;
  grid-template-columns: repeat(60, 1fr);
}

li:nth-child(-n+6) {
  grid-column: span 20;
}

li:nth-child(n+7):nth-child(-n+11) {
  grid-column: span 12;
}

li:nth-child(n+12) {
  grid-column: span 15;
}

/* just for styling */

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  text-align: center;
}
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
</ul>

If you want to make it exactly as your image though, you can just simply use add grid-column: 1 on each of the starting row:

ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

li:nth-child(1), li:nth-child(4), li:nth-child(7), li:nth-child(12) {
  grid-column: 1;
}

/* just for styling */

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  text-align: center;
}
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
</ul>

Upvotes: 2

Related Questions