1
votes

Comment faire quelque chose de similaire avec la grille css?

J'essaie d'obtenir une disposition en grille avec 6 éléments centrés sur la page comme suit:

Mais je n'arrive pas à obtenir la grille au centre des images, aucune idée?

 <div class="grid-container">
      <div class="grid-item one">1</div>
      <div class="grid-item two">2</div>
      <div class="grid-item three">3</div>  
      <div class="grid-item four">4</div>
      <div class="grid-item five">5</div>
      <div class="grid-item six">6</div>  
    </div>

   
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      background-color: #999999;
      padding: 10px;
    }
    
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
      &.one{
      	background-image: url("img/mainmeu/e.png");
    	}
      &.two{
      	background-image: url("img/mainmeu/b.png");
     	}
    }

css css-grid

2 commentaires

Pardon, pouvez-vous élaborer? Quelle partie n'est pas centrée? Ou le problème est-il lié aux images?

vérifiez les ans mis à jour.

3 Réponses :

1
votes

Utilisez column-gap et row-gap pour l'espacement de la grille.
Utilisez les propriétés background-image pour centrer l'image à l'intérieur de la grille

<div class="grid-container">
    <div class="grid-item one">1</div>
    <div class="grid-item two">2</div>
    <div class="grid-item three">3</div>
    <div class="grid-item four">4</div>
    <div class="grid-item five">5</div>
    <div class="grid-item six">6</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #999;
    column-gap: 10px;
    padding: 10px;
    row-gap: 30px;
    justify-items: left;
    align-items: center;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
    width: 120px;
    height: 120px;
    align-content: center;
    display: inline-grid;
}

.grid-item.one {
    background-image: url("https://via.placeholder.com/200x200");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.grid-item.two {
    background-image: url("https://via.placeholder.com/200x200");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

1 commentaires

La mise en page est attachée aux bords gauche de l'écran, au lieu d'être une grille centrée

0
votes

Puisque vous ne définissez pas de tailles, utilisez inline-grid et centrez-la en utilisant text-align: center sur le parent.

<div class="grid-container">
  <div class="grid-item one">1</div>
  <div class="grid-item two">2</div>
  <div class="grid-item three">3</div>
  <div class="grid-item four">4</div>
  <div class="grid-item five">5</div>
  <div class="grid-item six">6</div>
</div>

body {
  text-align: center;
}

.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: #999999;
  padding: 10px;
  grid-gap: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

0 commentaires

2
votes

Utilisez simplement justify-content: center pour centrer les éléments de la grille . Utilisez également des valeurs grid-gap pour obtenir la mise en page requise. Voir la démo ci-dessous:

<div class="grid-container">
  <div class="grid-item one">1</div>
  <div class="grid-item two">2</div>
  <div class="grid-item three">3</div>
  <div class="grid-item four">4</div>
  <div class="grid-item five">5</div>
  <div class="grid-item six">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #999999;
  padding: 10px;
  grid-row-gap: 20px; /* added */
  grid-column-gap: 10px; /* added */
  justify-content: center; /* added */
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  background-image: url("https://via.placeholder.com/200");
  background-size: cover; /* image as cover */
  box-sizing: border-box;
  
  /* added width */
  width: 20vw;
  /* center inner content using flexbox */
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-item:after {
  padding-top: 60%; /* according to your aspect ratio */
  content: '';
  display: block;
}

Si vous souhaitez faire varier les tailles de élément de grille , vous pouvez les dimensions relatives en utilisant le padding (car il est toujours basé sur la largeur). Dans la démo ci-dessous, j'ai utilisé padding-top: 60% (si vous utilisez 100%, vous obtiendrez un élément de grille carré):

<div class="grid-container">
  <div class="grid-item one">1</div>
  <div class="grid-item two">2</div>
  <div class="grid-item three">3</div>
  <div class="grid-item four">4</div>
  <div class="grid-item five">5</div>
  <div class="grid-item six">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #999999;
  padding: 10px;
  grid-row-gap: 20px; /* added */
  grid-column-gap: 10px; /* added */
  justify-content: center; /* added */
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  background-image: url("https://via.placeholder.com/200");
  background-size: cover; /* image as cover */
}

0 commentaires