Grid en CSS - colonne vide et ordre ...

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
Modifié par THIRT05 (20 Aug 2019 - 21:25)

Hello,

THIRT05 a écrit :
Existe-il une priorité "order" comme avec les flex boxes

Oui tout à fait. Elle fonctionnera très bien si tes éléments sont placés de manière automatique dans la grille.

Dans le cas contraire, l'autre possibilité est tout simplement de modifier les coordonnées de ton élément "sujet-descriptif" : au lieu de se placer en colonne 2, tu lui dis de se placer en colonne 1 (par exemple via

grid-column: 1;

Modifié par Raphael (21 Aug 2019 - 07:56)

Bonjour Raphaël,

je tenais à vous remercier pour votre aide ainsi que vos explications.

Bonne journée à vous,
Thierry

Bonjour à tous,

par rapport à l'autre question que je me posais c'est-à-dire : 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 ?

Est-ce que je peux utiliser la fonction minmax() ?

A ce moment-là, j'aurai une ligne qui pourra avoir 2 colonnes au maximum en spécifiant la taille totale de la ligne dans le 1ère argument de la fonction minmax() :

grid-auto-rows : minmax(400px, auto);

Merci d'avance

Bonne soirée
Thierry

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 :



[ATTACH=CONFIG]499056[/ATTACH]

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

Bonjour à vous,

je me demandais quelle était la technique la mieux appropriée pour mettre plusieurs éléments sur la même ligne. Vaut-il mieux utiliser les grilles CSS3 ou les flexbox ou encore les float ?

Voici un petit exemple de ce que j'aimerais faire :

https://forum.alsacreations.com/upload/1566815067-74296-template.png

Diviseriez-vous ce design en grilles pour la mise en page de ce genre de modèle ? Actuellement, je ne vois pas trop comment faire. Donc, si je peux avoir votre avis et comment vous feriez, cela m'arrangerait.

Merci d'avance

Bonne journée
Thierry

-

THIRT05 a écrit :
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.

Oui c'est tout à fait dans cette optique que ces deux spécifications ont été réalisées.

THIRT05 a écrit :
je me demandais quelle était la technique la mieux appropriée pour mettre plusieurs éléments sur la même ligne. Vaut-il mieux utiliser les grilles CSS3 ou les flexbox ou encore les float ?

Si tu parles de l'ensemble "J'aime Commenter Partager", le plus logique et intuitif serait Flexbox car :
- c'est un composant qui reste sur un seul axe à la fois (c'est donc le rôle de Flexbox)
- ce n'est pas le gabarit de page (rôle de Grid Layout)
- ce ne sont pas des images avec du texte qui s'écoule autour (rôle de Float)

Bonjour Raphaël,

merci pour vos conseils. Je vais essayer de les appliquer. -:)

Bonne journée à vous,
Thierry

Bonjour à tous,

j'ai encore une question à vous poser avant de m'occuper du design du site. En fait, naturellement, j'ai un design pour la version smartphone et la version laptop. Je suppose qu'il vaut mieux s'occuper dans un 1er temps de la version smartphone car elle est plus simple à implémenter que la version laptop. Naturellement, comme le design est différent, je suppose que je pourrai jouer avec la propriété order des flexboxes pour afficher les blocs aux bons endroits.

En ce qui concerne le code HTML, vaut-il mieux l'écrire en fonction de la version smartphone qui est plus simple que par rapport à la version laptop qui est plus complexe.

Merci d'avance

Bonne journée
Thierry