Conception Web Responsive - Création d'une Vue en Grille
Qu'est-ce qu'une Vue en Grille ?
De nombreuses pages web sont basées sur une vue en grille , ce qui signifie que la page est divisée en lignes et en colonnes.
Une vue en grille responsive comporte souvent 6 ou 12 colonnes et se rétrécit ou s'agrandit lorsque vous redimensionnez la fenêtre du navigateur.
Création d'une Vue en Grille
Commençons à créer une vue en grille.
Tout d'abord, assurez-vous que tous les éléments HTML ont la propriété box-sizing définie sur border-box . Cela garantit que le rembourrage et la bordure sont inclus dans la largeur et la hauteur totales des éléments.
Ajoutez ce qui suit en haut de votre CSS :
* {
box-sizing: border-box;
} Lisez-en plus sur la propriété box-sizing dans notre chapitre CSS Box Sizing .
L'HTML
Nous créons un conteneur de grille avec cinq éléments (en-tête, menu, contenu, faits, pied de page) :
HTML
Voici l'HTML complet :
<div class="grid-container">
<div class="header"><h1>Chania</h1></div>
<div class="menu">
<ul>
<li>Le Vol</li>
<li>La Ville</li>
<li>L'Île</li>
<li>La Nourriture</li>
</ul>
</div>
<div class="content">
<h1>La Ville</h1>
<p>Chania est la capitale de la région de Chania sur l'île de Crète.</p>
<p>La ville peut être divisée en deux parties : la vieille ville et la ville moderne. La vieille ville est située à côté du vieux port et est la matrice autour de laquelle toute la zone urbaine a été développée.</p>
<p>Chania se trouve le long de la côte nord-ouest de l'île de Crète.</p>
</div>
<div class="facts">
<h2>Faits :</h2>
<ul>
<li>Chania est une ville sur l'île de Crète</li>
<li>La Crète est une île grecque dans la mer Méditerranée</li>
</ul>
</div>
<div class="footer"><p>Un pied de page.</p></div>
</div> Le CSS
Ajoutez quelques styles et couleurs pour améliorer l'apparence :
Remarque : Consultez le chapitre suivant pour ajouter des mediaqueries et des points de rupture pour différentes tailles d'écran !
Exemple
Voici le CSS complet :
* {
box-sizing: border-box;
}
body {
font-family: "Lucida Sans", sans-serif;
font-size: 17px;
}
.grid-container {
display: grid;
grid-template-areas:
'header'
'menu'
'main'
'facts'
'footer';
background-color: white;
gap: 10px;
}
.header {
grid-area: header;
background-color: purple;
text-align: center;
color: #ffffff;
}
.header > h1 {
font-size: 40px;
}
.menu {
grid-area: menu;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
.content {
grid-area: main;
}
.content > h1 {
font-size: 30px;
margin-bottom: 7px;
}
.content > p {
margin-bottom: 7px;
}
.facts {
grid-area: facts;
border: 1px solid #0099cc;
background-color: beige;
padding: 10px;
}
.facts > h2 {
font-size: 20px;
}
.facts li {
margin-bottom: 5px;
}
.footer {
grid-area: footer;
background-color: #0099cc;
color: #ffffff;
text-align: center;
}