La présentation de la grille d'apprentissage css

Mise en page grille

1. introduction

Mise en grille (grid) est le plus puissant système de mise en page CSS:
il est divisé en une grille de pages Web peuvent être une combinaison de grille différente, faire une variété de mises en page. Auparavant, seulement grâce à un cadre complexe CSS pour obtenir l'effet, maintenant intégré dans le navigateur.

mise en page Flex grille de mise en page et présentent certaines similitudes, peut indiquer l'emplacement d'une pluralité d'éléments à l'intérieur du récipient. Cependant, ils présentent également de différence significative.

mise en page Flex est l'axe de la mise en page, vous ne pouvez spécifier « projet » pour la position de l'axe, il peut être considéré comme unidimensionnelle. Récipient de mise en grille aspiré dans « ligne » et cellule de génération « colonne », puis spécifier les cellules « projet », il peut être considéré comme une disposition à deux dimensions. Grille layout puissante que la mise en page Flex.

2. Concepts de base

2,1 conteneur Grille (Container Grid)

affichage d'application: les éléments de la grille. Ceci est tous les éléments de grille (point de grille) de l'élément parent immédiat.

Grille article 2.2 (point Grid)

conteneurs de la grille des éléments enfants (Grille conteneur) (par exemple , des éléments enfants directs)
Remarque: Les éléments que l' élément enfant est le récipient supérieur ne comprend pas les éléments enfants projet

2.3 des lignes et des colonnes

surface horizontale à l'intérieur du récipient est appelé « ligne » (ligne), perpendiculaire à la zone en tant que « colonne » (colonne)

2.4 Grille (Quadrillage)

Maillage ligne, connu sous le nom (ligne de grille) « ligne de grille ». Horizontal lignes de grille Voyage de division, la ligne de grille verticale divisant la colonne
dans des circonstances normales, il y a n + 1 n-rangée pluralité de lignes horizontales de la grille, m colonnes ont m + 1 pour les lignes verticales de la grille, par exemple trois rangées ont quatre niveaux quadrillages

2,5 grille Track (Grille Track)

L'espace entre deux lignes de grille adjacentes. Vous pouvez penser à eux comme une colonne ou d'une ligne de la grille

2,6 cellule de grille (Cell Grid)

Ligne et colonne région intersection, appelés « cellules » (cellules)
dans des circonstances normales, le n rangées et m colonnes produira une des cellules de nxm. Par exemple, 3 lignes et 3 colonnes produiront neuf cellules

2.7 Grille régionale (Zone de grille)

4 Surface totale entourée par des lignes de la grille. Une région de grille (Zone de grille) peut être un nombre quelconque de cellules de la grille (grille cellulaire) Composition

3. Annuaire immobilier Grille (Grid)

3.1 Propriétés de conteneur (Conteneur grille Grid)

• afficher
• grille-template-colonnes
• grille-template-rangs
• grille-template-zones
• grille-template
• grille-colonne-gap
• grille-ligne à fente
• grille-gap
• justifier-éléments
• align-éléments
• Place-éléments
• justifier contenu
• align contenu
• lieu contenu
• grille-auto-colonnes
• grille-auto-rangs
• grille-auto-écoulement
• la grille

Propriétés de la grille d'article 3.2 (éléments de la grille)

• grille-colonne-start
• grille-colonne-end
• grille-ligne-start
• grille-ligne-end
• grille-colonne
• grille-rangée
• grille-zone
• justifier auto
• align-auto
• lieu-auto

4. Les conteneurs de grille de l'élément parent (propriétés conteneurs Grid)

4.1 affichage

Les définitions d'éléments et de créer un nouveau contexte pour le conteneur de format de grille maille dont la teneur en
valeur:

• grille: la génération d'un maillage de niveau bloc
• inline-grille: la génération d'un treillis interne

4.2 grille-template-colonnes / grille-template-lignes

Après la présentation de la grille spécifiée conteneur, il faut diviser les lignes et les colonnes. grille-template-colonnes largeur de la colonne de définition d'attribut pour chaque colonne, ligne grille-template-rangées de chaque rangée définit l'attribut élevés

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

valeur:

• <Track-size>: valeur de la longueur peut être un des récipients de pourcentage ou la grille de l'espace libre des parties aliquotes (unités utilisation EN)
• <Ligne-name>: Vous pouvez choisir le nom

Exemple px comme une unité avec:

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

Le code ci-dessus indique une grille de trois lignes et trois colonnes, la largeur de la colonne et de la ligne est élevée 100px

Unité par exemple en pourcentage:

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

4.2.1 répétition () répéter

Parfois, écriture répétée de la même valeur est très gênant, surtout quand beaucoup de la grille. Dans ce cas, en utilisant la fonction de répétition (), une des valeurs en double simplifiées. Le code ci-dessus avec la répétition () est réécrite comme suit.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

répétition () accepte deux paramètres, le premier paramètre est le nombre de répétitions (l'exemple 3), le second paramètre est la valeur à répéter
répétition () la répétition d' un motif sont également possibles

grid-template-columns: repeat(2, 100px 20px 80px);

6 code ci-dessus définit la largeur de la première et la quatrième colonnes de 100px, la deuxième colonne sous forme de 20px et cinquième, troisième et sixième colonnes que 80px

4.2.2 mot-clé auto-remplissage

Parfois, la taille de la cellule est fixée, mais la taille du conteneur incertain. Si vous le souhaitez chaque ligne (ou chaque colonne) pour accueillir autant de cellules, vous pouvez utiliser le mot-clé autofill indique autofill.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

Le code ci-dessus représente la largeur de chaque 100px de colonne, puis automatiquement rempli, jusqu'à ce que le récipient ne peut pas être placé plusieurs colonnes

4.2.3 fr Mot

Afin de faciliter la représentation proportionnelle, la disposition de la grille fournit fr Mot (acronyme de fraction, qui signifie « fragment »). Si la largeur de deux colonnes étaient 1FR et 2FR, il représente deux fois plus que celui-ci

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Ce qui précède deux code représente les mêmes colonnes de largeur

fr peut être utilisé avec des unités de longueur absolue, cette fois-ci sera très pratique:

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

Le code ci-dessus représente la largeur de la première colonne est de 150 pixels, la moitié de la largeur de la deuxième colonne est la troisième colonne

4.2.4 minmax ()

MINMAX fonction () génère une longueur, la longueur est exprimée dans cette gamme. Il accepte deux paramètres, respectivement, le minimum et maximum

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

Le code ci-dessus, minmax (100px, 1FR) représente la largeur de colonne est égale ou supérieure à 100 pixels, pas plus de 1FR

4.2.5 mot clé auto

mot clé auto indique que la longueur de la décision par vous-même du navigateur

grid-template-columns: 100px auto 100px;

Le code ci-dessus, la largeur de la deuxième colonne, est sensiblement égale à la largeur maximale de la colonne de cellules dans le vaisseau parent, à moins que le contenu des cellules est fourni min-largeur, et que la valeur est supérieure à la largeur maximale

4.2.6 lignes de la grille Nom

grille-template-colonnes grille-template-lignes attribut et l'attribut à l'intérieur de crochets peuvent également être utilisés pour indiquer le nom de chacune des lignes de la grille, pour faciliter la référence future.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

Le spécifie code ci - dessus une disposition en grille pour les 3 rangées x 3 colonnes donc quatre lignes de grille verticales et des lignes horizontales de la grille 4. Les crochets suivis du nom de ces huit lignes.
Grille disposition permet à la même ligne d' une pluralité de noms, tels que [5-rangée cinquième ligne] .

4.3 grille-template-zones 属性

disposition de la grille permet de spécifier « zone » (zone), une zone unique ou une pluralité de cellules de forme. Propriétés de la grille-template-zones pour définir les régions.

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

valeur:

• : Nom de la zone Mesh spécifié par l'élément de grille grille-zone
• . (Dot): représente une cellule de la grille d'ébauche
• none: zone de maille est pas définie

exemple:

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Le code ci-dessus va créer un quatre rangées de large et de 3 mesh élevé. L'en-tête de rangée supérieure entière par régions. La rangée du milieu par les deux zones principales, une cellule vide, composé d'une région de barre latérale. La dernière ligne est de toutes les régions de bas de page.

Notez que, la plage nommée aura une incidence sur les lignes de la grille. A partir des lignes de quadrillage pour chaque région, le nom de domaine est automatiquement région -start, les lignes de grille se termine automatiquement le nom de domaine -fin région.

Par exemple, une zone appelée en-tête, la position de départ des lignes de grille horizontales et les lignes verticales de la grille est appelée démarrage d'en-tête, la position d'extrémité des lignes de grille horizontales et les lignes verticales de la grille est appelée la fin de l'en-tête.

Cela signifie que certaines lignes de la grille peut avoir plusieurs noms, par exemple, les lignes de la grille les plus à gauche au-dessus, il aura trois noms: tête-start, main-démarrage et pied de page-démarrage.

4,4 grille-template

Permet de définir la grille-template-lignes, grille-modèle-colonnes, propriété de la grille-modèle-zones

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

valeur:

• none: Les trois attributs sont définis à leurs valeurs initiales
• <Grille-template-lignes> / <grille-template-colonnes>: la grille-template-colonnes et d'une grille-template-lignes correspondant à une valeur spécifique, et les ensembles grille-template-zones est none

exemple:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
等价于
.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

4,5 attribut grille-ligne à fente, grille-colonne attribut-gap, les propriétés grille-gap

Grille-ligne à fente propriété intervalle entre les rangées (pas de la ligne), la propriété grille-colonne-gap de la colonne à l'espacement de colonne (hauteur de colonne).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

Le code ci-dessus, grille-ligne-espace est prévu pour l'espacement des lignes de grille de colonne écart pour régler l'espacement de colonne.

L'attribut grille-gap combiné est un raccourci pour grille-colonne-gap, et la grille-ligne à fente, la syntaxe suivante.

grid-gap: <grid-row-gap> <grid-column-gap>;
.container {
  grid-gap: 20px 20px;
}

Si la grille écart omettent la deuxième valeur, le navigateur pense que la deuxième valeur est égale à la première valeur
selon les dernières normes, GRID ci - dessus trois nom d'attribut préfixe a été supprimé, grille-colonne écart et grille-ligne-gap colonne à fente et la ligne à fente, grille-gap espace d'écriture écrit.

4.6 justify-éléments attributs, les attributs align-éléments, place-objets propriété

justifier-éléments de contenu de la cellule de propriété position horizontale (gauche, droite), aligner-éléments du contenu des cellules de propriété position verticale (sur le bas).
La syntaxe est la suivante:

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

Un libellé identique de ces deux propriétés, peut prendre les valeurs suivantes:

• Aligné avec le bord d'attaque de la cellule: démarrage
• alignement de bord d'extrémité de la cellule: fin
• centre: les cellules de la grille interne centrée
• étirage: l' étirement de la totalité de la largeur de la (par défaut) remplit la cellule de
  lieux articles sont fournis, et la forme abrégée ALIGN-éléments de justifier-points.

place-items: <align-items> <justify-items>;
下面是一个例子
place-items: start end;

Si la deuxième valeur est omise, le navigateur qui est égale à une première valeur

4.7 attribut justify-contenu, attribut align contenu, propriété endroit contenu

justifier teneur domaine de l'attribut est la totalité du contenu du récipient à l'intérieur de la position horizontale (gauche, droite), la position verticale propriété align teneur de la totalité de la zone de contenu (le plus bas)

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

Un libellé identique de ces deux propriétés, peut prendre les valeurs suivantes:

• À partir de l'alignement cadre du conteneur - démarrage
• La fin de l'alignement du cadre du conteneur - fin
• centre - centre récipient intérieur
• étirer - lorsque la taille de l'article n'a pas été spécifié, une traction occupent les conteneurs entiers de grille
• À égale distance des deux côtés de chaque élément - espace autour. Par conséquent, l'écart entre le projet et le projet est plus grand que le cadre récipient à double intervalle
• Également espacés d'un projet à, et il n'y a pas d'espace entre l'élément et le châssis de conteneur - espace entre
• également espacés d' un projet à, et est de la même longueur de l'intervalle entre l'élément et le châssis de récipient - espace uniformément.
  lieu contenu propriété est combinée propriété raccourcie d'alignement contenu et justifier contenu biens

place-content: <align-content> <justify-content>

place-content: space-around space-evenly;

Si la deuxième valeur est omise, le navigateur supposera que la deuxième valeur est égale à la première valeur

4,8 attribut grille-auto-colonnes, grille-auto-rangées attribut

Parfois, spécifiez l'emplacement de certains éléments, en dehors du réseau existant. Par exemple, la grille est seulement 3, mais un certain point spécifié dans la cinquième ligne. Dans ce cas, le navigateur génère automatiquement la grille excédentaire, afin de placer le projet.
propriétés de la grille-colonnes auto-et de lignes de grille-auto-est utilisé pour définir la propriété, l'excès de largeur du navigateur de grille de colonne et crée automatiquement la hauteur de la ligne. Ils libellé identique grille-modèle-colonnes et une grille-modèle-lignes. Si vous ne spécifiez pas ces attributs, le navigateur cellule complètement le contenu en fonction de la taille de la nouvelle grille détermine la largeur de la colonne et la hauteur de ligne.
syntaxe:

值：
<track-size>：可以是长度值，百分比，或者等份网格容器中可用空间的分数（使用 fr 单位）
.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

Le spécifie code ci-dessus de la nouvelle ligne de 50px haute unifiée (hauteur de la ligne d'origine est 100px).

4.9 Propriétés grille-auto-écoulement

Si vous avez un pas explicitement placé sur l'élément de grille de maillage (éléments de la grille), algorithme de placement automatique placera automatiquement ces numéros grille. Les contrôles de propriété comment algorithme automatique de mise en page fonctionne.

值：
row：告诉自动布局算法依次填充每行，根据需要添加新行 （默认）
column：告诉自动布局算法依次填入每列，根据需要添加新列
dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺
.container {
  grid-auto-flow: row | column | row dense | column dense
}

4.10 propriétés de la grille

Définir tous les attributs suivants dans une courte déclaration: grille-modèle-lignes, grille-modèle-colonnes, grille-modèle-zones, grille-auto-lignes, des colonnes grille-auto, et grille-auto-débit. (Remarque: Vous pouvez spécifier les propriétés d'un maillage de grille explicite ou implicite dans une seule instruction).

值：
none：将所有子属性设置为其初始值。
<grid-template>：与grid-template 简写的工作方式相同。
<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? ：将grid-template-rows 设置为指定的值。 如果 auto-flow 关键字位于斜杠的右侧，则会将 grid-auto-flow 设置为 column。 如果另外指定了 dense 关键字，则自动放置算法使用 “dense” 算法。 如果省略 grid-auto-columns ，则将其设置为 auto。
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>：将 grid-template-columns 设置为指定值。 如果 auto-flow 关键字位于斜杠的左侧，则会将grid-auto-flow 设置为 row 。 如果另外指定了 dense 关键字，则自动放置算法使用 “dense” 打包算法。 如果省略 grid-auto-rows ，则将其设置为 auto。
以下代码是等效的：
.container {
  grid: 100px 300px / 3fr 1fr;
}
.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

.container {
  grid: auto-flow / 200px 1fr;
}
.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

L'élément de grille sous-élément de propriétés (Articles grille)

Remarque: float, affichage: inline-block, affichage: table-cell, propriété verticale align de la grille et les entrées non valides *-colonnes.

5.1 grille-colonne-start / grille-colonne-end / grille-ligne de début / grille-ligne-end

Emplacement de l'élément est spécifié, le procédé spécifique est un objet spécifié quatre bordures, qui sont positionnés à la base de quadrillages

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
值：
<line> ：可以是一个数字引用一个编号的网格线，或者一个名字来引用一个命名的网格线
span <number> ：该网格项将跨越所提供的网格轨道数量
span <name> ：该网格项将跨越到它与提供的名称位置
auto：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度
.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}
使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

5.2 Propriétés grille-colonnes, les propriétés grille rangée

L'attribut grille-colonne combinée est un raccourci pour grille-colonne de début et de la grille-colonne-end, grille-rangée propriété est abrégée combinée propriété grille-ligne de démarrage, et la grille-ligne-end

值：
<start-line> / <end-line>：每个网格项都接受所有相同的值，作为普通书写的版本，包括跨度
.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
.item-c {
  grid-column: 3 / span 2;
  grid-row: 3 / 4;
}
上面代码表示从第三条列网格线开始跨两列，从第三条网格线开始到第四条

5.3 grille-zone

grille-zone dans laquelle une zone d'attribut d'élément spécifié, la propriété grille-région est également utilisée comme grille-ligne-start, grille-colonne-start, grille-ligne-end, grille-colonne de fin abrégée combinée spécifiée directement emplacement du projet.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

5.4 justifier auto attribut, les attributs align-auto, le lieu-auto propriété

justifier soi contenu de la cellule propriété position horizontale (gauche, droite), avec utilisation justify-éléments propriété est exactement le même, mais agir que sur un seul projet.
contenu align auto cellulaires attribut position verticale (les plus faibles), align-éléments avec l' utilisation de l' attribut identique, mais aussi d'agir sur un seul projet.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
这两个属性都可以取下面四个值:
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

Les propriétés combinées sont des propriétés auto-align lieu-auto sténographie et propriétés justifient-auto

值：
auto – 布局模式的 “默认” 对齐方式。
<align-self> <justify-self>：第一个值设置 align-self 属性，第二个值设置 justify-self 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。
.item-a {
  place-self: center;
}
.item-a {
  place-self: center stretch;
}