Grids CSS - 2 colonnes dont 1 facultative ...

Bonjour à tous,

je suis face à un problème dont j'aimerais avoir votre avis.

En fait, j'aurais une grid à 2 colonnes. Dans la 1ère, colonne, j'aurai les images concernant l'article qui défileront et, dans la 2ème colonne, j'aurai l'article en lui-même.

Il peut arriver que je n'aie aucune photo pour un article. Dans ce cas-là, j'aimerais que l'article occupe les 2 colonnes.

Est-ce facile de faire cela avec les grids ?

Merci d'avance

Bonne journée
Thierry

Bonjour aliasdmc,

merci beaucoup pour votre l'aide ainsi que l'exemple ci-joint.

Donc, si je comprends bien, je dois utiliser la pseudo-class :empty afin de pouvoir changer la structure de ma grille au cas où je n'ai aucune image. Donc, lors du chargement de la page, je teste sur la pseudo-class :empty afin de pouvoir fixer la structure de ma grille.

Encore merci pour votre aide.

Bon dimanche
Thierry
Modifié par THIRT05 (01 Sep 2019 - 17:01)

Bonjour,

il y aurait aussi la possibilité de faire sur le parent :

  display:grid;
  grid-template-columns: auto 1fr;

Si la première colonne est vide, sa largeur se réduira au maximum. marges et gap resteront applicables.
exemple: https://codepen.io/gc-nomade/pen/bGbowNX

Cdt,

Bonjour gcyrillus,

merci beaucoup pour votre aide.

Je vais essayer votre solution.

Passez une agréable journée.
Thierry