Comment construire des mises en page complexes à l'aide de CSS

Sep 15, 2025

Comment

[dix] [dix] [dix]

[dix]

La mise en page pour le Web a toujours été limitée, il n'y a jamais eu de vraiment dédié à rendre le contenu facile à afficher dans un format qui a du sens.

[dix]

Retour dans les années 90 Lorsque la bande a d'abord pris la main, designers qui ont été utilisés pour mettre en place du contenu sur une grille, ont trouvé le seul moyen d'obtenir le même résultat dans le navigateur était d'utiliser la table. Fusion de cellules a conduit à complexe mises en page de site web , mais cela a joué de ravages avec accessibilité et référencement. Avance rapide et aujourd'hui, il y a toutes sortes de façons de placer du contenu avec des flotteurs, des boîtes flexibles et ainsi de suite.

CSS3 a vraiment poussé les capacités de la bande en avant et depuis 2014, il y a eu Disposition de la grille CSS . Cela dispose actuellement d'un support de navigateur de 75%, de sorte qu'il arrive au point qu'il est temps de lui donner une considération sérieuse. Fondation de Zurb 6 Cadre a à bord et utilise cela pour alimenter sa grille.

Ce didacticiel se concentrera sur la création d'une fonctionnalité de style magazine qui vous montrera comment perfectionner site Web adaptatif Pour les tailles de taille moyenne et de petite taille.

Téléchargez les fichiers de tutoriel ici

[dix]

01. Commencez

Ouvrez le fichier 'grid1.html' à partir du dossier Démarrer dans le fichiers de projet . La mise en page HTML pour cela dispose de cinq balises DIV, tout simplement nommée élément1-5 en tant que classes CSS. Ce seront le contenu placé dans la grille. L'emballage du conteneur Cela définira la grille, qui aura quatre colonnes.

 & lt; div class = "conteneur" & gt;
  & lt; div class = "item1" & gt; item 1 & lt; / div et gt;
  & lt; div class = "item2" & gt; item 2 & lt; / div et gt;
  & lt; div mas = "item3" & gt; item 3 & lt; / div et gt;
  & lt; div class = "item4" & gt; item 4 & lt; / div et gt;
  & lt; div class = "item5" & gt; item 5 & lt; / div et gt;
& lt; / div & gt;

02. Vérifiez CSS pour la grille

En regardant dans la section de tête, vous pouvez voir que le "conteneur" a été dit d'être aménagé comme une grille, avec une hauteur automatique pour les lignes, tandis que les colonnes doivent être réglées sur quatre avec chacun à 25% du navigateur . Vérifiez cela dans le navigateur et vous verrez que chaque élément est automatiquement attribué à la prochaine position de la grille disponible.

 .Container {
  Affichage: grille;
  Grid-Modèles-Rows: Auto;
  Modèle de grille-colonnes: répétition (4, 25%); }

03. Définir les positions de la grille

Jetez maintenant un coup d'œil au fichier 'grid2.html'. C'est la même chose que le premier fichier, à l'exception des "item1" et "item2" sont donnés des positions spécifiques. Le premier est positionné dans la rangée 1 et se termine avant la rangée 2. La colonne commence à 1 et se termine à 3, il s'étend sur deux colonnes. La seconde commence à la colonne 3 et prend les deux prochaines colonnes. Les articles restants remplissent les prochaines créneaux de grille disponibles.

 .Item1 {
  Grille-Row-Start: 1;
  Grille-Row-End: 2;
  grille-colonne-start: 1;
  grille-colonne-extrémité: 3;
}
.Item2 {
  Grille-Row-Start: 1;
  Grille-Row-End: 2;
  grille-colonne-start: 3;
  grille-colonne-extrémité: 5;
}

04. Utilisez un modèle de grille

Ouvrez 'Grid3h3html' et regardez le corps du HTML. Vous verrez qu'il y a une mise en page avec une en-tête, une barre latérale, une section de contenu principale et un pied de page. Vous pouvez ajouter plus de texte dans le contenu pour voir ce qui se passe lorsque cela est placé. La grille utilisera une fonction de modèle pour rendre ces sections dans une mise en page.

 & lt; div class = "conteneur" & gt;
  & lt; div class = "en-tête" & gt; en-tête & lt; / div et gt;
  & lt; div class = "Barre latérale" & GT; Sidebar & lt; / Div & GT;
  & lt; div class = "contenu" & gt; content & lt; / div et gt;
  & lt; div class = "pied de page" & gt; pied de page & lt; / div et gt;
& lt; / div & gt;

05. Définir le modèle

Regardez le CSS pour le conteneur. Il est à nouveau défini comme une grille. La rangée supérieure sera de 200px hauteur, le milieu sera automatiquement dimensionné et la dernière ligne sera de 100px élevée. Les colonnes sont fixées à 33% de large et à la mise au point automatique. Le gabarit indique que l'en-tête remplira les deux colonnes. La ligne suivante sera la barre latérale dans la première colonne et le contenu de l'autre. Le pied de page traverse les deux.

 .Container {
  Affichage: grille;
  grille-template-lignes: 200px Auto 100px;
  Template-Template-Colonnes: 33% Auto;
  Grid-Modèles-Zones:
  "Hauteur d'en-tête"
  "Contenu de la barre latérale"
  "pied de page de page"; }

06. Liez le modèle à la classe

Pour relier la classe sur le modèle, le code présenté ici définit ceci. Chaque zone de grille est nommée et le lien est créé. Le contenu n'est pas montré ici, mais c'est dans le document 'Grid3.html'. Regardez cela dans le navigateur pour voir la disposition de la grille. Étant donné que deux colonnes sont définies, le modèle a besoin de deux zones de chacune des virgules inversées.

 .header {
  zone de la grille: en-tête;
}
.debar {
  zone de la grille: barre latérale;
}
.bas de page {
  zone de la grille: pied de page; }

07. Rendez-le réactif

Pour rendre "grid3html" réactif, une requête de support est insérée et la rangée supérieure est maintenue à 200%, tandis que les rangées restantes seront automatiquement de taille. Il n'y a qu'une seule colonne, la largeur totale, de sorte que le modèle a un mot dans chaque virgule inversée pour définir la mise en page. Ceux-ci peuvent facilement être réorganisés sans déplacer l'un des HTML.

 @media écran et (max-largeur: 699px) {
  .récipient {
  Affichage: grille;
  grille-template-lignes: 200px Auto;
  Modèle de grille-colonnes: 100%;
  zones de grille-zones: "Hauteur" "Barre latérale" "Contenu" "pied de page";
  }
}

08. Travailler sur une mise en page réelle

Ouvrez maintenant 'index.html' - tout le HTML pour le contenu a déjà été créé, de même que certains des CSS pour les éléments de conception. Ajoutez cette grille aux balises de style dans la section de tête. Cela crée une grille à trois colonnes avec le gabarit pour chaque section. Notez l'arrêt complet des sections de grille vide.

 .Container1 {
  largeur: 80%;
  Marge: 0 auto;
  Affichage: grille;
  Grid-Modèles-Rows: Auto;
  Modèles de grille-colonnes: 33,3% 33.3% Auto;
  Grid-Modèles-Zones: "En-tête d'en-tête". "StandFirst StandFirst" ".. Article1" "Focus Powerquote Powerquote" "Article2 Article2.";
}

09. LIENNEZ LE MOMPLATEUR

Comme avec l'étape précédente, cela relie l'en-tête avec le modèle. On a dit à l'en-tête de couvrir les trois colonnes de la grille, puis le standfirst est réglé pour prendre deux colonnes et avoir une colonne vide à gauche. Si vous vérifiez le navigateur, cette colonne est remplie, car le contenu restant automatique est le prochain espace disponible - il ne le fera pas quand tout est mis en place, cependant.

 .header {
  zone de la grille: en-tête;
}
.standfirst {
  Région de la grille: StandFirst;
}

10. Ajoutez les domaines suivants

Maintenant, le premier article, la citation de tirage et l'image de focus sont placés dans la conception. La citation pull et l'image sont côte à côte sur la même rangée. À ce stade, l'article2 n'a pas été placé, il s'agit donc de la première place disponible sur la grille qui est à côté du standfirst.

 .ARTICLE1 {
  zone de la grille: article1;
}
.PullQuote {
  zone de la grille: pullquote;
}
.concentrer {
  zone de la grille: focus;
  Texte-Aligner: Centre; }

11. Terminez la première grille

[dix]

L'ajout du CSS du deuxième article permet à toute la première grille d'être placée correctement. En regardant cela dans le navigateur, vous montrera que la mise en page fonctionne avec l'image d'arrière-plan et crée le type de mise en page vue dans les magazines, où le concepteur fonctionne autour d'une image de fond grande.

 .ARTICLE2 {
    zone de la grille: article2;
    Colonne-Gap: 65px;
    Colonne-Count: 2;
}

12. Ajouter un fond blanc

Avant de commencer la deuxième grille, vous pouvez vous demander pourquoi il y a un besoin de deux grilles. La raison en est que cette grille va avoir une largeur de largeur blanche de sorte que ce CSS enveloppera la seconde grille. C'est pour donner à cette section le sentiment d'une deuxième page de la conception.

 .whitebg {
    Rembourrage: 100px 0;
    Couleur de fond: #DDD;
}

13. Faites une deuxième grille

La deuxième grille est plus simple que la première. Il y a trois colonnes, avec une hauteur automatique sur les rangées. Le contenu va remplir une colonne chacune donc il n'est pas nécessaire de définir les zones de gabarit. Toutefois, lorsque la conception de la tablette est ajoutée, cela doit basculer sur deux colonnes. Un reflow est donc requis et les noms seront importants.

 .Container2 {
    largeur: 80%;
    Marge: 0 auto;
    Affichage: grille;
    Grid-Modèles-Rows: Auto;
    Modèles de grille-colonnes: 33,3% 33.3% Auto;
    Grid-Modèles-Zones: "IMG1 IMG2 Article3";
}

14. Ajouter les colonnes

Chacune des classes CSS dans la deuxième grille est invitée à relier la colonne correspondante, telle que définie dans le modèle de grille. L'article Text Color est changé pour le faire ressortir de l'arrière-plan plus léger de cette section. Avec seulement le pied de page à compléter, la conception de la disposition de type magazine est presque en place.

 .img1 {
  zone de la grille: img1;
}
.img2 {
    zone de la grille: img2;
}
.article3 {
  zone de la grille: article3;
  Couleur: # 333;
}

15. Parfait le pied de la page

La fin de la page placera une largeur complète dans l'écran, qui sera remplie d'une couleur noire et le texte est juste centré. Ceci complète la version de bureau de la conception, mais déplacez l'écran en dessous de 1200px de large et que le site commence à casser.

 .footer {
    Couleur de fond: # 000;
    Couleur: # 999;
    Texte-Aligner: Centre;
    PADING: 50PX 20PX 100PX;
}

16. Ajustez pour la conception moyenne à l'écran

Une requête multimédia est insérée ici pour s'occuper de la conception lorsque la largeur du navigateur est inférieure à 1200px. Le code des étapes 17 et 18 sera placé à l'intérieur des crochets où le commentaire est. Ce sera un cas de changement de la structure de la disposition des grilles.

 @media écran et (max-largeur: 1200px) {
  / * code ici * /
}

17. Refilez la première grille

La première grille est réglée pour remplir maintenant la largeur complète du navigateur avec seulement deux colonnes au lieu de trois. L'ordre des sections est placé dans le gabarit, avec les articles basculants, car cela convient mieux à l'image d'arrière-plan à cette taille de l'écran.

 .Container1 {
  largeur: 100%;
  Grid-Modèles-Rows: Auto;
  Modèle de grille-colonnes: 50% 50%;
  Grid-Modèles-Zones: "En-tête d'en-tête" "StandFirst Standfirst" "Article1." "PullQuote Powerquote" "Article 2 Focus";
  }
.article2 {
  Colum-compt: 1;
  }

18. Testez votre mise en page

La deuxième grille est également redimensionnée pour prendre toute la largeur du navigateur et deux colonnes ajoutées. Les images sont placées côte à côte sur la rangée au-dessus du texte de sorte qu'il s'adapte parfaitement à l'écran. Vous pouvez tester cette mise en page dans le navigateur en redimensionnant votre navigateur en dessous de la largeur de 1200px.

 .Container2 {
  largeur: 100%;
  Marge: 0 auto;
  Grid-Modèles-Rows: Auto;
  Modèle de grille-colonnes: 50% 50%;
  Grid-Modèles-Zones: "IMG1 IMG2" "Article3 Article3";
}

19. Tweak Design pour mobile

Tout navigateur qui a une largeur inférieure à 769px obtiendra le code ajouté lors des étapes finales. Tout ce que nous devons faire ici, c'est que chacune des grilles dispose d'une seule disposition de colonne afin que le contenu puisse être visualisé correctement dans l'espace plus petit.

 @media écran et (max-largeur: 768px) {
  / * code de début final ici * /
}

20. Vérifier la grille de colonne unique

La première grille est maintenant définie sur une seule colonne de 100% de la largeur du navigateur et l'ordre des sections est ajouté dans les zones de gabarit. Vérifiez comment la première partie de la page fonctionne sur des écrans mobiles.

 .Container1 {
  largeur: 100%;
  Grid-Modèles-Rows: Auto;
  Modèle de grille-colonnes: 100%;
  Grid-Modèles-Zones: "Header" "Standfirst" "Article1" "PullQuote" "Focus" "Article2";
}

21. Terminez la mise en page

Ici, la deuxième grille est également faite pour remplir une colonne unique et la disposition des sections est définie. Enregistrez maintenant la conception terminée et affichez-la sur des écrans de taille différentes pour voir la capacité de mise en page complète de la grille CSS et la facilité de réorganiser le contenu de différentes largeurs.

 .Container2 {
  largeur: 100%;
  Marge: 0 auto;
  Grid-Modèles-Rows: Auto;
  Modèle de grille-colonnes: 100%;
  Grid-Modèles-Zones: "IMG1" "IMG2" "Article3";
}

Cet article a été publié à l'origine dans Creative Web Design Magazine Web Designer. Acheter numéro 271 ou s'abonner .

Articles Liés:

5 conseils pour CSS Super-Fast
Comprendre la propriété d'affichage CSS
Comment créer une présentation pyramide avec des formes CSS

[dix] [dix]

[dix]

Comment construire des mises en page complexes à l'aide de CSS

01. Commencez

02. Vérifiez CSS pour la grille

03. Définir les positions de la grille

04. Utilisez un modèle de grille

05. Définir le modèle

06. Liez le modèle à la classe

07. Rendez-le réactif

08. Travailler sur une mise en page réelle

09. LIENNEZ LE MOMPLATEUR

10. Ajoutez les domaines suivants

11. Terminez la première grille

12. Ajouter un fond blanc

13. Faites une deuxième grille

14. Ajouter les colonnes

15. Parfait le pied de la page

16. Ajustez pour la conception moyenne à l'écran

17. Refilez la première grille

18. Testez votre mise en page

19. Tweak Design pour mobile

20. Vérifier la grille de colonne unique

21. Terminez la mise en page

Comment - Most Popular Articles

Comment ajouter de l'énergie à vos dessins de vie

Comment dessiner un éléphant

Créer des effets de collage dans le navigateur avec CSS

Master Environnements à grande échelle dans 3DS Max

Déposer vos menus à l'aide d'animation avec CSS

13 conseils pour faire un monde de jeu VR

Aiguisez vos compétences de croquis

Comment concevoir une couverture de livre dans InDesign

Catégories