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
 comprendre le container

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: border-box;
box-sizing: border-box;
}

http://css.sutterlity.fr/les-bases-css/modele-boite-css/
 calcul de grille

Nous avons fait le plus dur

 calcul de grille

Il nous reste a définir


un composant de colonne en css
 calcul de grille

enfin... 4 composants
 calcul de grille
Nous utiliserons la convention 

de nommage suivante

préfixe .col-1 nb de colonnes

.col-2
.col-3
.col-4
 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

<div class=“wrapper row“>

.col-4 <div class=“col-2“></div>
<div class=“col-2 row“>
<div class=“col-4“></div>
.col-2
<div class=“col-2“></div>
.col-2 <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