Creer un Site Responsif avec CSS Grid
Salut HaWkers ! CSS Grid est une technique de mise en page bidimensionnelle qui permet aux developpeurs de creer des mises en page complexes facilement. Dans ce tutoriel, nous allons creer un site responsif en utilisant CSS Grid.
Preparation de l'Environnement
Pour commencer, creez un nouveau fichier HTML et un fichier CSS. Dans le fichier HTML, ajoutez une reference au fichier CSS dans l'en-tete :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!-- Le contenu de notre site va ici -->
</body>
</html>Creation de la Mise en Page
Creons une mise en page simple avec un en-tete, un contenu principal et un pied de page. Dans notre fichier HTML, ajoutons trois divs pour chacune de ces sections :
<div id="header">En-tete</div>
<div id="main">Contenu Principal</div>
<div id="footer">Pied de page</div>Maintenant, dans notre fichier CSS, creons une grille pour organiser ces sections :
body {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
#header {
grid-row: 1;
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}
#main {
grid-row: 2;
background-color: #fff;
padding: 20px;
}
#footer {
grid-row: 3;
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}Rendre la Mise en Page Responsive
La vraie puissance de CSS Grid vient de sa capacite a creer des mises en page responsives. Ajoutons une media query a notre CSS pour modifier la mise en page lorsque la largeur de la fenetre du navigateur est inferieure a 600px :
@media (max-width: 600px) {
body {
grid-template-rows: auto 1fr auto;
}
#header,
#main,
#footer {
padding: 10px;
}
}Conclusion
Et voila ! Vous venez de creer un site responsif en utilisant CSS Grid. Nous esperons que ce tutoriel vous a aide a mieux comprendre comment fonctionne CSS Grid et comment vous pouvez l'utiliser pour creer des mises en page responsives.
Pour continuer a en apprendre davantage sur le developpement web et le design responsif, consultez l'article sur La Puissance de CSS Flexbox : Rendre la Mise en Page Plus Simple et Efficace.