Téléchargez notre Grid responsive :
Mode d'emploi
Le grid simple est une grille responsive par défaut. Un allié de poids pour un design harmonieux et ergonomique sans prise de tête. Suivez les instructions en bas du bouton de téléchargement.
Le grid simple est une grille responsive par défaut. Un allié de poids pour un design harmonieux et ergonomique sans prise de tête. Suivez les instructions en bas du bouton de téléchargement.
Tout d'abord, activez le media query sur votre HTML.
<meta name = "viewport" content= "width=device-width"/>
Puis, construisez l'ossature de votre HTML.
La construction de votre squelette se fait en 3 étapes:
1. Construisez votre div class qui va servir à contenir les autres div.
<div class = "wrapper">
Nommez le nom de la class de votre div conteneur wrapper: < div class="wrapper" >.
2. Dans votre
<div class = "wrapper">
Nommez le nom de la class de votre div ligne row:
<div class = "row">
3. Ajoutez une div colonne dans votre ligne:
<div class = "wrapper">
<div class = "row">
<div class = "col">
Enfin ma première ligne</div>
</div>
Enchaînez plusieurs colonnes pour adapter votre structure. Sur cet extrait en dessous, vous obtenez 5 colonnes sur une ligne.
<div class = "row">
<div class = "col">
Enfin ma première ligne
</div>
<div class = "col">
Enfin ma première deuxième ligne
</div>
Enfin ma troisième ligne
</div>
Enfin ma quatrième ligne
</div>
</div>
Nommez les div ainsi vous servira à activer le grid simple s'en charge.
Ainsi, il est inutile de faire une page css pour structurer votre gabarit puisque c'est déjà prêt!