Un Système de grilles/grid avec CSS & PHP

J’utilise depuis quelques mois un système de grilles léger et efficace :
Le 1kb CSS GRID.

Malheureusement, la version proposée sur le blog demande une reconfiguration cas par cas, et la version générée par le site dédié, demandait un retour au site pour chaque nouveau projet. J’ai donc décidé de monter un bout de code pour automatiser la création de grilles.
Attention, je ne gère pas de marges internes, ces dernières sont générées par les éléments contenus dans ces grilles. C’est mal, je sais.

On definit le nombre de colonnes et leur largeur par défaut.

// Version A : nb_colonnes * largeur_colonne = largeur_ligne
$grid_nb_colonnes = 12;
$grid_largeur = 80;

Il est évidemment possible de définir la largeur totale d’une ligne :

// Version B : largeur_ligne / nb_colonnes = largeur_colonne
$grid_largeur_ligne = 960;
$grid_largeur = round($grid_largeur_ligne / $grid_nb_colonnes); 

Faites toutefois attention à utiliser des valeurs multiples, afin d’éviter une colonne trop petite, ou trop grande.

On génère ensuite une propriété pour chaque largeur de grille

for($i=1;$i<=$grid_nb_colonnes;$i++)
	echo '.grid_'.$i.'{width:'.($i*$grid_largeur).'px;} '."\n";

On affiche les propriétés de gestion de lignes et colonnes

echo '.column{float:left;overflow:hidden;display:inline;}';
echo '.row{width:'.($grid_nb_colonnes*$grid_largeur).'px;overflow:hidden;margin:0 auto;}';

Et voilà 🙂 c'est évidemment utilisable dans mon système de compression CSS via PHP, à condition de charger le contenu dans la variable $retour_css au lieu d'afficher le contenu via echo, et de l'insérer juste avant l'appel à la fonction compress();. La configuration des largeurs et colonnes peut être par contre montée en haut du script, pour plus de confort 😉

Note : Le bout de code est sous licence WTFPL, mais un lien, un merci ou un cadeau (Sait-on jamais qu'un puissant mécène qui souhaite mon bonheur me lise) sont appréciés.