Question 268398 in CSS Question posted in
Some basic documentation can be found here.

Distribute unknown number of items into 2 columns using CSS grid or flexbox

I have an unknown number of child items in a container:

<div class="container">
    <div class="child">Item 1</div>
    <div class="child">Item 2</div>
    <div class="child">Item 3</div>
    <div class="child">Item 4</div>
    <div class="child">Item 5…</div>
</div>

I would like to stack these items into 2 columns such that they appear:

Item 1  Item 4
Item 2  Item 5
Item 3

I can’t figure out how to do this using CSS grid without knowing the number of grid rows, or with flexbox without setting an explicit height on the container.

Could anyone please suggest a way to do this?

Tags:

2

Answers


  1. 0

    If there is an obligation of using flexbox and grid, then as far as I know, you would require the container’s height (dynamically calculating it using JavaScript or a CSS custom property which you talked about).

    I can think of one way to achieve this purely in CSS without any dynamic calculation or knowing the height in advance and that is by using the column-count property. With this you don’t need to worry about the number of items that come in. Sharing my solution here for reference in case you’re looking for a solution other than flexbox or grid:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      column-count: 2; /* speciifes that the content inside the container should be divided into two columns */
      column-gap: 1rem;
      width: 100%;
    }
    .child {
      display: inline-block;
      width: 100%;
      box-sizing: border-box;
      break-inside: avoid; /* ensures that each child element stays within a single column */
      padding: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="child">Item 1</div>
    <div class="child">Item 2</div>
    <div class="child">Item 3</div>
    <div class="child">Item 4</div>
    <div class="child">Item 5</div>
    <div class="child">Item 6</div>
    <div class="child">Item 7</div>
    <div class="child">Item 8</div>
    <div class="child">Item 9</div>
    <div class="child">Item 10</div>
    <div class="child">Item 11</div>
    <div class="child">Item 12</div>
    <div class="child">Item 13</div>
    <div class="child">So on...</div> 
  </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    try this :

    const container = document.getElementById('container');
let itemCount = 0;

addEventListener('click', function() {
    itemCount++;
    const newItem = document.createElement('div');
    newItem.className = 'child';
    newItem.textContent = 'Item ' + itemCount;
    container.appendChild(newItem);
});
    .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* Add spacing between items */
}

.child {
    padding: 10px;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="w.css">
</head>
<body>
    <div class="container">
        <div class="child">Item 1</div>
        <div class="child">Item 2</div>
        <div class="child">Item 3</div>
        <div class="child">Item 4</div>
        <div class="child">Item 5</div>
        <div class="child">Item 5</div>
        <div class="child">Item 5</div>
        <div class="child">Item 5</div>
        <div class="child">Item 5</div>
        <div class="child">Item 5</div>
        <div class="child">Item 5</div>
        <div class="child">Item 5</div>
        <div class="child">Item 5</div>
        
    </div>
    <script src="w.js"></script>
</body>
</html>

    but i’ll use the Javascript as well

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search