Maison > Article > interface Web > Tutoriel HTML : Comment utiliser la mise en page en grille pour une mise en page sans grille
Tutoriel HTML : Comment utiliser la mise en page en grille pour une mise en page sans grille
- WBOYoriginal
- 2023-10-18 08:48:391075parcourir
Tutoriel HTML : Comment utiliser la mise en page en grille pour une mise en page sans grille, des exemples de code spécifiques sont requis
Introduction :
Dans le développement Web, utiliser CSS pour la mise en page est une compétence très importante. La disposition en grille est une nouvelle fonctionnalité de CSS3. Elle fournit une méthode de mise en page plus puissante et plus flexible, nous permettant de concevoir plus librement la disposition en grille des pages Web. Cet article explique comment utiliser la disposition en grille et fournit des exemples de code spécifiques.
- Qu'est-ce que la disposition en grille ?
La mise en page en grille est un système de grille qui divise la mise en page d'une page Web en lignes et en colonnes, et crée la mise en page de la page Web en spécifiant la taille et la position de chaque « cellule ». La disposition en grille peut facilement implémenter des dispositions de grille complexes, telles que la disposition en colonnes et la disposition réactive. - Utiliser la disposition en grille en HTML
Pour utiliser la disposition en grille en HTML, vous devez d'abord définir le conteneur de grille et les éléments de grille en CSS. Le conteneur de grille est la partie qui contient le contenu de la page Web et les éléments de grille sont les éléments enfants du conteneur de grille.
L'exemple de code est le suivant :
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto; /* 定义3列 */
grid-gap: 10px; /* 定义单元格之间的间隔 */
background-color: #f3f3f3;
padding: 10px;
}
.grid-item {
background-color: #ffffff;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Grid布局示例</h1>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>Dans le code ci-dessus, nous définissons un conteneur de grille contenant 6 éléments de grille, avec un total de 3 colonnes. Chaque élément de la grille a le même style et remplit la grille dans l'ordre de gauche à droite et de haut en bas.
- Propriétés communes de la disposition en grille
- grid-template-columns : Définissez le nombre et la largeur des colonnes.
- grid-template-rows : Définissez le nombre et la hauteur des lignes.
- grid-gap : Définissez l'écart entre les éléments de la grille.
- grid-column : définit les colonnes couvertes par les éléments de la grille.
- grid-row : définit les lignes couvertes par les éléments de la grille.
- justify-items : définissez l'alignement des éléments de la grille dans les colonnes.
- align-items : définissez l'alignement des éléments de la grille dans les lignes.
En utilisant ces propriétés, nous pouvons contrôler de manière flexible la disposition de la grille et obtenir divers effets de disposition.
- Mise en page réactive pour la mise en page en grille
La mise en page réactive peut être facilement réalisée en utilisant la mise en page en grille. En définissant différentes largeurs de colonnes et hauteurs de lignes, et en utilisant des requêtes multimédias, vous pouvez afficher différentes dispositions sur différentes tailles d'écran.
L'exemple de code est le suivant :
@media screen and (max-width: 600px) {
.grid-container {
grid-template-columns: auto;
}
}Dans le code ci-dessus, nous définissons une requête multimédia pour modifier le nombre de colonnes du conteneur de grille à 1 colonne lorsque la largeur de l'écran est inférieure à 600 pixels. De cette façon, sur les appareils mobiles, la disposition en grille deviendra une disposition en colonnes.
Conclusion :
La disposition en grille est un système de grille puissant qui peut fournir une disposition en grille flexible. En utilisant la mise en page en grille, nous pouvons concevoir la mise en page de pages Web plus librement et mettre en œuvre plus facilement une mise en page en grille complexe et une mise en page réactive. J'espère que ce didacticiel sera utile aux développeurs qui souhaitent apprendre et maîtriser la disposition de la grille. Je vous souhaite du succès dans votre parcours de mise en page Web !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!