Discussion :

[thirt]

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

[Invité]

Bonjour,

tu n'as toujours pas de code à montrer ?

[thirt]

Bonjour Jérôme,

merci pour votre réponse.

En effet, j'ai déjà eu l'occasion de faire une partie avec les grids mais je me demandais simplement comment faire pour rendre une colonne facultative et que l'autre colonne prenne toute la largeur dans ce cas-là.

Je continue mes recherches de mon côté.

Bon dimanche.
Thierry

[ma5t3r]

Salut, oui, c'est facile mais pas directement en CSS
Seul un test au préalable via le PHP pourra te permettre d'appliquer telle ou telle classe CSS ou construction HTML

[NoSmoking]

Bonjour,

Salut, oui, c'est facile mais pas directement en CSS

je ne vois pas en quoi cela ne serait pas réalisable directement en CSS.

N'ayant pas la structure HTML de base on va considérer que l'on a quelque chose comme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!-- avec image -->
<article>
    <img src=" ... " alt=" ... ">
    <p>Lorem ipsum ... </p>
</article>
<!-- sans image -->
<article>
    <p>Lorem ipsum ... </p>
</article>

Plusieurs possibilités sont offertes dans ce cas.

On va exclure ici l’utilisation des grids, plutôt applicable au gabarit de mise en page.
Il nous reste

• display:flex, adapté en considérant que chaque <article> est un composant ;
• display:table sur les <article> et display:table-cell sur ses enfants directs ;
• float:left sur les <img> des <article>.

cela semble suffisant pour résoudre cette présentation.

[Invité]

On va exclure ici l’utilisation des grids, plutôt applicable au gabarit de mise en page.

+10

Pourtant, j'ai essayé de lui faire comprendre, mais non...

[ma5t3r]

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.

Les Images et non pas l'image ce qui change tout.

[NoSmoking]

il suffit de remplacer les <img> par des conteneurs de « slide », <div>/<ul>,le principe restant le même.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!-- avec slide images -->
<article>
    <ul class="slide"> ... </ul>
    <p>Lorem ipsum ... </p>
</article>
<!-- sans slide images -->
<article>
    <p>Lorem ipsum ... </p>
</article>

[ma5t3r]

Exact NoSmoking

1 cahier des charges
10 développeurs
10 façons de faire

Si ma tante avait un vélo d'homme, est-ce que je devrais l'appeler Tonton ? :-)

[thirt]

Bonjour à tous,

merci à vous pour votre aide et vos conseils.

En fait, c'est possible de résoudre ce problème via les grids.

Voici ce que j'ai utilisé pour le faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Il faut mettre ce code sur le parent. Si la première colonne est vide, sa largeur se réduira au maximum (marges et gap resteront applicables).

Bonne journée
Thierry

[NoSmoking]

En fait, c'est possible de résoudre ce problème via les grids.

Ce « layout » n'a pas été prévu/conçu pour cela : https://drafts.csswg.org/css-grid/#intro, pourquoi ne pas revenir aux <table>