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.

Connaissance de base de la grille CSS

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.

Colonnes et lignes de la grille

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.

Utiliser efficacement les modèles de grille

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 class="container">
  <p class="one">One</p>
  <p class="two">Two</p>
</p>

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {
  background: cyan;
}
.two {
  background: pink;
}

在这个例子中，第一列总是在200px到500px之间。然而，第二列的最小值可以是100px，对于更大的屏幕，它将覆盖屏幕的其余部分。

如何使用 repeat 函数？

我们讨论一下元素中的重复模式。我们如何处理它们?我们可以重复我们的代码或使用javascript。不过，还有另一种方法可以用css来实现。repeat函数表示轨道列表的一个重复片段，允许以更紧凑的形式编写显示重复模式的大量列或行。

<p id="container">
  <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>
</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 class="container">
  <p class="item">One</p>
  <p class="item">Two</p>
  <p class="item">Three</p>
  <p class="item inner-grid">
    <p class="item">i</p>
    <p class="item">ii</p>
    <p class="item">iii</p>
    <p class="item">iv</p>
    <p class="item">v</p>
    <p class="item">vi</p>
  </p>
  <p class="item">Five</p>
  <p class="item">Six</p>
</p>

我们首先在外部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!