CSS grid centrage

Bonjour,

Sur cette image appartenant à la page https://gite-tigoudoul.bzh/reservation.html



on remarque que sur smartphone les éléments de grille : "Disponibilités,...", "Lapolitique de réservation" et "Comment régler" ne sont pas centrées horizontalement. De plus je pensais que le code

     /* Grid entete 6 */
      #gallery-6 {
        display: grid;
        grid-template-columns: repeat(17, 1fr);
        width: 100%;
        margin:0 auto;
        margin-bottom: 100px;
      }
      #gallery-6 div#block-7 { 
        padding: 100px 0 150px 0;
      }
      #gallery-6 div#block-8, #gallery-6 div#block-9  { 
        background-color: var(--white);
        padding: 40px 20px;
        box-shadow: 4px 4px 10px var(--silver);
        border-radius: 10px;
    }
      #gallery-6 div#block-7 { /* bloc texte centré */
        grid-column: 2 / 17;
        grid-row: 1 / 8;
        background-color: var(--bleu1);
        border-radius: 10px;
      }
      #gallery-6 div#block-8 { /* bloc texte gauche */
        grid-column: 4 / 9;
        grid-row: 7 / 11;
        background-color: var(--white);
      }
      #gallery-6 div#block-9 { /* bloc texte droit */
        grid-column: 10 / 15;
        grid-row: 7 / 11;
        background-color: var(--white);
      }

  @media all and (max-width: 479px) {
    #gallery-6 div#block-7 { /* bloc texte centré */
        grid-column: 1 / 17;
        grid-row: 1 / 2;
        background-color: var(--bleu1);
        border-radius: 10px;
      }
      #gallery-6 div#block-8 { /* bloc texte gauche */
        grid-column: 1 / 17;
        grid-row: 4 / 5;
        background-color: var(--white);
      }
      #gallery-6 div#block-9 { /* bloc texte droit */
        grid-column: 1 / 17;
        grid-row: 7 / 8;
        background-color: var(--white);}
}

permettrait de séparer verticalement ces 3 éléments de grille.

Merci pour votre aide.

Cdt

Hello,

Ma première remarque ne va sans doute pas beaucoup t'avancer mais je ne peux m'empêcher d'être extrêmement dubitatif sur la lisibilité d'un tel code (pour nous, et même pour toi).

Comment peux-tu t'en sortir en souhaitant une grille de… 16 colonnes sur un écran de moins de 480 pixels ?

@media all and (max-width: 479px) {
    #gallery-6 div#block-7 { /* bloc texte centré */
        grid-column: 1 / 17;

Dans la capture d'écran que tu montres, je ne vois rien d'autre qu'une seule colonne. Pourquoi veux-tu te compliquer autant la vie ?


Ma seconde remarque est : pourquoi veux-tu absolument les placer en positionnement explicite chacun à des coordonnées précises telle que "grid-column: 1 / 17; grid-row: 7 / 8;" (avec un gros risque qu'ils se chevauchent) ?

Pourquoi ne pas simplement les laisser s'afficher naturellement les uns sous les autres par défaut puisque c'est… le comportement par défaut des éléments ?
Modifié par Raphael (24 Feb 2024 - 17:28)

Bonjour,

Pour les div#block-7, div#block-8, div#block-9 dans le media-query, j'aurais d'une part mis grid-column: 1 / -1; et d'autre part margin: 1em; pour les séparer les uns des autres et du bord.

Amicalement,

Bonjour,

Raphael a écrit :
Comment peux-tu t'en sortir en souhaitant une grille de… 16 colonnes sur un écran de moins de 480 pixels ?
...
Dans la capture d'écran que tu montres, je ne vois rien d'autre qu'une seule colonne. Pourquoi veux-tu te compliquer autant la vie ?
...
Pourquoi ne pas simplement les laisser s'afficher naturellement les uns sous les autres par défaut puisque c'est… le comportement par défaut des éléments ?

+1, je me disais la même chose concernant la complexité de la mise en page (grillé de justesse par Raphaël ).

D'ailleurs, ma proposition de mettre un grid-column: 1 / -1 (qui signifie "prendre toutes les colonnes) revient à dire qu'on ne veut qu'une seule colonne (pour les éléments concernés, pour les autres, je n'ai pas regardé).

Amicalement,

Bonjour,

Et si grid-column: 1 / -1 marche alors que grid-column: 1 / 17 ne marche pas, c'est peut-être parce qu'il n'y a pas 16 colonnes, mais plutôt 17.

EDIT: rappel au cas où, 1 / 17, ça signifie prendre les colonnes 1 à 16 (et non pas les colonnes 1 à 17). Or le conteneur #gallery-6 a 17 colonnes.

Amicalement,
Modifié par parsimonhi (24 Feb 2024 - 17:55)

Bonsoir,

Merci à tous les deux pour votre patience!

L'image du message précédent correspond à la vue sur smartphone. Sur ordi ça ressemble à cela



Bon je débute avec les CSS grids. En plus je dois avancer sur ce foutu site car la saison approche.

Comme je voulais un écartement assez faible entre les 2 boites qui débordent de la boite bleue, j'ai trouvé le seul moyen d'augmenter le nombre de colonnes pour en diminuer la largeur. Une autre solution plus nette ?

Merci encore en tout cas.

Amicalement

Bonjour,

Ce sont des margins left et right de 1em par exemple sur les blocks 8 et 9 qui auraient pu te permettre de les écarter légèrement l'un de l'autre en fenêtre large sans avoir besoin de rajouter une colonne.

As-tu testé la solution que j'ai proposé un peu plus haut ?

Amicalement,