28116 sujets

CSS et mise en forme, CSS3

Fusionnez deux cellules verticales avec grid

Bonjour à tous

J'ai trois éléments dans un conteneur <div class="container"> et je voudrais :
- que la <div class="item-1"> soit dans une première colonne
- que les <div class="item-2">, <div class="item-3"> soit dans une deuxième colonne mais dans la même rangée.

J'y suis presque avec :

.containert {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 10px;
  }

  .item-1 {
    grid-column: 1;
  }

  .item-2, item-3 {
    grid-column: 2;
  }

Mais avec ce code, .item-3 est bien dans la deuxième colonne mais dans la deuxième rangée (ce qui est un comportement normal).

Comment faire pour que .item-3 soit juste en dessous de .item-2 dans la même rangée ?

Merci de votre aide
Modifié par pitav (15 Feb 2018 - 09:20)
Administrateur
Hello,

Tu as simplement fait une erreur de typo : tu as oublié le "." devant le nom de classe.

Ce code fonctionne : 

.item-2, .item-3 {
    grid-column: 2;
  }


Bonne journée Smiley smile
Merci pour la réponse.

Il s'agissait d'une erreur de frappe pour le point oublié.
Mais mon problème demeure quand même.

Un dessin valant mieux qu'un long discourt voici une image de ce que j'ai actuellement en figure 1 et ce que je voudrais obtenir en figure deux :
upload/1518684762-61574-capturedaeacran2018-02-15aa09.png
Merci
Salut j'ai fait le test dans fiddle Smiley cligne et en effet ça fonctionne très bien Smiley smile 

<div class="container">
<div class="item-1">
  item1
</div>

<div class="item-2">
  item 2
</div>

<div class="item-3">

  item3
</div>

</div>


.container {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 10px;
  }

  .item-1 {
    grid-column: 1;
  }

  .item-2, .item-3 {
    grid-column: 2;
  }


En revanche dans ce que tu donnes comme peu d'information Smiley smile tu as un div container et une class containert c'est surement juste ça comme le point qui manquait ??
Oui ça fonctionne... mais pas comme je veux.
Le problème vient de .item-1 qui est une image plus haute que le contenu de .item-2. Ça a pour conséquence de décaler verticalement .item-3 cf. fig.1
Administrateur
Ah OK Smiley smile

Tu peux effectivement fusionner ton premier item en lui ajoutant : 
grid-row: 1 / 3;
Ça marche !
Je n'ai pas encore très bien compris comment mais ça marche.
J'ai acheté un très bon livre intitulé CSS 3 FLEXBOX j'attends avec impatience CSS 3 GRID pour mieux comprendre Smiley lol
Merci
Administrateur
pitav a écrit :
J'ai acheté un très bon livre intitulé CSS 3 FLEXBOX j'attends avec impatience CSS 3 GRID pour mieux comprendre Smiley lol
Moi aussi ! Smiley lol
Sujet clos
Aller à