suppression des marges de l'axe des ordonnées

Question

J'ai essayé de faire une mise en page de type maçonnerie, j'ai donc donné une hauteur et des couleurs aléatoires aux divs, mais il semble y avoir une marge sur l'axe des y avec les divs. Je veux que les divs aient une marge uniforme pour qu'elles ressemblent plus à une maçonnerie. Où est-ce que je me trompe avec ce code ?

import React from "react";
import "./styles.scss";
const colors = ["palevioletred", "red", "green", "blue", "yellow", "orange"];

const getRandomItem = items => {
  return items[getUniqueFromRange(0, items.length)];
};

const getUniqueFromRange = (min, max) => {
  return Math.floor(min + Math.random() * (max - min + 1));
};

export default class App extends React.Component {
  render() {
    return (
      <div class="wrapper">
        {Array.from({ length: 30 }).map((item, index) => (
          <div
            key={index}
            style={{
              background: getRandomItem(colors),
              height: getUniqueFromRange(100, 200)
            }}
          />
        ))}
      </div>
    );
  }
}

* { box-sizing: border-box; }

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 2em Sansita, sans-serif;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper > * {
  flex: 1 1 230px;
  border: 5px solid orange;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 20px;
  background-color: red;
  color: #fff;
}

codesetboîte

Answer 1

Afin d'obtenir la grille de maçonnerie verticale flexbox que vous recherchez, vous devez disposer d'une grille de type flex-direction: column .

Codes et boîtes

Dans le bac à sable ci-dessus, j'ai utilisé une hauteur arbitraire de 2000px pour le conteneur enveloppant, mais cet article explique une solution plus élégante où vous calculez la meilleure hauteur du conteneur à l'aide de JavaScript, ce qui empêchera tout espace blanc excessif d'apparaître dans votre grille de maçonnerie.

Answer 2

* {
  box-sizing: border-box;
}

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 2em Sansita, sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100vh;
}

.wrapper > * {
  border: 5px solid orange;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 20px;
  background-color: red;
  color: #fff;
}

Essayez ceci et voyez si c'est ce que vous recherchez.