Grilles Fluides CSS
CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR
Maitriser la grille
Définition des éléments d une grille
Anatomie d une grille Une grille est composée de colonnes et de gouttières
Anatomie d une grille colonne gouttière
Anatomie d une grille Une grille est composée d autant de colonnes que nécessaire 3, 4, 12, 16, 24 colonnes
Mise en place de la grille css
comprendre le container Une grille css est composée d un élément supplémentaire Le container de la grille
container comprendre le container
comprendre le container Mais pourquoi un container?
comprendre le container Car les colonnes utiliseront l attribut css «float». Il est donc necessaire de recourir à un hack pour empêcher le dépassement des flottants http://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html
comprendre le container solution sans hack solution avec hack
comprendre le container Nous utilisons une classe css pour définir le composant container afin de pouvoir l utiliser plusieurs fois dans le site
comprendre le container.row:after { content: ""; display: table; clear: both; }
comprendre le container Cette classe css sera utilisée sur une div <div class= row > ici le contenu </div>
comprendre le container Maintenant donnons une une taille au site et centrons le
comprendre le container Nous utilisons également une classe pour définir ces propriétés
comprendre le container.wrapper { max-width: 960px; margin-left: auto; margin-right: auto; }
comprendre le container Nous pouvons maintenant utiliser nos deux classes pour commencer à construire notre grille
comprendre le container <div class= wrapper row > ici le contenu </div>
calculer la grille
calcul de grille Partons sur un exemple d une grille de 960px de 4 colonnes avec des gouttières de 20px
calcul de grille Le composant de colonne comprend 2 demies gouttières
calcul de grille Comment calculer la taille du composant de colonne?
calcul de grille Voici la formule 100% /nb colonne
calcul de grille Notre colonne fait donc 100 / 4
calcul de grille Ajoutons maintenant nos gouttières 25% + 20px
calcul de grille Redéfinissons le modèle de boite CSS afin de nous faciliter le calcul
calcul de grille *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: box-sizing: border-box; border-box; } http://css.sutterlity.fr/les-bases-css/modele-boite-css/
Nous avons fait le plus dur calcul de grille
calcul de grille Il nous reste a définir un composant de colonne en css
enfin... 4 composants calcul de grille
calcul de grille Nous utiliserons la convention de nommage suivante préfixe.col-1.col-2.col-3.col-4 nb de colonnes
calcul de grille Nous allons ecrire un sélecteur css3 capable de sélectionner les 4 composants de colonnes commençant par le prefix col-
calcul de grille [class*=col-] { propriété: valeur; }
calcul de grille Maintenant nous voulons que les composants.col-x se placent les uns à côté des autres avec une demi-gouttière à gauche et à droite
calcul de grille [class*=col-] { float: left; padding-left: 10px; padding-right: 10px; }
calcul de grille Nous pouvons maintenant définir nos composants de colonnes de.col-1 à.col-4
calcul de grille.col-1 { width: 25%; }.col-2 { width: 50%; }.col-3 { width: 75%; }.col-4 { width: 100%; }
calcul de grille Voici un exemple de code html d une grille <div class= wrapper row > <div class= col-1 ></div> <div class= col-1 ></div> <div class= col-1 ></div> <div class= col-1 ></div> </div>
Construction HTML avec des grilles fluides
imbrications des grilles Les grilles fluides présentent l avantage d être imbricables
imbrications des grilles À condition de supprimer la première et dernière demi-gouttière des colonnes imbriquées
imbrications des grilles.row.row { margin-left: -10px; margin-right: -10px; }
imbrications des grilles Exemple d imbrication.col-2.col-2.col-2.col-4.col-2 <div class= wrapper row > <div class= col-2 ></div> <div class= col-2 row > <div class= col-4 ></div> <div class= col-2 ></div> <div class= col-2 ></div> </div> </div>
imbrications des grilles Il faut toujours utiliser le même principe
imbrications des grilles il faut imbriquer des composants.col-x dans un composant.row <div class= row > <div class= col-2 ></div> <div class= col-2 > </div>
RWD
GRille responsive
GRille responsive Rien de plus simple : il suffit de supprimer les contraintes créées précédemment sur les composants.col-x
GRille responsive @media only screen and (max-width:768px) { [class*=col-] { float: none; width: inherit; } }
fin