3 columns grid (top to bottom) using grid CSS

  • A+
Category:Languages

Ok, here's the situation, let's say I have a list with unknown number of items, it could be 10 or a 100, and I want to lay them out in 3 columns going top to bottom not left to right.

Right now I can achieve this using columns: 3; and column-gap: 10px; That's all fine and everything.

My question is, how to achieve the same results using display: grid; without knowing the number of items?

I know you can achieve this with CSS Grid if you have a fixed number of items, but is it possible with dynamic items? without using JS of course.

ul {   list-style: none;   columns: 3;   column-gap: 10px; }
<ul>   <li>1</li>   <li>2</li>   <li>3</li>   <li>4</li>   <li>5</li>   <li>6</li>   <li>7</li>   <li>8</li>   <li>9</li>   <li>10</li>   <li>11</li>   <li>12</li>   <li>13</li>   <li>14</li>   <li>15</li>   <li>16</li>   <li>17</li>   <li>18</li>   <li>19</li>   <li>20</li>   <li>21</li>   <li>22</li> </ul>

 


I don't think this is possible without previously know the number of items that you want to display, for your case you could do this:

ul {    display: grid;    grid-auto-flow: column;    grid-template-rows: repeat(8, 1fr); }
<ul>   <li>1</li>   <li>2</li>   <li>3</li>   <li>4</li>   <li>5</li>   <li>6</li>   <li>7</li>   <li>8</li>   <li>9</li>   <li>10</li>   <li>11</li>   <li>12</li>   <li>13</li>   <li>14</li>   <li>15</li>   <li>16</li>   <li>17</li>   <li>18</li>   <li>19</li>   <li>20</li>   <li>21</li>   <li>22</li> </ul>

But the number of rows have to be defined previously.

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: