Maison > Article > interface Web > Conseils pour créer des mises en page complexes à l'aide d'une grille CSS ! (à collectionner)
(Tutoriel recommandé : Tutoriel CSS)
La disposition de la grille est une version CSS moderne des fonctionnalités les plus puissantes. L'utilisation de la disposition en grille nous aide à créer des mises en page complexes et rapides sans aucun cadre d'interface utilisateur externe. Dans cet article, nous couvrirons tout ce que nous devons savoir sur CSS Grid.
Passons directement au code, comme indiqué ci-dessous. Écrivez d'abord quelques balises. Le code source est dans ce lien : https://codepen.io/Shadid. /pen/ zYqNvgv
<p> <header>Header</header> <aside>Aside 1</aside> <section>Section</section> <aside>Aside 2</aside> <footer>Footer</footer> </p>
Ci-dessus, nous avons créé un élément header
, deux aside
et un footer
et les avons enveloppés dans un élément container
. Nous ajoutons une couleur d’arrière-plan et une taille de police à tous les éléments de l’élément conteneur. La page Web exécutée par
.container > * { background: aquamarine; font-size: 30px; }
est la suivante :
Nous ajoutons maintenant quelques propriétés de grille :
.container { display: grid; grid-gap: 5px; grid-template-areas: "header" "aside-1" "aside-2" "section" "footer" } /* Assign grid areas to elements */ header { grid-area: header; } aside:nth-of-type(1) { grid-area: aside-1; } aside:nth-of-type(2) { grid-area: aside-2; } section { grid-area: section; } footer { grid-area: footer; }
Tout d'abord, nous définissons display:grid
, ce qui permettra la disposition de la grille, puis nous utilisons grid-gap
pour ajouter des espaces dans les éléments de la grille.
Ensuite, nous avons attribué un nom de zone de grille à chaque élément HTML. Définissez l'apparence du modèle HTML dans l'attribut container 类中,我们可以使用
grid-template-areas`. Faites attention à la façon dont les zones du modèle de grille sont disposées.
grid-template-areas: "header" "aside-1" "aside-2" "section" "footer"
L'ordre des éléments est différent de la structure dom. Cependant, il est finalement présenté dans l'ordre de nos zones de réseau.
La prochaine étape consiste à rendre notre page responsive. Nous souhaitons utiliser une mise en page différente sur un écran plus grand. CSS Grid facilite la gestion des requêtes multimédias et la création de mises en page réactives. Regardez le code ci-dessous :
@media (min-width: 670px) { .container { grid-template-areas: "header header header" "aside-1 section aside-2" "footer footer footer" } }
Tout ce que nous avons à faire est de réorganiser les zones du modèle de grille dans la requête multimédia.
Comment utiliser la grille CSS pour organiser les colonnes et les lignes ? Commencez par le code suivant :
<p> </p><p>One</p> <p>Two</p> <p>Three</p> <p>Four</p> <p>Five</p> <p>Six</p>
Ajoutez du CSS de base
.container { display: grid; height: 100vh; grid-gap: 10px; } .item { background: lightcoral; }
Nous avons utilisé une disposition en grille pour la structure dom ci-dessus et ajouté un espacement entre les styles en utilisant grid-gap
. Maintenant, nous utilisons l'attribut grid-template-columns
pour ajouter des colonnes.
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-columns: 100px 200px auto auto; }
Juste comme ça, nous avons utilisé des colonnes. Nous spécifions la première colonne comme 100px
et la deuxième colonne comme 200px
. Puisque nous avons appliqué 3
dans la colonne 4
et la colonne auto
, la longueur restante de l'écran y sera divisée en deux.
Vous pouvez voir qu'il y a maintenant un espace vide dans la page. Que faire si je souhaite déplacer 第六列
vers 第三列
et 第四列
? Pour cela nous pouvons utiliser les attributs grid-column-start
et grid-column-end
.
.item:nth-of-type(6) { grid-column-start: 3; grid-column-end: 5; }
Notez que nous utilisons grid-column-end: 5
avec la valeur 5
pointant vers la ligne de la colonne. La quatrième colonne se termine par la cinquième ligne de la grille. Les valeurs grid-column-start
et grid-column-end
font référence aux lignes de quadrillage.
Si vous trouvez les valeurs du quadrillage déroutantes, vous pouvez également utiliser span
, qui aura le même effet que ci-dessus :
.item:nth-of-type(6) { grid-column-start: 3; grid-column-end: span 2; }
Pour span 2
, précisez p
occupation Deux emplacements dans la grille. Maintenant, disons que vous souhaitez développer 第二列
pour remplir l'espace vide ci-dessous. Nous pouvons également le faire facilement via l'attribut grid-column-start
.
.item:nth-of-type(2) { grid-row-start: span 2; }
On utilise span
et grid-row-start
pour préciser que l'on souhaite occuper deux emplacements.
Comme vous pouvez le voir ci-dessus, nous avons pu créer des mises en page très complexes en utilisant une poignée de propriétés de grille CSS.
Regardons maintenant grid-templates
, dans cette section, nous verrons comment créer différentes mises en page pour différentes tailles d'écran.
Tout d'abord, créons une structure dom :
<p> <header>header</header> <aside>Left</aside> <section>Section</section> <aside>Right</aside> <footer>Footer</footer> </p>
Ensuite, ajoutons quelques styles :
`` .container { display: grid; height: 100vh; grid-gap: 10px; } .container > * { background: coral; display: flex; justify-content: center; align-items: center; }` ``
Nous avons ajouté une couleur d'arrière-plan à l'élément. Comme vous pouvez le voir dans le code ci-dessus, nous utilisons également l'attribut flex
. Nous pouvons combiner flex
et grid
ensemble. Dans cet exemple particulier, nous alignons le contenu au centre en utilisant l'attribut flex
.
对于移动端,我们希望section
在header
下面,right
在 section
下面,我们可以使用网格区域来完成。首先,我们定义网格区域:
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-areas: "header" "section" "right" "left" "footer" } aside:nth-of-type(1) { grid-area: left; } aside:nth-of-type(2) { grid-area: right; } section { grid-area: section; } footer { grid-area: footer; } header { grid-area: header; }
在 grid-template-areas
中可以看到,我们先有header
,然后是section
,然后是right
,最后是left
。此外,我们希望我们的section
比 left
和 right
都大点。为了实现这一点,我们可以使用rid-template-rows
属性
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-areas: "header" "section" "right" "left" "footer"; grid-template-rows: 1fr 6fr 2fr 2fr 1fr; }
我们可以根据需要设置移动端的视图,接下我们使用媒体查询来适配一下大屏幕:
@media (min-width: 500px) { .container { grid-template-areas: "header header header" "left section right" "footer footer right"; grid-template-rows: 1fr 6fr 1fr; grid-template-columns: 1fr 6fr 1fr; } }
minmax
函数动态跟踪元素的大小假设我们有两列,它们均匀地占据了屏幕上的可用空间。通过使用 grid-template-columns
,我们可以很容易地做到这一点。但是,如果我们想要其中一个在200px
到500px
之间呢?我们的列可以适应不同的屏幕尺寸,但其中一个永远不会大于500px
或小于200px
。
对于这些类型的场景,我们使用minmax
函数。 让我们来看看它的实际效果。
<p> </p><p>One</p> <p>Two</p>
.container { display: grid; height: 100vh; grid-template-columns: minmax(200px, 500px) minmax(100px, auto); } .one { background: cyan; } .two { background: pink; }
在这个例子中,第一列总是在200px
到500px
之间。然而,第二列的最小值可以是100px
,对于更大的屏幕,它将覆盖屏幕的其余部分。
我们讨论一下元素中的重复模式。我们如何处理它们?我们可以重复我们的代码或使用javascript。不过,还有另一种方法可以用css来实现。repeat
函数表示轨道列表的一个重复片段,允许以更紧凑的形式编写显示重复模式的大量列或行。
<p> </p><p> This item is 50 pixels wide. </p> <p> Item with flexible width. </p> <p> This item is 50 pixels wide. </p> <p> Item with flexible width. </p> <p> Inflexible item of 100 pixels width. </p>
#container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > p { background-color: #8ca0ff; padding: 5px; }
我还可以将网格嵌套在另一个网格中, 来看看如何实现这一点:
<p> </p><p>One</p> <p>Two</p>Three
i
ii
iii
iv
v
vi
Five
Six
我们首先在外部container
上声明网格:
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, auto)) }
注意,我们在网格模板中有一个repeat
函数,并将其与一个minmax
函数组合在一起。我们现在也可以将网格属性应用到内部网格。
.inner-grid { display: grid; background: white; height: 100%; grid-gap: 5px; grid-template-columns: repeat(3, auto); }
这样,我们网格中嵌套了一个网格。
今天就跟大家分享到这里,感谢大家的观看,我们下期再见!
原文地址:https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/
作者:Shadid Haque
更多编程相关知识,请访问:编程入门!!
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!