[Résolu] Grille avec éléments double largeur et double hauteur

Hello,

Je cherche un moyen de mettre en forme assez librement des blocs ayant des tailles variables : 1x1, 2x1, 4x4

Voici un essai :
http://codepen.io/dasys/pen/eZBYyb

Cela fonctionne mais je me dis qu'il doit être possible d'optimiser le tout et surtout de le rendre plus flexible. D'ailleurs sans -mauvais- jeu de mot : on pourrait faire la même chose avec flexbox ?

D'avance mille mercis pour vos avis

Bien à vous.

Bonjour,

Pour les grilles, c'est Grillade !

et pour une feuille de style de base c'est Knacss !

Te voici maintenant avec de quoi lire


Nota : Knacss inclus Grillade mais l'inverse n'est pas vrai.
Modifié par Greg_Lumiere (14 Mar 2016 - 21:14)

Bonjour,

c'est le boulot rêvé pour Grid Layout.
Ca arrive incessamment sous peu dans Firefox et Chrome, c'est évidemment dans IE depuis IE10, Safari... oh zut donc d'ici 12 mois ce sera mature pour être utilisé en production sauf accident de rétropédalage d'un des navigateurs.

Note : le 4x4 tu voulais dire 2x2 ?

pour le hasard de la question ou de la structure et de son visuel, float:left et un element en float:right, sans forcement les cloisonner par groupes, cela fonctionne http://codepen.io/gc-nomade/pen/XdNXzX

column ou flex ne sont effectivement pas adaptés.

dasys a écrit :
D'ailleurs sans -mauvais- jeu de mot : on pourrait faire la même chose avec flexbox ?

Bien sûr que c'est possible. Pas le temps de coder la grille car je ne suis au boulo (et j'ai la flemme), mais voici un exemple qui fonctionne selon le comportement demandé (ici avec 12 colonnes) :
Example Complex Layout

Merci à tous !

@Gred_Lumiere : j'utilise le super framework Knacss pour d'autres projets mais dans ce cas je ne voyais pas très bien comment utiliser son système de grille.

@Felipe : Ahhh... le Grid Layout ou le saint graal de le mise en forme css !

@gcyrillus : bien vu, merci ! Cela simplifie la structure.

@Olivier C : je suis vraiment impressionné par le travail effectué sur ton framework. Cela me semble un peu overkill pour mon petit besoin de mise en forme.

Le bon vieux float semble au final pas si mal.

Un grand merci pour votre aide !

Bien à vous.