Is it possible to 'position' my blog posts this way?

Question

Position

Instead of:

Preview

I would like to place the posts closer together by filling in these "empty" spaces with the other posts.

This is the example code:

<!DOCTYPE html>
<html>

<head>
    <style>
        .my {
        background-color: blue;
        width: 360px;
        padding: 20px;
        margin: 5px;
        display: inline-block;
        
        /*  */
        }
    </style>

    <body>
        <div class="my">P1
            <p>abcdefghijk</p>
            <p>lmnopqrstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P2
            <p>abcd</p>
            <p>efg</p>
            <p>hijk</p>
            <p>lmnopqrstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P3
            <p>abcd</p>
            <p>efg</p>
            <p>hijk</p>
            <p>lmnopqrstuvwx</p>yz</div>
        <div class="my">P4
            <p>abcd</p>
            <p>hijk</p>
            <p>lmnopqrstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P5
            <p>abcd</p>
            <p>hijk</p>
            <p>lmno
                <p>pq</p>rstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P6
            <p>abcd</p>
            <p>hijk</p>
            <p>lmnopq
                <p>rst</p>u
                <p>v</p>wx</p>
            <p>yz</p>
        </div>
        <div class="my">P7
            <p>abcd</p>
            <p>hijk</p>
            <p>lmnopqrstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P8
            <p>abcd</p>
            <p>efg</p>
            <p>hijk</p>
            <p>lmnopqrstuvwx</p>
            <p>yz</p>
        </div>
        <div class="my">P9
            <p>abcd</p>
            <p>hijk</p>
            <p>lmno
                <p>pq</p>rstuvwx</p>
            <p>yz</p>
        </div>

    </body>

</html>

What determines the height of these divs within each column? Are you looking to just have a percentage of height that lays out the divs in such a way to reproduce the picture, or does the content within the DIVS matter more? — dale landry, Jul 25 '21 at 20:33
only the width of the divs matters. it is important that the content does not "leave" the div. — fuul, Jul 25 '21 at 21:29

dale landry · Answer 1 · 2021-07-25T21:23:40.800

You can use display: grid to get this layout. By offsetting your rows and overlapping in the proper places, you can assign these overlapping rows to each columns three divs to get the offset look you are trying to achieve.

grid-template-columns: allows you to specify how many columns are in your layout and how much they will take up the width of the parent container. I use fr which is a fraction unit. Each column is one fraction so they will basically take up 33.3 percent of the width minus the gap.

grid-template-rows: is where it gets interesting with your layout. As you can see we have more rows than what we actually have in the DOM. We are overlapping the excess rows to create the offset by adding a variable fractional amount to each one in the grid-template-areas property.

grid-template-areas: literally lays out the child elements using their selectors. This overwrites the position of the elements within the DOM. So regardless of whether selector 1 comes first in your HTML it will place it where it is laid out in this property.

grid-area: is placed on the child selectors css and will reference its selcetor => ex: .three { grid-area: three; }. This coincides with the grid-template-areas property on the parent element.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2.5fr 0.5fr 0.8fr 1.6fr 0.4fr 0.3fr 2.1fr 0.4fr 0.4fr;
  grid-template-areas: "one two three" "one five three" "one five six" "four five six" "four five nine" "four eight nine" "seven eight nine" "seven . nine" "seven . .";
  width: 100%;
  height: auto;
}

.box {
  background-color: blue;
  padding: 1rem;
  margin: 2.5px; /* could use "gap" on parent element as well. */
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.one {
  grid-area: one;
}

.six {
  grid-area: six;
}

.five {
  grid-area: five;
}

.four {
  grid-area: four;
}

.nine {
  grid-area: nine;
}

.eight {
  grid-area: eight;
}

.seven {
  grid-area: seven;
}

<div class="parent">
  <div class="one box">P1
    <p>abcdefghijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="two box">P2
    <p>abcd</p>
    <p>efg</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="three box">P3
    <p>abcd</p>
    <p>efg</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>yz</div>
  <div class="four box">P4
    <p>abcd</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="five box">P5
    <p>abcd</p>
    <p>hijk</p>
    <p>lmno
      <p>pq</p><p>rstuvwx</p>
    <p>yz</p>
  </div>
  <div class="six box">P6
    <p>abcd</p>
    <p>hijk</p>
    <p>lmnopq
      <p>rst</p>u
      <p>v</p><p>wx</p>
    <p>yz</p>
  </div>
  <div class="seven box">P7
    <p>abcd</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="eight box">P8
    <p>abcd</p>
    <p>efg</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="nine box">P9
    <p>abcd</p>
    <p>hijk</p>
    <p>lmno
      <p>pq</p><p>rstuvwx</p>
    <p>yz</p>
  </div>
</div>

score 1 · Accepted Answer · answered Jul 25 '21 at 20:45

You could use columns.

/* Masonry grid */
.masonry {
  width: 440px;
  column-gap: 10px;
  column-fill: initial;
  column-count: 3;
}

/* Masonry item */
.masonry .my {
  background-color: blue;
  width: 120px;
  padding: 10px;
  margin-bottom: 10px;
  display: inline-flex;
  vertical-align: top;
  justify-content: space-between;
  display: inline-block;
}

<div class="masonry">
  <div class="my">P1
    <p>abcdefghijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="my">P2
    <p>abcd</p>
    <p>efg</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="my">P3
    <p>abcd</p>
    <p>efg</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>yz</div>
  <div class="my">P4
    <p>abcd</p>
    <p>hijk</p>
    <p>lmnopqrstuvwx</p>
    <p>yz</p>
  </div>
  <div class="my">P5
    <p>abcd</p>
    <p>hijk</p>
    <p>lmno</p>
    <p>pq</p>
    <p>yz</p>
  </div>
  <div class="my">P6
    <p>abcd</p>
    <p>hijk</p>
    <p>lmnopq</p>
    <p>rst</p>
    <p>v</p>
    <p>yz</p>
  </div>
  <div class="my">P7
    <p>abcd</p>
    <p>hijk</p>
    <p>yz</p>
  </div>
  <div class="my">P8
    <p>abcd</p>
    <p>yz</p>
  </div>
  <div class="my">P9
    <p>abcd</p>
    <p>hijk</p>
    <p>lmno</p>
    <p>pq</p>
    <p>yz</p>
  </div>
</div>

score 1 · Answer 3 · answered Jul 25 '21 at 21:06

You can easily achieve this using flex-box, with flex-direction:column;. make sure to assign height and width to the container and flex-wrap:wrap;. Other thing to note is that you won't be able to set flex-items automatically according to their sizes and they will follow the order they were included in html code. Only reason I used fixed height and width for my body element so as to not affect the layout on different viewing screen. And to display what i intended to.

* {
  margin: 0px;
  padding: 0px;
}

html,
body {
  height: 250px;
  width: 420px;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2px;
  align-content: center;
}

.my {
  background-color: blue;
  width: 100px;
  display: inline-block;
}

<body>
  <div class="container">
    <div class="my">P1
      <p>lmnopqrstuvwx</p>
      <p>yz</p>
    </div>
    <div class="my">P2
      <p>abcd</p>
      <p>lmnopqrstuvwx</p>
      <p>yz</p>
    </div>
    <div class="my">P3
      <p>abcd</p>
      <p>hijk</p>
      <p>abcd</p>
      <p>hijk</p>
    </div>
    <div class="my">P4
      <p>abcd</p>
      <p>efg</p>
      <p>hijk</p>
      <p>lmnopqrstuvwx</p>yz</div>
    <div class="my">P5
      <p>abcd</p>
      <p>hijk</p>
      <p>lmnopqrstuvwx</p>
      <p>yz</p>
    </div>
    <div class="my">P6
      <p>abcd</p>
      <p>pq</p>
      <p>yz</p>
    </div>
    <div class="my">P7
      <p>abcdu
        <p>v</p>
        <p>yz</p>
    </div>
    <div class="my">P8
      <p>abcd</p>
      <p>hijk</p>
    </div>
    <div class="my">P9
      <p>abcd</p>
      <p>abcd</p>
      <p>hijk</p>
    </div>
    <div class="my">P10
      <p>abcd</p>
      <p>hijk</p>
    </div>
    <div class="my">P11
      <p>abcd</p>
      <p>efg</p>
      <p>hijk</p>
      <p>lmnopqrstuvwx</p>
    </div>
  </div>
</body>

Is it possible to 'position' my blog posts this way?

3 Answers3

Linked