Columns in column order, equal height, with dynamic content

flex-direction: column equal height
bootstrap 3.3 7 same height columns
javascript equal height divs
how to make 2 columns same height bootstrap
row div same height
bootstrap elements in row same height
make bootstrap columns the same height
bootstrap 3 column same height as row

I sat all day trying to beat this thing. It seems so childishly simple, but I have seemed to hit a brick wall. These are the criteria:

  • Two columns
  • To be read in a column order
  • Vertical align top
  • Each item has a border top, and a border bottom
  • The selected item has a different color of the borders
  • The content, number of rows and height are unknown; it can be 3 items, it can be 17 items
  • One div to contain all items, not two
  • No JS, no jQuery
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>

My goal:

---------  ---------
Item 1     Item 5
---------  ---------
Item 2     Item 6
---------  ---------
Item 3     Item 7
---------  ---------
Item 4
---------

Here is what I got: https://codepen.io/martinlex/pen/bZgmvV?editors=1100

My issues:

  1. I have double borders everywhere, except from the top items and the bottom items. The border width must be 1px everywhere.
  2. The columns solution: the borders disappears randomly from the top and bottom.
  3. The grid solution: you need to know the exact number of rows, when the auto-flow is column.
  4. Can flexbox handle this?

Whenever you use a list, there is always going to be some margin between li items by default. Your solution works perfectly fine with grid, just simply remove the default margin by adding margin: -0.5px to your .item class.

.list {
  display: grid;
  grid-column-gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
}

.item {
  border-bottom: 1px solid lightgrey;
  border-top: 1px solid lightgrey;
  padding: 8px;
  margin: -0.5px;
  list-style: none;
}

.selected {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  z-index: 1;
}
<ul class="list">
  <li class="item">Asdfghjkl 1</li>
  <li class="item">Asdfghjkl 2</li>
  <li class="item">Asdfghjkl 3</li>
  <li class="item">Asdfghjkl 4</li>
  <li class="item">Asdfghjkl 5</li>
  <li class="item">Asdfghjkl 6</li>
  <li class="item selected">Asdfghjkl 7</li>
  <li class="item selected">Asdfghjkl 8</li>
  <li class="item">Asdfghjkl 9</li>
  <li class="item">Asdfghjkl 10</li>
  <li class="item">Asdfghjkl 11</li>
  <li class="item selected">Asdfghjkl 12</li>
  <li class="item">Asdfghjkl 13</li>
</ul>

Columns in column order, equal height, with dynamic content , 问题: I sat all day trying to beat this thing. It seems so childishly simple, but I have seemed to hit a brick wall. These are the criteria: Two columns� We use equal height column layout in web page a lot. If we have to use pure CSS, probably we would give the column container a repeat-y background image( like the image below) to make the columns look with equal height. In this case, the columns do not really have equal height, but look in that way with the background image.

UPDATE 2: This is a screenshot with Css grid solution: https://pasteboard.co/I4hKqRb.png

display: grid;
grid-column-gap: 16px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(7, auto); /* CANNOT SET 7 AS A MAGIC NUMBER */
grid-auto-flow: column;

Also, this is again what I want. But it needs a grid-template-rows value, which I don't have, for the same reason as above.

Fluid Width Equal Height Columns, Equal height columns have been a need of web designers forever. This method allows for source order independence by using negative and positive a negative z-index value so they can sit below the visible text content of the column . I think it takes 3, maybe 4 lines of jquery to make this dynamic and work across all� The most significant disadvantage of both table methods is source-order dependance. There is really no way to have the first column in the source order appear anywhere else than the first column. One True Layout Method. One of the most classic layouts of all time is the one true layout. In one of the demos, equal height columns is tackled. It

UPDATE 1: This is a screenshot with Flexbox solution: https://pasteboard.co/I4hDGRM.png

display: flex;
flex-direction: column;
flex-flow: column wrap;
height: 340px; /* NEEDS HEIGHT */

It is exactly what I want. However: it needs a height value for the list. I don't have it, it will be different depending on content.

Columns in column order, equal height, with dynamic content The , Columns in column order, equal height, with dynamic content. The 2019 Stack Overflow Developer Survey Results Are InMake a div fill the� Responsive Equal Height. The columns we made in the previous example are responsive (if you resize the browser window in the try it example, you will see that they automatically adjust to the necessary width and height). However, for small screens (like smartphones), you might want them to stack vertically instead of horizontally:

Columns in column order, equal height, with dynamic content, These are the criteria: Two columns To be read in a column order Vertical align top Each item has a border top, and a border bottom The selected item has a� Equal-height Columns with CSS Table properties. Going old school, we can make use of Table properties in CSS to achieve equal-height columns, but as I told above, it’s not an ideal solution now to create layouts, as we have support far better, newer technologies to do so. HTML. For a two-column layout, we have the markup like below:

How To Create Equal Height Columns, Learn how to create equal height columns with CSS. When you have columns that should appear side by side, you'll often want them <h2>Column 1</h2> The height will be calculated automatically by aligning to the tallest column in a row. To use equal height column, simply enable Equal height column toggle control in row options. You can use equal height column, for example, to fill columns with the background color and ensure that all columns have the same height to have a beautiful layout

Ultimate web design course, course: Equal height layouts with Flexbox. Learn how to use flexbox to set equal heights for Duration: 1:48 Posted: Aug 15, 2017 The 1fr is what tells the browser to distribute the space between the columns so that each column equally gets one fraction of that space. That is, they’re all fluid, equal-width columns. And the grid will, in this example, always have 12 columns regardless of how wide it is.

Comments
  • column-count:2 + column-fill:balance was suppose to be the way for such a layout, but it was drop from specification and back is still partially supported, if you are willing to test it through the browsers you want to support : codepen.io/gc-nomade/pen/aMpPVZ see developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/…
  • The columns solution was my first take on this. Actually, it works great cross-browser, but the borders won't work. They go missing out in some places, in your example on item 7.
  • for the borders, use either top or bottom then add a shadow to cover previous or next border's item. (pen updated) ;)
  • .item i{ border-bottom: 1px solid lightgrey; box-shadow: 0 -1px 0 lightgrey;/* update*/ padding: 8px; } .selected { box-shadow: 0 -1px 0 red;/* update*/ border-bottom: 1px solid red; position: relative;/* update*/ } codepen.io/gc-nomade/pen/aMpPVZ
  • The interesting concept of mixing border and box-shadow generates this: pasteboard.co/I4ia1zW.png. All good, but it breaks on item 8 where the top border is missing.
  • Thanks Nick, nice idea, but there is still double border in three random places. Between 2-3, 5-6 and 9-10... Using Chrome on Mac.
  • Can you include a picture? I just ran it on my Macbook in Chrome and it worked the same as my Windows PC.
  • Sure! pasteboard.co/I4dQGPh.png Also you can see item 8 (selected) is broken, it should have a red bottom border.
  • The top border of the following element is overlapping the bottom border of the previous element, so you can fix that by adding z-index: 1 to the .selected class. This will make it so the red border is always on top of the gray border.
  • Regarding the double borders in your image: they seem completely random and I could not replicate those results on my Windows PC, Macbook, or my girlfriend's Mac PC. That's very bizarre behavior. I've removed some excess code that you originally had but was not being used. Hopefully this solves the problem you are facing.