Discussion :

[thirt]

Bonsoir à tous,

en fait, j'ai une petite question à vous poser au niveau des grilles.

Je vous explique ce que je veux faire :

version smartphone :

J'aurai un 1er bloc avec le sujet de l'article et un autre avec un image représentant l'article.

version laptop :

Dans le cadre du responsive, j'aimerais avoir 2 colonnes. Dans la première colonne, j'aurai une image représentant l'article et dans la deuxième colonne, j'aurai un sujet et un descriptif de l'article.
Dans certains cas, il est possible que je n'aie pas d'image. Comment puis-je faire dans ce cas-là pour que le sujet et le descriptif de l'article occupe également la colonne de l'image ? Existe-il une priorité "order" comme avec les flex boxes afin d'inverser la 1er bloc qui contient le sujet avec le 2ème bloc contenant l'image au niveau de la version smartphone ?

Merci d'avance

Bonne soirée
Thierry

[Invité]

Bonjour,

Décidément, tu ne veux pas écouter les conseils...

[thirt]

Bonjour Jérôme,

merci pour votre réponse.

Désolé mais, au contraire, je souhaite suivre vos conseils. J'ai eu l'occasion de regarder des vidéos et de lire des articles sur les grids et les flexbox. En fait, je pense que, dans le cadre de mon site, ce serait plus intéressant que j'utilise les grids pour créer les lignes et colonnes. Avec les grids, je peux également utiliser les flexbox pour positionner les éléments dans ces grilles.

Donc, je vais essayer de me débrouiller de cette façon-là mais ça risque de me prendre pas mal de temps.

Bonne journée
Thierry

[Invité]

Perso, je trouve le système de grid complexe à mettre en place et rébarbatif.
Mais bon...

• Grilles CSS (CSS Grid)
• A Complete Guide to Grid

A mon avis, il faut s'en servir surtout pour construire l'ossature principale du site, si celle-ci s'avère (relativement) complexe.
Pas pour mettre en page le contenu des articles.

Sinon, généralement, on s'en sort très bien avec des display:table/table-cell, ou des flexbox.

[thirt]

Bonsoir Jérôme,

comme d'habitude, je tenais à vous remercier pour votre aide et vos conseils.

En fait, quand je parle de grids, je veux parler de la technique pure du CSS3. Je ne veux pas parler des grilles de bootstrap ou de foundation. C'est pour cette raison que je ne comprends pas tellement pourquoi vous dites que les grids, c'est complexe. En ayant regardé plusieurs vidéos et en ayant lu différents articles, j'ai l'impression que les Grids CSS ne sont pas si compliquées que cela à utiliser.

Merci d'avance

Bonne soirée,
Thierry

P.S. : si ça ne vous dérange pas, je joindrai 2 images avec la version smartphone et laptop de ce que je veux faire. Comme cela, vous pourrez me donner votre avis à ce niveau-là.

[thirt]

Bonjour à tous,

je me permets de joindre 2 images pour vous montrer le genre de site que je compte réaliser. Il y a une image pour la version smartphone et une autre pour la version laptop.

Version smartphone :



Version laptop :



J'aimerais bien avoir votre avis pour savoir s'il est préférable d'utiliser les grilles ou les flexbox pour réaliser un tel design. Je suppose qu'il vaut mieux commencer par la version smartphone avant de faire celle du laptop vu que la version smartphone nécessite moins de code et est naturellement moins complexe que la version laptop.

Peut-être faut-il également que j'utilise une combinaison des grilles et des flexbox. Utiliser les grilles pour la structure de la page et utiliser les flexbox pour le positionnement des éléments à l'intérieure des différentes cellules.

Merci d'avance

Bonne soirée
Thierry