[Résolu] Dans un site utilisant un GRID simplifié, faire une table en

Bon question mal titrée mais j'explique:
J'ai un site tout en GRID assez sommaire, en gros:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin :0; padding :0; } 
fieldset, img { border :0;margin: 0px 0px 0px 0px;} 
address, caption, cite, dfn, em, strong, th, var { font-style :normal; font-weight :normal; } 
ol, ul { list-style :none; } 
caption, th { text-align :left; } 
h1, h2, h3, h4, h5, h6 { font-size :100%; font-weight :normal; } 
/* =================fin du raz================= */ 
html, body {  height: 100%; } 
body { 	background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:24px;margin:0;border:0;text-align: center;}
h1          {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 40px;color:#222224;}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 40px;color:#222224;} 
* {box-sizing: border-box;} 
 
.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;
}
 
/* ETC.... */

Actuellement 200 pages qui marchent parfaitement.
Ma question;
Dans le corps d'une nouvelle page j'ai besoins dans le "CONTENT" de placer une grille (surtout pas une TABLE) qui ait cette disposition:

1) des groupes de 2 DIV ?
le premier ayant une image carrée (toutes identiques) avec une taille fixe de 250*250 Px et le deuxième un texte tenant dans 250*250 Px
2) en page large limité à 2 groupe par ligne
3) en page moyenne wraper en 1 groupe par ligne
4) sur smartphone et autres wraper image et mettre le carré texte en dessous.
DONC:
Faut-il déclarer un GRID dans le DIV de la partie CONTENT ? ou jouer avec des DIV ? bref je dirais même ouvert à tout' autre solution.
Mille mercis d'avance.

Fox-infograp a écrit :
Faut-il déclarer un GRID dans le DIV de la partie CONTENT ? ou jouer avec des DIV ?

Il n'y a aucun problème à utiliser d'autres conteneurs de grille au sein d'un autre conteneur de grille, si c'est bien une question sous-entendue ^^

_laurent a écrit :
Mais tu peux le faire en flex ou en block/inline-block. Y'a pas vraiment de bonne réponse là...

C'est clair ; pour styliser un élément particulier du contenu d'une page, la bonne réponse serait : avec quelle solution on est le plus à l'aise pour le faire ?
En tout cas, généralement, quand on a goûté à flex et grid (les deux ensembles se complètent particulièrement bien), je trouve qu'il est difficile de revenir aux techniques de positionnement plus classiques et de bosser avec des inline-block par exemple ^^

_laurent a écrit :
Salut,

Si je comprend bien, ta question est surtout de savoir si tu dois utiliser du grid ou pas.
Le fait que ta structure de site soit déjà en grid n'a aucune influence (si ?)

Je dirais que c'est une question d'affinité du coup. Si tu es a l'aise avec du grid tu peux. Mais tu peux le faire en flex ou en block/inline-block. Y'a pas vraiment de bonne réponse là...

Merci Laurent en fait c'est super, c'est encore plus libre que je pensait, et les autres réponses le confirment mille mercis à toi

Loraga a écrit :

Il n'y a aucun problème à utiliser d'autres conteneurs de grille au sein d'un autre conteneur de grille, si c'est bien une question sous-entendue ^^


C'est clair ; pour styliser un élément particulier du contenu d'une page, la bonne réponse serait : avec quelle solution on est le plus à l'aise pour le faire ?
En tout cas, généralement, quand on a goûté à flex et grid (les deux ensembles se complètent particulièrement bien), je trouve qu'il est difficile de revenir aux techniques de positionnement plus classiques et de bosser avec des inline-block par exemple ^^

Merci à toi Lorage, "avec quelle solution on est le plus à l'aise pour le faire ?" toi également tu me confirme cette grande souplesse. merci également à toi.

gcyrillus a écrit :
Si tu as toute une série de groupes, grid me semble aussi pas mal.

En jouant sur quelques conditions (auto-fill, max-width,...) il pourrait-etre possible de réduire les mediaqueries a de l'extra.

Idée exemple en partant d'un conteneur et des figure (groupes image+textes)

https://codepen.io/gc-nomade/pen/ZEMWgpq ... peut-être pas le plus simple

Cdt

Top niveau vos trois réponses, je vais voir ton lien et je reviens. Super ces trois réponses, elle me servirons de repère général et clarifient la vision d'une page

bonjour,

Quasi la seule que je n'avais pas commentée , voir https://developer.mozilla.org/fr/docs/Web/CSS/gap pour les détails

#grid-list {
  grid-template-columns: repeat(auto-fill, minmax(0,calc(500px + 1em)));/* calcul de largeur avec le gap, determine le nombre de colonnes */
  gap: 1em;/* celle-ci !! pour l'espace entre cellule dans la grille */
  max-width:100vw;/* stop ! */
  width: calc(1000px + 5em);/* on ne veut que deux groupes cotes à cotes au max */
  overflow:hidden;
}

Super l'Ami un vrais turbo pour répondre !! ,j'aurais du trouver, mais tu sais à 83 ans on utilisait peut de choses ,lorsque je voie ce qu'apporte le grid (tout mes site sont refait ainsi et tant d'autres choses.
Tu vois je ne connaissait même pas vw c'est super j'avais été lire tout dessus aprés avoir lu ta solution trop TOP

gcyrillus a écrit :
Si tu as toute une série de groupes, grid me semble aussi pas mal.

Cdt

Vraiment je le redit l'ami mais je suis en phase final à la qu'elle je ne m'attendait pas, a savoir compléter mon css et n'y connaissant pas assez je ne sait comment faire
tu vois j'ais un début ainsi

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin :0; padding :0; } 
fieldset, img { border :0;margin: 0px 0px 0px 0px;} 
address, caption, cite, dfn, em, strong, th, var { font-style :normal; font-weight :normal; } 
ol, ul { list-style :none; } 
caption, th { text-align :left; } 
h1, h2, h3, h4, h5, h6 { font-size :100%; font-weight :normal; } 

/* =================fin de la mise a zero=========== */ 

html, body {  height: 100%; }  

/* ===definition du Doctype et CSS commun a toute la page====== */ 
body { 	background-color:#bfc7cf;font-family:"Times New Roman", Times, serif;color:#3b747a; font-size:24px;margin:0;border:0;text-align: center;}
h1          {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 40px;color:#3b747a;}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 40px;color:#888888;} 
* {box-sizing: border-box;} 

/* ==========Organisation du GRID de toutes les pages====== */ 

.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;
}
  
/* ____________elements du doctype_________________  */
div.Limage_de_droite{position:fixed;top:300px;right:0;z-index:10;overflow:hidden;display:block;}
div.scrollUpB  {position: fixed;top : 10px;width:14px;right: 60px;z-index:70;}
div.scrollUpH  {position: fixed;bottom : 10px;width:14px;right: 60px;z-index:70;}
div.user-info { position: absolute;right: 50px;top: 2px;width:overflow :hidden; z-index :70; }
div.home{position:fixed;top:4px;left:4px;overflow:hidden;z-index:70;}

Tout va bien, d'autre part j'ais repris ton model qui me va à merveille et marche très bien J'ai à ce sujet pris des noms dans ton HTML et CSS de façon a n'avoir aucun risque
Seulement je n'arrives pas à le faire marcher !
car je le mets donc dans un "content" et dans le CSS je l'ai mis juste derrière ma déclaration de GRID
j'aurais peut-être du (si cela existe ) le déclarer dans mon content ???? ton avis ? merci d'avance