DEV Community

Cover image for Implementing Masonry Grid with HTML, CSS, and JS
ncutixavier
ncutixavier

Posted on

Implementing Masonry Grid with HTML, CSS, and JS

#html #css #javascript #masonry

Keeping your website's design adaptable and visually appealing can be a challenge. This article explores Masonry.js, a powerful JavaScript library that helps developers create beautiful and responsive grid layouts. By utilizing Masonry.js, you can ensure your website's content automatically adjusts and rearranges itself for optimal viewing on any device, from desktops to tablets and smartphones.

Requirements

You can install a masonry package through https://www.npmjs.com/package/masonry-layout

OR

You can use CDN

HTML

<div class="iam-news-avvisi-listing__container--content container-default">
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="picture">
      <img src="https://images.unsplash.com/photo-1713781317896-75f337b2db2a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8" alt="news" width="384" height="201">
    </div>
    <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">1 News</p>
        <p>14/11/2023</p>
      </div>
      <h2 class="content-card__title">Sciopero del settore igiene ambientale del 17/11/2023</h2>
      <p class="content-card__description news">
        Nell’intera giornata di venerdì 17 novembre, in occasione dello sciopero indetto dalle segreterie nazionali di alcune organizzazioni sindacali dei lavoratori del comparto di igiene ambientale, i servizi legati alla raccolta rifiuti e ai Centri di Raccolta potrebbero subire sospensioni o riduzioni . Nelle ore di sciopero saranno comunque garantiti i servizi essenziali e saranno assicurate le prestazioni indispensabili a tutela della sicurezza, nel rispetto degli accordi applicativi della Legge 146/90, così come modificata dalla Legge n. 83/2000 e successive deliberazioni della Commissione di Garanzia che regolamentano l’esercizio del diritto di sciopero. Le attività riprenderanno regolarmente al termine della giornata di sciopero con l’adozione di tutte le misure organizzative necessarie a ripristinare la regolarità dei servizi. Il recupero dei mancati passaggi della raccolta porta a porta avverrà in occasione del successivo passaggio previsto dai calendari. 
      </p>
      <div class="content-card__bottom">
        <a href="/content/iam/comune/news-e-avvisi/dettaglio.html?id=47&amp;comune=BERCETO" class="">LEGGI TUTTO</a>
      </div>
    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">2 Avvisi</p>
        <p>05/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Con la presente comunichiamo che l'Ecosportello di Strada Santa Margherita di Parma sarà chiuso nella giornata del 13.01.2024 per festività Patronale. Il team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente
      </p>
    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">3 Avvisi</p>
        <p>05/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Con la presente comunichiamo che l'Ecosportello di Strada Santa Margherita di Parma sarà chiuso nella giornata del 13.01.2024 per festività Patronale. Il team Iren Ambiente 
      </p>

    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">4 Avvisi</p>
        <p>05/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Con la presente comunichiamo che l'Ecosportello di Strada Santa Margherita di Parma sarà chiuso nella giornata del 13.01.2024 per festività Patronale. Il team Iren Ambiente 
      </p>

    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="picture">
      <img src="https://images.unsplash.com/photo-1713781317896-75f337b2db2a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8" alt="news" width="384" height="201">
    </div>
    <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">5 News</p>
        <p>14/11/2023</p>
      </div>
      <h2 class="content-card__title">Sciopero del settore igiene ambientale del 17/11/2023</h2>
      <p class="content-card__description news">
        Nell’intera giornata di venerdì 17 novembre, in occasione dello sciopero indetto dalle segreterie nazionali di alcune organizzazioni sindacali dei lavoratori del comparto di igiene ambientale, i servizi legati alla raccolta rifiuti e ai Centri di Raccolta potrebbero subire sospensioni o riduzioni . Nelle ore di sciopero saranno comunque garantiti i servizi essenziali e saranno assicurate le prestazioni indispensabili a tutela della sicurezza, nel rispetto degli accordi applicativi della Legge 146/90, così come modificata dalla Legge n. 83/2000 e successive deliberazioni della Commissione di Garanzia che regolamentano l’esercizio del diritto di sciopero. Le attività riprenderanno regolarmente al termine della giornata di sciopero con l’adozione di tutte le misure organizzative necessarie a ripristinare la regolarità dei servizi. Il recupero dei mancati passaggi della raccolta porta a porta avverrà in occasione del successivo passaggio previsto dai calendari. 
      </p>
      <div class="content-card__bottom">
        <a href="/content/iam/comune/news-e-avvisi/dettaglio.html?id=47&amp;comune=BERCETO" class="">LEGGI TUTTO</a>
      </div>
    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="picture">
      <img src="https://images.unsplash.com/photo-1713781317896-75f337b2db2a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8" alt="news" width="384" height="201">
    </div>
    <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">6 News</p>
        <p>14/11/2023</p>
      </div>
      <h2 class="content-card__title">Sciopero del settore igiene ambientale del 17/11/2023</h2>
      <p class="content-card__description news">
        Nell’intera giornata di venerdì 17 novembre, in occasione dello sciopero indetto dalle segreterie nazionali di alcune organizzazioni sindacali dei lavoratori del comparto di igiene ambientale, i servizi legati alla raccolta rifiuti e ai Centri di Raccolta potrebbero subire sospensioni o riduzioni . Nelle ore di sciopero saranno comunque garantiti i servizi essenziali e saranno assicurate le prestazioni indispensabili a tutela della sicurezza, nel rispetto degli accordi applicativi della Legge 146/90, così come modificata dalla Legge n. 83/2000 e successive deliberazioni della Commissione di Garanzia che regolamentano l’esercizio del diritto di sciopero. Le attività riprenderanno regolarmente al termine della giornata di sciopero con l’adozione di tutte le misure organizzative necessarie a ripristinare la regolarità dei servizi. Il recupero dei mancati passaggi della raccolta porta a porta avverrà in occasione del successivo passaggio previsto dai calendari. 
      </p>
      <div class="content-card__bottom">
        <a href="/content/iam/comune/news-e-avvisi/dettaglio.html?id=47&amp;comune=BERCETO" class="">LEGGI TUTTO</a>
      </div>
    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">7 Avvisi</p>
        <p>05/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Con la presente comunichiamo che l'Ecosportello di Strada Santa Margherita di Parma sarà chiuso nella giornata del 13.01.2024 per festività Patronale. Il team Iren Ambiente 
      </p>

    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">8 Avvisi</p>
        <p>24/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente
      </p>

    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
    <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">9 Avvisi</p>
        <p>24/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente 
      </p>

    </div>
    </div>
  </div>
  <div class="content-card iam__news-avvis__listing--card">
   <div class="card">
      <div class="content-card__content">
      <div class="content-card__top">
        <p class="content-card__top--tag">10 Avvisi</p>
        <p>24/01/2024</p>
      </div>
      <h2 class="content-card__title"></h2>
      <p class="content-card__description notifica">
        Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente Gentile utente, ti comunichiamo che, in data 02-02-2024 , l' Ecosportello di Felino in Piazza Modini , rimarrà chiuso per festività patronale. Team Iren Ambiente
      </p>

    </div>
   </div>
  </div>

            </div>
Enter fullscreen mode Exit fullscreen mode

CSS

body {
    color: #374046;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1.15em;
}

.content-card {
  background-color: silver;
  border-radius: 24px;
  box-shadow: 0px 8px 18px -6px #0033A01A;
  width: 390px;
  margin-bottom: 24px;
}

@media (max-width: 786px) {
  .content-card {
    width: 330px;
  }
}

.card {
  padding: 24px;
}

img {
  width: 100%;
}

.container-default {
  margin: 0 auto;
}

.news {
      overflow: hidden;
    display: -webkit-box !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
Enter fullscreen mode Exit fullscreen mode

JS

var grid = document.querySelector('.container-default');
var msnry = new Masonry(grid, {
  itemSelector: '.content-card',
  horizontalOrder: true,
  gutter: 20,
  fitWidth: true
});
Enter fullscreen mode Exit fullscreen mode

Notes

If you plan to use Masonry.js in a project that fetches data, make sure to run the Masonry code after your data has been successfully retrieved.

References

Top comments (0)

Read next

madsstoumann profile image

Eurovision Gradients

Mads Stoumann -

jroycodes profile image

How To Get Started With "DOM" in JavaScript.

Jonathan R. Mugisha -

dariusc16 profile image

Express

Darius Cooper -

fibonacid profile image

OAuth2 and AWS Cognito for Browser Extensions

Lorenzo Rivosecchi -