-1

I need a grid layout like Pinterest. How am I going to achieve such layout?

I tried using flex but each element has space and I want the grid layout like in Pinterest.

<style>
    .flex{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .flex-item{
        width: 20%;
        background: #dddddd;
    }
</style>

<div class="flex">
    <div class="flex-item">content.....</div>
    <div class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit..</div>
    <div class="flex-item">Lorem ipsum dolor sit..</div>
    <div class="flex-item">Lorem ipsum dolor sit amet consectetur..</div>
    <div class="flex-item">Lorem ipsum..</div>
</div>

I really want the layout to be like pinterest I'm not sure if the flex is the practical way to achieve this. Any solution or advice will be much appreciated. Thanks in advance!

medev
  • 21
  • 1
  • 1

1 Answers1

2

It's called the Masonry Layout, to get the effect you need it's best to use JS.

Below JavaScript function calculates the collective height of all the bricks, and then to provide the masonry container an average of that height based on the masonry gutter, and the number of columns provided for different screen breakpoints.

In order to add fancy preloading text to the masonry, you may consider using something like below. It’s about nothing but adding an adjacent HTML element to our masonry container, which we have to hide as soon as the all the images finish loading. A toggle in display on certain events is what we want here.

Source: https://w3bits.com/flexbox-masonry/

function masonry(grid, gridCell, gridGutter, dGridCol, tGridCol, mGridCol) {
  var g = document.querySelector(grid),
    gc = document.querySelectorAll(gridCell),
    gcLength = gc.length,
    gHeight = 0,
    i;

  for (i = 0; i < gcLength; ++i) {
    gHeight += gc[i].offsetHeight + parseInt(gridGutter);
  }

  if (window.screen.width >= 1024)
    g.style.height = gHeight / dGridCol + gHeight / (gcLength + 1) + "px";
  else if (window.screen.width < 1024 && window.screen.width >= 768)
    g.style.height = gHeight / tGridCol + gHeight / (gcLength + 1) + "px";
  else
    g.style.height = gHeight / mGridCol + gHeight / (gcLength + 1) + "px";
}

var masonryGrid = document.querySelector('.masonry');
masonryGrid.insertAdjacentHTML("afterend", "<div class='masonry-preloader'>Loading...</div>");
var masonryPreloader = document.querySelector('.masonry-preloader');

["resize", "load"].forEach(function(event) {
  // Adding little preloader information
  masonryGrid.style.display = "none";
  window.addEventListener(event, function() {
    imagesLoaded(document.querySelector('.masonry'), function() {
      masonryGrid.style.display = "flex";
      masonryPreloader.style.display = "none";
      // A masonry grid with 8px gutter, with 3 columns on desktop, 2 on tablet, and 1 column on mobile devices.
      masonry(".masonry", ".masonry-brick", 8, 3, 2, 1);
      console.log("Loaded");
    });
  }, false);
});
.wrapper {
  margin: 2em auto;
  max-width: 970px;
}

.ta-center {
  text-align: center;
}

img {
  vertical-align: middle;
  max-width: 100%;
}

.masonry {
  display: flex;
  flex-flow: column wrap;
  margin-left: -8px;
  /* Adjustment for the gutter */
  counter-reset: brick;
  width: 100%;
}

.masonry-brick {
  overflow: hidden;
  border-radius: 5px;
  margin: 0 0 8px 8px;
  /* Some Gutter */
  background-color: #eee;
  position: relative;
}

.masonry-brick:after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5000;
  color: white;
  transform: translate(-50%, -50%);
  counter-increment: brick;
  content: counter(brick);
  transition: font-size .25s, opacity .25s ease-in-out;
  font-weight: 700;
  opacity: .5;
  font-size: 1.25em;
}

.masonry-brick:hover:after {
  font-size: 2.25em;
  opacity: 1;
}

.masonry-brick-caption {
  padding: 1.5em;
  text-align: center;
}

.masonry-preloader {
  font-size: 2em;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .5;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (min-width: 1024px) {
  /* Vertical masonry bricks on desktop-sized screen */
  .masonry-brick {
    width: 33.33333%;
  }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
  /* Vertical masonry bricks on tablet-sized screen */
  .masonry-brick {
    width: 50%;
  }
}

.masonry-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: brightness(50%);
}
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<div class="masonry">
  <figure class="masonry-brick"><img src="https://unsplash.it/700/800?image=1" alt="Masonry Brick #1" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/600?image=2" alt="Masonry Brick #2" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/400?image=3" alt="Masonry Brick #3" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/500?image=4" alt="Masonry Brick #4" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/700?image=5" alt="Masonry Brick #5" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/300?image=6" alt="Masonry Brick #6" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/500?image=7" alt="Masonry Brick #7" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/650?image=8" alt="Masonry Brick #8" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/350?image=9" alt="Masonry Brick #9" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/420?image=10" alt="Masonry Brick #10" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/300?image=11" alt="Masonry Brick #11" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/500?image=12" alt="Masonry Brick #12" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/550?image=13" alt="Masonry Brick #13" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/900?image=14" alt="Masonry Brick #14" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/800?image=15" alt="Masonry Brick #15" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/400?image=16" alt="Masonry Brick #16" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/500?image=17" alt="Masonry Brick #17" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/650?image=18" alt="Masonry Brick #18" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/550?image=19" alt="Masonry Brick #19" class="masonry-img"></figure>
  <figure class="masonry-brick"><img src="https://unsplash.it/700/440?image=20" alt="Masonry Brick #20" class="masonry-img"></figure>
</div>
GibsonFX
  • 1,000
  • 2
  • 10
  • 33