3 Column Vertical Grid

Question

I want to do the following order with display:grid

So I want a total of 3 columns and to order items in rows first, then into the next column.

And you want the height of the parent element to adjust to always have 3 columns? — Will, Jun 02 '22 at 11:05
Yes! No matter how many items it has, there always should be 3 columns. — macc, Jun 02 '22 at 11:08
CSS-Grid cannot do this without specifying the number of rows. CSS `column-count` is what you need. — Paulie_D, Jun 02 '22 at 11:21

score 0 · Answer 1 · answered Jun 02 '22 at 11:35

I decided to put in both ways, because while using column-count, I could have in the order that you wanted the numbers.

And I used grid there because it was the way you asked.

(Ignore the usage of flexbox, it was merely for styling purposes)

.examples {
  display: flex;
  gap: 100px;
}

.columns {
  width: 100px;
  column-count: 3;
}

.columns>label {
  width: 20px;
  height: 20px;
  padding: 5px;
  margin: 0px 5px 5px 0px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100px;
}

.grid > label {
  width: 20px;
  height: 20px;
  padding: 5px;
  margin: 0px 5px 5px 0px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="examples">
  <div class="columns">
    <label>1</label>
    <label>2</label>
    <label>3</label>
    <label>4</label>
    <label>5</label>
    <label>6</label>
    <label>7</label>
    <label>8</label>
    <label>9</label>
    <label>10</label>
    <label>11</label>
    <label>12</label>
    <label>13</label>
    <label>14</label>
    <label>15</label>
    <label>16</label>
    <label>17</label>
    <label>18</label>
    <label>19</label>
    <label>20</label>
    <label>21</label>
  </div>
  <div class="grid">
    <label>1</label>
    <label>2</label>
    <label>3</label>
    <label>4</label>
    <label>5</label>
    <label>6</label>
    <label>7</label>
    <label>8</label>
    <label>9</label>
    <label>10</label>
    <label>11</label>
    <label>12</label>
    <label>13</label>
    <label>14</label>
    <label>15</label>
    <label>16</label>
    <label>17</label>
    <label>18</label>
    <label>19</label>
    <label>20</label>
    <label>21</label>
  </div>
</div>

3 Column Vertical Grid

1 Answers1