Vous êtes sur la page 1sur 56

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