1

I have a list of items, say fixed size rectangle divs. I need to organize my content so that first half of the list goes in the left column, and the second half goes to the right one. If the number of items is not even, the left column has one item more. Is it possible to organize such a layout declaratively within a container? The enclosing container is twice as wide as each element (or a bit wider).

Example:

+-----+-----+       +-----+-----+       +-----+-----+       +-----+-----+
|  1  |     |       |  1  |  2  |       |  1  |  3  |       |  1  |  3  |
+-----+-----+       +-----+-----+       |  2  |     |       |  2  |  4  |
                                        +-----+-----+       +-----+-----+

+-----+-----+       +-----+-----+       +-----+-----+       +-----+-----+
|  1  |  4  |       |  1  |  4  |       |  1  |  5  |       |  1  |  5  |
|  2  |  5  |       |  2  |  5  |       |  2  |  6  |       |  2  |  6  |
|  3  |     |       |  3  |  6  |       |  3  |  7  |       |  3  |  7  |
+-----+-----+       +-----+-----+       |  4  |     |       |  4  |  8  |
                                        +-----+-----+       +-----+-----+

A content sample:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Two columns, top-to-bottom, left-to-right</title>
  <style>
    .enclosing {
      width: 210px;
      background-color: lightgray;
    }
    .item {
      width: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
<div class="enclosing">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>
</body>
</html>
greatvovan
  • 1,217
  • 11
  • 29
  • you can use grids and also assign names to each element so when you make it responsive it doesn't go 1526374 but it will go in the order you want it to – masilv17 Apr 05 '21 at 20:56

1 Answers1

1

This seems like a pretty easy job for grids. The whole idea with a grid container is the more elements you add to the inside of the container it will just continue this layout that you have with no issues. The only difference is that originally grids will do:

+-----+-----+       +-----+-----+       +-----+-----+       +-----+-----+
|  1  |     |       |  1  |  2  |       |  1  |  2  |       |  1  |  2  |
+-----+-----+       +-----+-----+       |  3  |     |       |  3  |  4  |
                                        +-----+-----+       +-----+-----+

The following code is how one generally uses the grid code and it works really well for whenever you need any sort of layout:

HTML:

<section> 
  <div class="grid1">
    <div>
       <p>1</p>
    </div>
    <div>
       <p>2</p>
    </div>
    <div>
       <p>3</p>
    </div>
    <div>
       <p>5</p>
    </div>
    <div>
       <p>6</p>
    </div>
 </div>
</section>

CSS:

.grid1{
  display: grid;
  grid-template-columns: auto auto; 
  /* the above lets us know that there is two columns, in the responsive you would keep this the same but change it to have only one auto for one column if that is what you want */
}

Now, if you want your columns to be 123 on the right and 456 on the left then you need to change your code a little bit

HTML:

<section> 
  <div class="grid1">
    <div id="element-1">
       <p>1</p>
    </div>
    <div id="element-2">
       <p>2</p>
    </div>
    <div id="element-3">
       <p>3</p>
    </div>
    <div id="element-4">
       <p>4</p>
    </div>
    <div id="element-5">
       <p>5</p>
    </div>
 </div>
</section>

Then in your CSS you would need to name these elements:

CSS:

#element-1{
 grid-area: element1
}
#element-2{
 grid-area: element2
}
#element-3{
 grid-area: element3
}
#element-4{
 grid-area: element5
}
#element-5{
 grid-area: element5
}

.grid1{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
  "element1 element4"
  "element2 element5"
  "element3";
}
masilv17
  • 127
  • 8