0
votes

Grille CSS: centrez tout le contenu dans la grille

Mon extrait de code ci-dessous fonctionne comme je le souhaite, mais je ne trouve aucun moyen de centrer tous les éléments du menu__items lorsqu'il y a plus d'espace disponible.

Sur des écrans plus petits, le résultat est comme souhaité:

Sur les grands écrans, j'obtiens ceci:

Ce que je veux, c'est ceci:

Voici mon code

<div class="menu__inner--flex">
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
</div>

body {
  background-color: #f5ce42;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu__item {
  max-width: 300px;
}

.menu__inner--flex {
  box-sizing: border-box;
  padding: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, max-content));
  grid-auto-rows: 1fr;
  gap: 20px;
}

css grid-layout

0 commentaires

4 Réponses :

0
votes

Ces deux éléments placeront le conteneur au centre avec une largeur de 75%

<div class="menu__inner--flex">
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
</div>

body {
  background-color: #f5ce42;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu__item {
  max-width: 300px;
}

.menu__inner--flex {
/* my answer */
  margin: auto;
  width: 75%;
  
  box-sizing: border-box;
  padding: 20px;
  /* delete width: 100vw; */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, max-content));
  grid-auto-rows: 1fr;
  gap: 20px;
}

0 commentaires

0
votes

Le problème est que vous avez défini la largeur de la grille à 100vw, ce qui rendra la grille à 100% de la largeur de la fenêtre, en raison de laquelle la grille commence de la gauche à la toute fin de l'écran. Pour les écrans plus petits, cela vous donne le résultat souhaité, mais pour les fenêtres plus grandes, tous les éléments de la grille sont placés sur la même ligne.

Je vous recommande de réduire la taille de la largeur à environ 60vw-80vw et d'ajouter une margin: 0 auto à la grille comme ceci:

<div class="menu__inner--flex">
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
</div>

body {
  background-color: #f5ce42;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu__item {
  max-width: 300px;
}

.menu__inner--flex {
  box-sizing: border-box;
  padding: 20px;
  width: 70vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, max-content));
  grid-auto-rows: 1fr;
  gap: 20px;
}

0 commentaires

-1
votes

Je suis d'accord avec les deux réponses, mais j'écrirais également une requête multimédia pour les écrans plus petits sous disons 800px en mettant la largeur de .menu__inner--flex à 100vw afin que vous obteniez l'effet souhaité de la grille prenant en charge tout l'écran comme vous vouliez en premier lieu.

0 commentaires

1
votes

Vous devez utiliser auto-fit et justify-content:

mise à jour possible:

<div class="menu__inner--flex">
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
  <a class="menu__item">
    <img src="http://placekitten.com/300/200">
  </a>
</div>

Démo en direct ci-dessous où l'élément est défini sur une largeur maximale de 180 pixels pour montrer le centrage en cours

body {
  background-color: #f5ce42;
  margin:0;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu__item {
  max-width: 180px;/* turned dow for demo purpose , 300px is also fine but requires a big screen */
}

.menu__inner--flex {
  box-sizing: border-box;
  padding: 20px; 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  grid-auto-rows: 1fr;
  /*  width:100vw;<== this is useless an a pain once a scrollbar shows up, it becomes bigger than the screen, remove it and forget it , idem for width:100% ...*/
  gap: 20px;
  justify-content:center;
}

  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  justify-content:center;

6 commentaires

Cette approche ressemble à la solution, mais l'utilisation de auto-fit crée une largeur de colonne inégale lorsque des images uniques ont des proportions différentes. Je vais essayer de résoudre ce problème en conservant le rapport hauteur / largeur sur l'image.

Je peux travailler avec votre solution suggérée, cependant 2 problèmes surviennent. Chaque fois que j'ai une image de portrait, elle s'affiche en pleine hauteur. Garder le rapport hauteur / largeur avec le rapport hauteur / largeur-padding-top-hack casse la réactivité de la grille, toutes les images sont de 180 pixels tout le temps. Le deuxième problème est que si un élément n'a pas d'image, il est tronqué à la largeur minimale. Fait un violon: jsfiddle.net/tgu3fy9z/3

@browsergarden Est-ce un résultat possible: jsfiddle.net/6bkr0dum (300px ramené à 180px pour voir le centrage se produire)

un autre avec du texte / image mélangés tous ensemble: jsfiddle.net/6bkr0dum/3

mon comportement prévu était de maintenir le rapport hauteur / largeur de l'espace terrestre et donc de recadrer les images du portrait. Mais cela casse la réactivité du 'menu__item' comme vous pouvez le voir ici: jsfiddle.net/v0mqszot/1

Ce sont les limites de la grille, js pourrait prendre le relais de l'img avec un ratio portrait. un exemple naïf: jsfiddle.net/rzx7wtnk/4