28111 sujets

CSS et mise en forme, CSS3

Type de positionnement grid / flexbox et alignement des blocs

Bonjour,

Aujourd'hui je suis face à un problème que je n'arrive pas à résoudre. J'aimerais simuler le comportement du positionnement de l'image ci dessous.

Partir du positionnement de base (le premier groupe de bloc sur l'image).

Ensuite toujours afficher bloc2 et bloc3 à côté de bloc1 jusqu'à une certaine largeur d'écran. En diminuant la largeur, que bloc1 reste fixe mais que la largeur de bloc2 et bloc3 se réduise permettant ainsi à bloc3 de dépasser la hauteur générale de bloc1.

A partir d'une certaine largeur d'écran, passer bloc3 en dessous tout en gardant bloc1 et bloc2 à côté.

Puis pour terminer, à partir d'une certaine largeur, passer bloc2 en dessous de bloc3.

upload/1551380075-2767-rendufenetres.png

Je n'ai aucun problème avec le code associé au reponsive, mais c'est principalement le positionnement des blocs qui me gène. Je n'arrive à rien en utilisant float, grid ne me permet pas de simuler le premier cas et flexbox est le pire de tous niveau mise en place.

Avez-vous des pistes, des méthodologies ou un bout de code à me filer ?

Merci à vous Smiley smile
Salut,
Je pensais pourvoir te dire "tout se fait en flexbox, quoi que ton truc semble corsé", mais je viens de vérifier dans codepen.io, et tout ce que j'arrive à faire c'est ça : https://codepen.io/Romarain/pen/WmQqmG

On voit bien que le wrap gère les deux premiers éléments pour remplir la largeur, puis passe à la ligne le 3e élément.

Donc pour ce que tu veux faire, on peut résumer la chose comme étant un paradoxe : d'un côté tu veux que les blocs 2 et 3 soient "liés" et agissent en dualité avec le bloc 1, mais d'un autre côté, tu veux aussi qu'à un moment ce soient les blocs 1 et 2 qui soient liés, et le bloc 3 qui dégage.

Or, c'est impossible à gérer nativement, et je pense qu'aucun système ne peut comprendre cette volonté sans avoir en entré un nombre de paramètres prévu pour ça. Maintenant, quant aux pistes, je dirais :
- Faire en sorte qu'à la base les blocs 2 et 3 soient dans un conteneur les liant.
- Séparer ce conteneur du bloc 1.
- Une requête @media pour détecter le moment où tu veux que le bloc 3 "sorte".
- Et là... *roulements de tambour*... qu'est-ce qui pourrait bien aider, si ce n'est un bon vieux "position: relative;" ? Smiley lol

Si d'autres ont des idées, allez-y.
Modérateur
Comme il y a grid dans le titre,... en partant sur un display:grid et (@media) médiaquerie, on pourrait faire ceci : https://codepen.io/gc-nomade/pen/MxaNVB

La question manque de détails : quel code HTML , et coté CSS , qu'as tu essayé ou envisagé , du display, du float , du position , seul ou combiné ?

Cdt
Bonjour,

je me suis fait un gabarit grid, pour tester différentes configurations avant de les utiliser sur des sites. Voilà ce que j'ai trouvé pour ton problème. C'est une façon de faire, il y en a d'autres. Je n'ai par contre pas trouvé de solution pour que "Bloc3" soit plus haut que "Bloc1", et je ne vois pas pourquoi tu veux que ce bloc dépasse l'autre. L'avantage des grid-template-areas est de donner une vision claire du placement des différents blocs.
Toutes les valeurs, aussi bien celles des blocs que celles des @medias sont arbitraires, juste pour servir d'exemple. Je ne sais pas utiliser codepen.
.container {
  display: grid;
  background-color:gray;

 grid-template-areas:  
    "nav content content"
    "nav side    side";    
  grid-template-columns: 300px 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 10px 10px;
  height: 100vh;
}
nav {
  grid-area: nav;  
  background:yellow;
}
main {
  grid-area: content;
  background:green;    
}
aside {
  grid-area: side;
  background:lightblue; }

@media (max-width:768px) {
   .container { 
   grid-template-areas:   
   	"nav content content"
   	"side side  side";
  
   	grid-template-columns: 1 fr 1fr;
    grid-template-rows:400px   	
   }
}
@media (max-width: 500px) {
  .container {
    grid-template-areas:      
      "nav"     
      "content"
      "side";
    grid-template-columns: 1fr;
    grid-template-rows:
      200px /* nav */   
      1fr /* main */    
      200px /* side */
      }
}

Le résultat :
upload/1551454572-67790-captrure-1bis.png upload/1551454599-67790-capture-2bis.png upload/1551454620-67790-capture-3bis.png

Bonne continuation.
Modifié par Bongota (01 Mar 2019 - 16:39)
Modérateur
Depassage a écrit :
Grid c'est le futur des layouts Smiley murf

Grid c'est le présent des layout ! Smiley lol
J'ai failli l'écrire. Mais je me sens pas vraiment dans le futur pour l'instant, c'est une technologie encore très peu exploitée. Smiley cligne
Modérateur
Perso je l'utilise déjà dans quasiment tout mes projets. Vraiment très pratique que ce soit pour un tableau, un énorme formulaire ou un layout de page et en plus hyper rapide pour repositionner ça selon les usages mobile / tablette / PC.

Il reste effectivement quelques bug dans des cas très pointu ou des vieux navigateurs mais bon. Pour moi c'est le présent Smiley smile

Il y a même eu un article ici même : https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html
@gcyrillus Mon respect ! C'est EXACTEMENT ce que je cherchais :o ! Merci, merci, merci ! J'ai légèrement adapté ton code pour au niveau de l'ordre des blocs en HTML et ça fonctionne parfaitement Smiley smile

Et niveau comptabilité avec IE ? Je sais qu'on peut adapter certaines fonctions à IE : https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html mais ce qui me gène c'est cette portion de code :

grid-row: 1 /span 2;


J'avoue que pour le moment je sèche niveau compréhension totale du code, c'est à un niveau au dessus pour moi (j'ai passé des années à coder en CSS 2).

Je prends le temps d'étudier tout ça et je reviens avec mes questions précises Smiley smile

1000 mercis !
Modérateur
Pour IE, tu peut essayer de jouer avec display:table et les mediaquerie exemple https://codepen.io/gc-nomade/pen/JzXvBw
voir tenter un filtrage avec @support pour les IE récalcitrant https://codepen.io/gc-nomade/pen/LaNJMv . (Pour test et à optimiser si envisageable).

Les grid-row : 1 / span 2 ; (ou -column) permettent d’étaler un element sur plusieurs case de la grille définie a partir d'un endroit précis (mieux que le fait rowspan/colspan dans les tableaux )

Cdt
Modifié par gcyrillus (02 Mar 2019 - 23:30)
Sujet clos
Aller à