Follow

Dis-moi, gens de la pouëture,

Je voudrais aligner des vidéos avec un max de 3 par ligne. C'est à dire que je voudrais que la 4ème aille automatiquement se ranger sous la 1ère… Tu aurais une idée pour faire ça ?

Pour le moment j'utilise un flex mais il ne gère les vidéos que sur une ligne !

Peut-être que j'aurai plus de chance sur l'oiseau… Je vais tester

Merci à ceux qui ont boosté ;)

C'est bon, @ClovisGauzy m'adonné ma réponse, plus besoin de booster ! ;))

Dites, une fois voir…

Vous sauriez comment aligner les deux vidéos du bas bien à gauche ?

Siouplé, fioupliz, Bitte, por favor, etc…

Et hop ! Allez, dodo, avec la satisfaction du travail bien fait !

@ClovisGauzy Et tu implémentes ça comment ? Pour le moment, j'ai un

.container {display: flex;background-color: ;width: min-content;margin: 0 auto;border-radius:5px}

.flexitem {margin: auto;border-radius: 3px; }

@ClovisGauzy Yes ! Ça marche en fixant une largeur max.

Merci ! 👍

@ClovisGauzy Ça a l'air sympa… mais je gère pas du tout Grid-box… Je m'en tiens à ce que je connais un peu.

Encore merci en tout cas !

@pourrito j'étais pareil jusqu'à pas si longtemps. Flex-box m'allait très bien dans pas mal de projet et finalement je me suis mis à me servir de grid pour designer un bloc, puis de fil-en-aiguille j’empile des grid-box les unes dans les autres. ^^

@pourrito

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
grid-template-rows: auto;
justify-content: center;
justify-items: center;
align-items: self-start;
border-radius: 5px;
}

NB: je ne suis pas sur pour le `min-content` dans `repeat(…, minmax())`, j'utilise directement la taille fixée pour .flexitem

@ClovisGauzy Hmm, ça me met tout en une seul colonne… :(

(Et comme je comprends pas ce que je fais…)

@pourrito ouais, c'est le `min-content` qui fait ça… utilises une valeur fixe qui correspond aux blocs enfants.

Sinon, pour la compréhension, l'outils développeur de Firefox te permet de mettre des grilles en surimpression (celle qu'on voit sur ma capture). Ça aide un peu.

@pourrito

en gros :
- justify-content: alignement des blocs enfant dans .container;
- justify-items: alignement horizontal de chaque bloc enfant dans l'espace qui lui est alloué;
- align-items: alignement vertical de chaque bloc enfant dans l'espace qui lui est alloué;

…/…

@pourrito

…/…

- grid-template-columns/rows : défini le template de départ de la grid-box;
- repeat(<nb>, <width>): permet de répéter <nb> fois <width>;
- auto-fit: remplis automatiquement la place disponible;
- minman(<minwidth>, <maxwidth>): défini un taille de bloc variable min/max;
- 1fr: reste de l'espace disponible;

@pourrito

Je vois que tu as aussi pris le bloc de titre dans le container, il faudrait lui rajouter :

grid-column: 1 / -1;

Mais bon, je comprends qu'on rentre un peu fort dans le sujet là, et le mieux c'est de te laisser avec ce cheatsheet :

css-tricks.com/snippets/css/co

@ClovisGauzy Voui, là, ça devient un peu chaud pour mes capacités, là !😕

@pourrito les premières heures avec grid sont difficiles en effet (casque recommandé). ><

Hourra ! Grâce à @ClovisGauzy

J'ai réussi à utiliser un grid pour ma page de vidéos Canopé !

Merci beaucoup ! 👍

(Et en plus, c'est 100% responsive !)

Ça nous fait de la bonne page, déjà, hein !

3506 lignes, 298 ko entièrement codés à la main !

💪

@pourrito Je vais me faire engueuler : je trouve qu'elles sont mieux comme ça, centrées.

@cedesguin Moi pas ! Et comme je suis le seul à qui ça va servir… ;))

@pourrito
Tu as testé avec le parent en "display: grid" ?

Un truc du genre:
codepen.io/anon/pen/LvZvQY

@pourrito
Tu peux mélanger les flexbox et les grid ça pose pas de problème.

Mais si tu veux le faire en pure flexbox tu peux faire un truc comme ca:

codepen.io/anon/pen/zXBXJQ

Sign in to participate in the conversation
La Quadrature du Net - Mastodon - Media Fédéré

Bienvenue dans le media fédéré de la Quadrature du Net association de défense des libertés. Les inscriptions sont ouvertes et libres.
Tout compte créé ici pourra a priori discuter avec l'ensemble des autres instances de Mastodon de la fédération, et sera visible sur les autres instances.
Nous maintiendrons cette instance sur le long terme.