Flexbox

<body>
  <section>
    <article>
      <header>
        <h1>Siamese</h1>
      </header>
      <main>
        <p>Il gatto Siamese proviene dall'antico regno di Siam, l'attuale Thailandia. Fu a partire dal 1880 quando si iniziarono a commercializzare gli invii al Regno Unito e in seguito agli Stati Uniti. Negli anni 50 del XX secolo, il gatto Siamese iniziò a guadagnare protagonismo venendo scelto da molti allevatori e altrettanti giudici per i concorsi di bellezza.</p>
        <p>Esistono due tipi di gatto Siamese:</p>
        <p>Il gatto Siamese moderno o Siamese è una varietà di quello che nacque nel 2001 che presenta una forma più sottile, allungata e orientale. I tratti sono marcati e pronunciati. È il tipo più utilizzato per quanto riguarda i concorsi di bellezza. Il gatto Siamese tradizionale o Thai è probabilmente il più conosciuto. La sua costituzione è quella tipica di un gatto comune, ma che presenta i colori originali del gatto Siamese tradizionale. Entrambe le varietà si caratterizzano per il loro schema di colore pointed tipico, la colorazione scura dove la temperatura corporea è minore (estremità, coda, volto e orecchie) che contrasta i toni del resto del corpo del felino.</p>
      </main>
      <footer>
        <button>Leggi tutto</button>
      </footer>
    </article>
    <article>
      <header>
        <h1>Scottish fold</h1>
      </header>
      <main>
        <p>Famoso in tutto il mondo, lo Scottish Fold o Gatto Scozzese è noto per le adorabili orecchie abbassate e i suoi occhi teneri. Personaggi famosi come Ed Sheeran e Taylor Swift hanno deciso di adottare gatti di questa razza. Questo è, senza dubbio, perché oltre al suo aspetto magnifico, lo Scottish Fold è un animale tranquillo, socievole e davvero affettuoso.</p>
      </main>
      <footer>
        <button>Leggi tutto</button>
      </footer>
    </article>
    <article>
      <header>
        <h1>Sphynx</h1>
      </header>
      <main>
        <p>Il gatto Sphynx (o gatto nudo) è un animale veramente unico al mondo, fu il primo gatto ad essere accettato come razza senza pelo. È la tipica razza di gatto che o piace molto o non piace affatto. Molti esperti dicono che proviene dalla razza Devon Rex, con la quale ha molte caratteristiche in comune.</p>
        <p>La mancanza del pelo è dovuta ad una mutazione che si è originata col passare del tempo da una naturale mutazione del gatto domestico.</p>
      </main>
      <footer>
        <button>Leggi tutto</button>
      </footer>
    </article>
    <article>
      <header>
        <h1>Persiano</h1>
      </header>
      <main>
        <p>Il gatto Persiano è facilmente riconoscibile per il viso largo e piatto e per il pelo folto e abbondante. Questi gatti vennero introdotti in Italia dall'antica Persia (attuale Iran) verso il 1620 anche se le origini precise sono sconosciute. Lo standard del Persiano attuale come lo conosciamo oggi venne stabilito nel 1800 in Inghilterra e proviene dal gatto Angora Turco.</p>
      </main>
      <footer>
        <button>Leggi tutto</button>
      </footer>
    </article>
    <article>
      <header>
        <h1>Ragdoll</h1>
      </header>
      <main>
        <p>Il gatto di razza Ragdoll nasce nel 1960 negli Stati Uniti, più precisamente in California, ma non venne riconosciuto ufficialmente fino a dieci anni dopo. L'incrocio deriva dall'accoppiamento di una gatta Angora con un esemplare maschio di Sacro di Birmania. Al giorno d'oggi è una delle razze più apprezzate dell'America Settentrionale.</p>
      </main>
      <footer>
        <button>Leggi tutto</button>
      </footer>
    </article>
    <article>
      <header>
        <h1>Norvegese delle foreste</h1>
      </header>
      <main>
        <p>Il gatto norvegese delle foreste è un gatto domestico che proviene dal Nord Europa ed è uno degli animali domestici più popolari in Svezia, Islanda, Francia e, naturalmente, Norvegia. Si tratta di un gatto in grado di adattarsi perfettamente ai climi freddi grazie al loro folto manto composto da peli impermeabili e un sottopelo lanoso. Inoltre si tratta di un'ottima opzione per chi soffre di allergia ai gatti dato che si tratta di una delle poche razze di gatti anallergici.</p>
      </main>
      <footer>
        <button>Leggi tutto</button>
      </footer>
    </article>
  </section>
</body>

body {
  background-color: black;
  margin: 0;
}

section {
  display: flex;
  flex-wrap: wrap;
}

article {
  display: flex;
  flex-direction: column;
  flex-basis: 250px;
  flex-grow: 1;
  padding: 1rem;
  margin: 0.5rem;
  background-color: white;
  border-radius: 5px;
}

article footer {
  display: flex;
  justify-content: center;
  flex-basis: 100px;
  flex-grow: 1;
  align-items: flex-end;
}

@media all and (max-width: 418px) {
  article {
    display: block;
  }
}

// no js

<div class="masonry-container">
    <div class="masonry-brick"><img src="https://placecats.com/700/400"></div>
    <div class="masonry-brick"><img src="https://placecats.com/600/300"></div>
    <div class="masonry-brick"><img src="https://placecats.com/750/500"></div>
    <div class="masonry-brick"><img src="https://placecats.com/650/350"></div>
    <div class="masonry-brick"><img src="https://placecats.com/550/450"></div>
    <div class="masonry-brick"><img src="https://placecats.com/700/350"></div>
    <div class="masonry-brick"><img src="https://placecats.com/600/600"></div>
    <div class="masonry-brick"><img src="https://placecats.com/700/700"></div>
    <div class="masonry-brick"><img src="https://placecats.com/600/250"></div>
    <div class="masonry-brick"><img src="https://placecats.com/400/300"></div>
    <div class="masonry-brick"><img src="https://placecats.com/700/420"></div>
    <div class="masonry-brick"><img src="https://placecats.com/700/450"></div>
    <div class="masonry-brick"><img src="https://placecats.com/600/550"></div>
    <div class="masonry-brick"><img src="https://placecats.com/550/640"></div>
    <div class="masonry-brick"><img src="https://placecats.com/700/420"></div> </div>

.masonry-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  width: 100%;
}
.masonry-brick {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  height: 250px;
  min-width: 150px;
  margin: 0 0 8px 8px;
}
img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  vertical-align: middle;
}

.masonry-brick:nth-child(3n+1) {
  width: 280px;
}
.masonry-brick:nth-child(3n+1):nth-child(3n+2) {
  width: 250px;
}
.masonry-brick:nth-child(3n+1):nth-child(3n+3) {
  width: 300px;
}
.masonry-brick:nth-child(3n+1):nth-child(3n+4) {
  width: 340px;
}

// no js