Les grilles flexibles et responsives

jdb-row-padding

Grilles responsives

JdB.CSS dispose d'une une grille responsive qui peut aller jusqu'à 12 colonnes. Le nombre de colonnes peut varier selon les écrans, pour une meilleure disposition du contenu.

Lignes responsives

Les colonnes se réorganiseront automatiquement en fonction de la taille de l'écran : sur un grand écran, le contenu peut être mieux organisé en trois colonnes, mais sur un petit écran, il peut être préférable que le contenu soit empilé les uns sur les autres.

Les classes sx, mx, lx (où x est un nombre entre 1 et 12) peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.

Chaque classe change d'échelle, donc si vous souhaitez définir la même largeur pour les petits, moyens et grands écrans, il vous suffit de spécifier la petite classe. Et si vous voulez la même largeur sur des écrans moyens et grands, il vous suffit de spécifier la classe moyenne.

Cependant, si vous n'utilisez que des classes moyennes et/ou grandes, la largeur se transformera toujours à 100 % sur les petits écrans.

Les classes s1 à s12, m1 à m12 et l1 à l12 sont des sous-classes de la classe jdb-col. C'est-à-dire qu'elles n'ont aucun effet si la classe jdb-col n'est pas présente.

Remarque : Le nombre de colonnes doit toujours totaliser 12 pour chaque ligne (6+6, 3+3+6, 8+4, 2+3+4+3, etc.) !

Deux colonnes égales

Deux colonnes de largeur égale (50%/50%) sur toutes les tailles d'écran.

Deux colonnes inégales

Deux colonnes de largeur inégale (25%/75%) sur toutes les tailles d'écran.

Trois colonnes inégales

Trois colonnes de différentes largeurs (25%/50%/25%) sur les tablettes et les ordinateurs. Sur les téléphones mobiles, les colonnes s'empileront automatiquement (100% de largeur).

Remarque : cet exemple est identique à l'utilisation de jdb-quart (m3), jdb-half (m6), jdb-quart (m3), que vous trouverez dans le chapitre Responsive.

Trois colonnes égales

Trois colonnes de même largeur (33,3%/33,3%/33,3%) sur toutes les tailles d'écran.

Six colonnes

Six colonnes de largeur égale (16% chacune) sur les tablettes et les ordinateurs. Sur les téléphones mobiles, les colonnes s'empileront automatiquement (100% de largeur) :

Mixte : mobiles et ordinateurs

Vous pouvez combiner des classes pour créer une mise en page dynamique et flexible, comme dit plus haut. Cet exemple produira une mise en page à deux colonnes avec une répartition 75%/25% (l9, l3) sur les grands écrans et une répartition 50%/50% (s6, s6) sur les petits écrans :

Mixte : mobile, tablettes et ordinateurs

Cet exemple produira une mise en page à trois colonnes avec une répartition 25%/58,34%/16,66% (l3, l7, l2) sur les grands écrans, 50 %/25 %/25 % (m6, m3, m3) sur les écrans moyens et une répartition 33,3%/33,3%/33,3% (s4, s4, s4) sur les petits écrans :

La différence entre jdb-row et jdb-row-padding

La classe jdb-rowdéfinit un conteneur sans marges intérieures (padding), tandis que la classe jdb-row-padding ajoute une marge intérieure (padding) de 8 pixels à gauche et à droite de chaque colonne :

Utilisation de jdb-rest

Utilisation du pourcentage personnalisé

Vous pouvez toujours utiliser la propriété CSS width pour déterminer une largeur spécifique des colonnes. N'oubliez pas d'utiliser les media queries @media, si nécessaire, pour adapter votre contenu aux écrans.