How to have rectangles of varying heights display horizontally in Javascript?

Question

I'm making a press page on a website, and I have the headlines/articles set in rectangles using

.press-blocks{
    column-count: 4;
    column-gap: 2em;
    padding-left: 10%;
    padding-right: 10%;
}
.press-item{ 
    display: inline-block;
    margin: 0 0 5em;
    width: 100%;
    text-align: justify;
}

The whole "press" section area of the page is in one big press-blocks section, and each individual article is in its own press-item. This way, when a new article is written I can just place it at the beginning of the page and all the articles will be in chronological order. However, the chronological order is top to bottom, left to right, like this:

1    5    9    13
2    6    10   14
3    7    11   15
4    8    12   16

Is there a way to change it to left to right, top to bottom?

1    2    3    4
5    6    7    8
9    10   11   12
13   14   15   16

I looked at the W3Schools tutorial for display: inline-block, and theirs is horizontal, but the difference is they don't have a set number of columns. I want this to always have exactly 4 columns, and to just extend further downwards when I add new ones, like it does now. I also want to maintain the vertical distance between items.

Imagine these rectangles are all evenly spaced and have the same distance between them both horizontally and vertically.

Answer 1

There are two ways you could go about this. By the sounds of your comment on your question, you are going to be wanting to make a masonry grid which uses javascript (first solution), but I'll also include a flex-box solution which, while it wont be exactly what your looking for, it doesn't use javascript.

---

Javascript

This way uses javascript to generate the masonry grid as CSS cant do it alone.

Example:

<div class="masonry">
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
</div>

.masonry { 
    display: flex;
    flex-flow: column wrap;
    max-height: 800px; /* Or whatever you want the height to me */
    margin-left: -8px; /* Adjustment for the gutter */
    width: 100%;
}

.masonry-brick {
    margin: 0 8px 8px 0; /* Some gutter */
}

/**
 * @param grid       Object  The Masonry Element 
 * @param gridCell   Object  The Masonry bricks
 * @param gridGutter Integer The Vertical Space between bricks 
 * @param gridCol    Integer Number of columns
 */

function masonry(grid, gridCell, gridGutter, gridCol) {
    let g = document.querySelector(grid),
    gc = document.querySelectorAll(gridCell),
    gcLength = gc.length, // Total number of cells in the masonry
    gHeight = 0, // Initial height of our masonry
    i; // Loop counter

    // Calculate the net height of all the cells in the masonry
    for(i=0; i<gcLength; ++i) {
        gHeight+=gc[i].offsetHeight+parseInt(gridGutter);
    }

    // Calculate and set the masonry height
    g.style.height = gHeight/gridCol + gHeight/(gcLength+1) + "px";
}

masonry(".masonry", ".masonry-brick", 8, 4);

---

Flex Box

This way uses display: flex; and flex-wrap: wrap; on the parent div of the blocks, and then set each block to have a width of 25% of the parent.

Example:

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

.parent {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.child {
    height: 200px;
    width: 25%;
    background-color: red;
}

---

Both ways would achieve the left to right, top to bottom look you are wanting. But only the javascript script way would have each "cell" individually positioned with custom heights.

Answer 2

EDIT: Added code to calculate height and adjust using filler .size elements. Unfortunately it is not responsive and may have issues with image heights. Will probably need to use the resize observers and image onload event hooks used in the other examples.
And I don't think this approach levels out the heights as well as one of the examples in the css-tricks list.
On the plus side it's probably pretty performant.
I would recommend using one of the masonry libraries at the bottom of the css-tricks page https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/
The link also has probably every approach to the problem you can possibly think of in their complete forms.

I've created a solution that doesn't require JavaScript, but requires kind of a nasty hack of inserting a "break4" element to force wrapping. It works by using flex-direction: column, using nth-child to manipulate order, and using order to inject line breaks to force wrapping.
Also unfortunately requires a fixed height larger than the content.

I think there might be a way to use last-nth-child or first so that the extra element isn't required, but I still haven't figured it out yet. Feels like it's possible.

Note: the JavaScript is just to generate the HTML, because I'm lazy. It doesn't need to be inserted using JS.

for(i=0;i<20;i++)document.querySelector('.container').innerHTML+=`<div style="height:${Math.floor(Math.random()*100+10)}px" class="item">${i+1}</div>`
document.querySelector('.container').innerHTML+=`
<div class="size" style="flex-grow:1;order:1"></div>
<div class="size" style="flex-grow:1;order:2"></div>
<div class="size" style="flex-grow:1;order:3"></div>
<div class="size" style="flex-grow:1;order:4"></div>
<div class="break4"></div>` // break4 force wrap, .size elements to calculate space between bottom of container and bottom of columns

// find smallest .size element and use to calculate size
document.querySelector('.container').style.height=(document.querySelector('.container').offsetHeight-[...document.querySelectorAll('.size')].reduce((acc,{offsetHeight})=>Math.min(acc,offsetHeight),Infinity))+'px'

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
height:1000px;
}

.item {
  border: 1px solid blue;
  width: 24%;
}

.item:nth-child(4n+1) { order: 4; border:1px solid red }
.item:nth-child(4n+2) { order: 1; border:1px solid blue}
.item:nth-child(4n+3) { order: 2; border:1px solid yellow}
.item:nth-child(4n)   { order: 3; border:1px solid green}

.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}
.break4 {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 3;
}

<div class="container"><div>

Answer 3

Javascript method V2

While this also uses javascript, it uses CSS Grid to construct the masonry grid.

<div class="masonry">
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
</div>

.masonry {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Make columns adjust according to the available viewport */
    grid-auto-rows: 0;
}

function resizeAllMasonryItems(){
    // Get all item class objects in one list
    let allItems = document.querySelectorAll(".masonry-brick");

    // Get the grid object, its row-gap, and the size of its implicit rows
    let grid = document.querySelector(".masonry"),
    rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue("grid-row-gap")),
    rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue("grid-auto-rows"));

    // Loop through each masonry-brick
    for (let i = 0; i < allItems.length; i++){
        // Calulate the correct height of the brick, and apply the correct gird value
        let rowSpan = Math.ceil((allItems[i].getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));

        // Set the spanning as calculated above
        allItems[i].style.gridRowEnd = "span " + rowSpan;
    }
}

You may have to tweak some of the grid values to get the look you are going for, but this should do a trick.

Answer 4

You can use CSS Flexbox.

Just add: display: flex and flex-wrap: wrap to .press-blocks.

And width: 25% to .press-item.

flex-wrap: wrap is for linebreak

width: 25% for 4 columns (width: 33% for 3 columns, etc)

<style>
.press-blocks {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2em;
    padding-left: 10%;
    padding-right: 10%;
}
.press-item { 
    margin: 0 0 5em;
    width: 25%;
    text-align: justify;
}