Quand vous regardez sur la page manuel :CSS-GRID Flexbox ----> CSS Grid Créer un Layout observez sur les vidéos : 1, 2 et 3 là : barre des breackpoint elle est grisée car aucun BP n'est crée, ce n'est qu'à partir de la vidéo 4 qu'on voit qu'ils ont été configurés !

Je part du principe que vous avez vu toutes les vidéos et créeez les points indiqués et quand vous êtes sur la page pour suivre la vidéo 4 avant de commencer à modifier quoi que ce soit, créez les BP suivants :

1) - 430 px - 720px - 930px -1150 px puis placez votre taille de la toile à 1300 px maximum ou un peu moins c'est comme vous le souhaitez. Puis laisssez les BP en mode affichage défaut.

2) placez-vous sur le conteneur 'parent' ouvrez le menu de la grille.

3) regardez cette grille en bas à gauche ou on sélectionne les breackPoints (BP) choisir 720 px car c'est à ce niveau que l'affichage colonne affiche tout en ligne.

4) continuez de suivre les autres vidéos du manuel observez menu haut BP en désactivé donc grisé.

5)quand vous êtes pour suivre la vidéo 6 :attention : c'est là qu'il faut pas faire d'erreur car quand on veut changer le style de la grille (ou sans grille d'ailleurs) on doit absolument sélectionné le BP AVANTde
modifier le style .

6) Activez le menu BP , placez vous sur le connteneur PARENT , ouvrez le menu de la grille . Puis avant de modifier quoi que ce soit .... regardez en bas à gauche de la fenêtre, et sélectionnez le BP : 720 px, car c'est
à ce niveau que l'affichage de votre toile passera du mode colonnes pour afficher que des lignes, pour les utilisateurs qui regarderont votre site sur des teléphones , tablettes ou autres petits écrans .(attention je ne vous
explique pas comment 'indiqué' le nombre de 'px' pour chacun de ces écrans c'est pas le sujet de ce tuto ).

7) maintenant que 720 px est activé vous pouvez tranquillement faire toutes les modification souhaitées.
validez OK fermez la grille.

et là MIRACLE enfin après une semaine de recherche..... j'ai pu enfin voir la grille responsive de ce tuto
fonctionner. vous déplacez le curseur de la toile vers la gauche, quand vous serez à moins 720px l'affichage des élements conteneurs sera placé sur que des lignes , déplacez vers la droite après 720px l'affichage revient en position grand écran.

Voilou c'est terminé !

Je me suis tellement énervée avec ce problème, que je ne veux pas que çà arrive à d'autres débutant ....et j'ai donc fait ce tuto pour éviter à d'autres personnes de galérer :-)

ci-dessous voici les 6 grilles que je me suis crée, si çà intérèsse des personnes, indiquez le ici, et je vous mettrais
mes fichiers en liens pour télécharger.
A bientôt

TRANSLATION FRENCH :

Hi ,

And translation for English and Page end :

I'm doing this tutorial because I wasted a week searching to understand why this grid didn't work on my soft site Designer (SD) in the end it's that this video was missing essential information, for beginners, who don't master the principle of breakpoints.

Making a Responsive grid video 6: from the manual: css grid Flexbox.
overall it's very well done but there was a major omission, that is to say that we don't show when to create the breakpoints on the one hand and on the other hand when to create the BP to allow the online display of the page. Below is how to proceed.

[quote]
When you look on the manual page: CSS-GRID Flexbox ----> CSS Grid Create a Layout observe on
videos 1, 2 and 3 there: breakpoint bar it is grayed out because no BP is created, it is only from video 4 that we see that they have been configured!

I assume that you have done all the points indicated and when you are on the page to follow video 4 before starting to modify anything, create the following BP:

1) - 430 px - 720px - 930px -1150 px then set your canvas size to 1300 px maximum or a little less it is as you wish. Then leave the BP in default display mode.

2) place yourself on the 'parent' container open the grid menu.

3) look at this grid at the bottom left where we select the breakPoints (BP) choose 720 px because it is at this level that the column display displays everything in line.

4) continue to follow the other videos top menu BP in deactivated therefore grayed out.

5) when you are to follow video 6 :attention: this is where you must not make a mistake because when you want to change the style of the grid (or without a grid for that matter) you must absolutely select the BP BEFORE modifying the style.

6) Activate the BP menu, place yourself on the PARENT container, open the grid menu. Then before modifying anything .... look at the bottom left of the window, and select the BP: 720 px, because it is
at this level that the display of your canvas will switch from column mode to display only lines, for users who will view your site on phones, tablets or other small screens. (be careful I will not
explain how to 'indicate' the number of 'px' for each of these screens, this is not the subject of this tutorial).

7) now that 720 px is activated you can quietly make all the desired modifications.

validate OK close the grid.

and there MIRACLE finally after a week of research ..... I was finally able to see the responsive grid of this tutorial work. you move the canvas cursor to the left, when you are at less than 720px the display of the container elements will be placed on only lines, move to the right after 720px the display returns to widescreen position. There you go, it's over!

I got so annoyed with this problem, that I don't want it to happen to other beginners .... and so I made this tutorial to avoid other people struggling :-)

below are the 6 grids that I created, if anyone is interested, indicate it here, and I will put my files in links for you to download.

See you soon

Cary wrote:
Thank you, Inger. When I did a search for CSS-Grid Flexbox, I had no luck.