Une grille avec des carrés réactifs

je veux créer une maquette de grille avec des carrés réactifs.

j'ai l'impression que je devrais être capable de faire cela avec la disposition de la grille CSS mais avoir de la difficulté à définir la hauteur de chaque carré pour être égale à la largeur.

avoir aussi de la difficulté à placer une gouttière entre chaque carré.

<!-Est-ce que je devrais utiliser flexbox?

actuellement mon HTML ressemble à cela mais sera dynamique de sorte que plus de carrés peuvent être ajoutés. Et bien sûr, il doit être responsive so utilisera idéalement une requête média pour la réduire à une colonne.

<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

en utilisant CSS grid, c'est aussi loin que j'ai eu

.square-container{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    .square {

    }
}

j'ai été capable d'aller un peu plus loin avec flexbox et d'utiliser l'espace-entre pour aligner les carrés avec une bonne gouttière, mais j'avais encore du mal à obtenir la hauteur pour correspondre à la largeur de chaque carré.

Je n'ai pas pu trouver d'exemples de ce qui est fait avec flexbox ou grid mais tous les exemples seraient appréciés car bien.

Merci

16
demandé sur Michael_B 2017-10-03 19:08:37

2 réponses

padding-bottom trick est le plus utilisé pour accomplir cela.

vous pouvez le combiner avec Flexbox et CSS Grid, et comme utiliser le pourcentage pour la marge / padding donne un résultat incohérent pour les éléments flex/grid, on peut ajouter un wrapper supplémentaire, ou comme ici, en utilisant un pseudo, de sorte que l'élément avec le pourcentage n'est pas l'élément flex/grid.

notez, si vous voulez ajouter du contenu à la content élément, il faut être en position absolue de garder la place de l'aspect ratio.

Violon démo - Flexbox

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}
<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

Grille CSS version

.square-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  grid-gap: 10px;
}

.square {
  position: relative;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}
<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>
10
répondu LGSon 2017-10-04 06:33:29

Essayez d'utiliser fenêtre d'affichage unités de pourcentage.

jsFiddle

.square-container {
  display: grid;
  grid-template-columns: repeat(3, 30vw);
  grid-template-rows: 30vw;
  grid-gap: 2.5vw;
  padding: 2.5vw;
  background-color: gray;
}

.square {
  background-color: lightgreen;
}

body {
  margin: 0; /* remove default margins */
}
<div class="square-container">
  <div class="square">
    <div class="content"></div>
  </div>
  <div class="square">
    <div class="content spread"></div>
  </div>
  <div class="square">
    <div class="content column"></div>
  </div>
</div>

spec:

5.1.2. Fenêtre d'affichage de pourcentage longueurs:vw, vh,vmin,vmax unités

les longueurs des points de vue en pourcentage sont relatives à la taille de la bloc contenant initial. Lorsque la hauteur ou la largeur de la première contenant bloc est modifié, ils sont mis à l'échelle en conséquence.

  • unité vw - égale à 1% de la largeur du bloc contenant initial.
  • vh unité - Égale à 1% de la hauteur de la première contenant bloc.
  • unité vmin - Égale à la plus petite des vw ou vh.
  • unité vmax - Égale à la plus grande de vw ou vh.
8
répondu Michael_B 2017-10-03 16:13:26