28172 sujets

CSS et mise en forme, CSS3

Dépannage de mon CSS pour changer mon GRID merci !

Bonjour,
J' ai 200 pages qui marchent TOP avec ce code CSS donc même si vous l'auriez fait différemment, je voudrait partir de mon code, pour une page qui demanderait que le
content soit coupé ainsi (voir image.

.wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr;  
  grid-template-areas: 
    "bandeau"
    "ToutMenu"
    "content"
    "footer";
  min-height: 100vh;
}
.bandeau {
  grid-area: bandeau;
  text-align:center;
}
.ToutMenu {
  grid-area: ToutMenu;
  text-align:center;
}
.content {
  grid-area: content;
  text-align:left;
}
.footer  {
  grid-area: footer;
  text-align:center;
}

upload/1684917576-85151-grid.jpg
Salut, au pif, j'ai pas testé :
.wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas: 
    "bandeau bandeau bandeau bandeau bandeau bandeau"
    "ToutMenu content content content content content"
    "footer footer footer footer footer footer";
  gap: 1em;
}

Quelques remarques :

J'ai gardé le code qui "marche", mais on a de l'anglais, du français, du CamelCase... il aurait été bien de choisir un principe pour le nommage et de s'y tenir.

J'ai modifié l'ordre de "1fr" pour grid-template-rows. En principe c'est le contenu que l'on veut étirer au maximum si la page ne fait pas la hauteur de la fenêtre du navigateur, pas le footer.

Ce premier jet n'est pas réellement responsive, il faut ensuite passer par des media queries pour réorganiser le layout sur une colonne par exemple. Ou, mieux encore, mettre tout ce code de layout dans un media queries "si écran supérieur à telle valeur".

Edit : c'est bon, j'ai testé et ça fonctionne.
Modifié par Olivier C (24 May 2023 - 17:20)
Administrateur
Olivier C a écrit :

.wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas: 
    "bandeau bandeau bandeau bandeau bandeau bandeau"
    "ToutMenu content content content content content"
    "footer footer footer footer footer footer";
  gap: 1em;
}


Hello !

Pour éviter les répétitions de colonnes alors qu'il n'y en a physiquement que 2 au final, je propose la variante suivante (pas testé) :

.wrapper {
  --menu-width: 20rem; /* largeur de ToutMenu, unité au choix */
  display: grid;
  grid-template-rows: auto 1fr; 
  grid-template-columns: var(--menu-width) minmax(0, 1fr);
  grid-template-areas: 
    "bandeau bandeau "
    "ToutMenu content"
    "footer footer";
  gap: 1em;
}


Bonne journée !
Modifié par Raphael (25 May 2023 - 08:32)
Bonjour,

pour les colonnes en effet, j'ai toujours été étonné de voir des projets de gabarits Grid comporter plus de colonnes qu'il n'y en a dans la réalité de la page. Il me semble que Grid, indépendamment de ses algorithmes qui ajustent les largeurs et autres, a une première fonction, tirer des lignes sur une page. Ou je me trompe ? À la petite école, quand la maîtresse nous donnait une feuille blanche et nous demandait de dessiner trois colonnes, on prenait nos crayons, une règle et on traçait deux traits sur la page. Oui, deux traits pour faire trois colonnes. Grid, c'est la même chose dans l'approche des colonnes. Par conséquent, c'est deux traits qu'il faut tirer (grid-template-rows: auto 1fr;) comme le montre Raphael. Je n'ai par contre aucune idée de la perturbation apportée au navigateur par une colonne en trop sur Grid et comment sont réalisés les calculs par le navigateur pour rectifier.
Oui c'est vrai, deux colonnes dans ce cas de figure c'est plus optimisé sur le plan de la configuration. Mais, non, cela ne pose aucun problème de performance au navigateur. C'est justement le principe de l'API grid layout de pouvoir définir des zones pour le document.
Modifié par Olivier C (25 May 2023 - 18:25)
Administrateur
Je confirme que cela ne pose strictement aucun souci de performance de prévoir plus de colonnes que nécessaire.
C'est une habitude de se référer à des "grilles" de 12 ou 6 colonnes puis d'y placer ses gabarits, généralement parce que les frameworks prévoient ce genre de configuration-type pour s'adapter à tous les cas de figures possible. Ce n'est pas du tout gênant, c'est parfois même une bonne idée de garder toujours la même méthodologie, histoire d'avoir une consistance entre les projets.
J'ai simplement proposé 2 colonnes... parce que j'en voyais deux Smiley cligne
Modifié par Raphael (25 May 2023 - 23:02)
Notes bien que toi le patron qui m'a lancé en son temps sur les Grilles je suis touché par le temps que tu prends pour nous aider Smiley cligne merci encore !
Je note aussi pour les grilles en trop. Je n'y prêterai plus attention par l'avenir, et c 'est une bonne réponse à mon étonnement à ce sujet.
Prévenir un modérateur
Répondre au sujet
Aller à