There are a couple of approaches you could consider for this task. Based on your comment, it seems like you're interested in creating a masonry grid using JavaScript (the first solution). However, I'll also provide an alternative solution using flexbox. While the flexbox approach might not be exactly what you're looking for, it does not require JavaScript.

JavaScript Solution

This method utilizes JavaScript to generate the masonry grid since CSS alone cannot achieve this effect.

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; /* Adjust height as needed */
    margin-left: -8px; /* Gutter adjustment */
    width: 100%;
}

.masonry-brick {
    margin: 0 8px 8px 0; /* Gutter spacing */
}

/**
 * @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 total height of all cells in masonry
    for(i=0; i<gcLength; ++i) {
        gHeight+=gc[i].offsetHeight+parseInt(gridGutter);
    }

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

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

Flexbox Solution

This method involves using display: flex; and flex-wrap: wrap; on the parent container of the blocks. Each block is then set to occupy 25% of the parent's width.

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 approaches will give you the desired left-to-right, top-to-bottom layout. However, only the JavaScript method will allow for custom heights and individual positioning of each "cell."

A New Approach to Javascript

Introducing a fresh take on javascript with the utilization of CSS Grid to form an innovative masonry grid layout.

<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)); /* Adjust columns based on viewport */
    grid-auto-rows: 0;
}

function resizeAllMasonryItems(){
    // Gather all items in one list
    let allItems = document.querySelectorAll(".masonry-brick");

    // Obtain grid object, row-gap, and implicit row size
    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 element
    for (let i = 0; i < allItems.length; i++){
        // Calculate height of brick and assign grid value
        let rowSpan = Math.ceil((allItems[i].getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));

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

Slight adjustments to grid values may be necessary to achieve desired aesthetics, but this method should get you there.

UPDATE: I have included code to calculate height and make adjustments using filler .size elements. However, this method is not responsive and may encounter issues with image heights. It might be necessary to utilize resize observers and image onload event hooks similar to those mentioned in other examples.
I don't believe this strategy evens out the heights as effectively as one of the examples listed on the css-tricks website.
Nevertheless, it should offer good performance benefits.
I suggest utilizing one of the masonry libraries recommended at the bottom of the css-tricks page https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/
The link provides a comprehensive collection of approaches to address this issue.

I've developed a solution that doesn't rely on JavaScript but necessitates inserting a "break4" element to force wrapping. It operates by employing flex-direction: column, leveraging nth-child to adjust order, and using order to introduce line breaks for wrapping purposes.
Unfortunately, it also requires a fixed height greater than the content size.

I suspect there might be a workaround using last-nth-child or first so that the extra element is not required, but I haven't cracked that yet. It seems achievable though.

Kindly note that the JavaScript snippet is solely for generating the HTML because I'm a bit lazy. You do not necessarily need to insert it 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>

CSS Flexbox can be utilized for this task.

To implement, simply include: display: flex and flex-wrap: wrap in the .press-blocks class.

Add width: 25% to the .press-item class as well.

flex-wrap: wrap is used for creating line breaks.

For instance, setting width: 25% results in 4 columns (or 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;
}