Tutoriel GRID de disposition de grille CSS-tutoriel CSS-php.cn

Tutoriel GRID de disposition de grille CSS

小云云

Libérer： 2017-12-06 14:03:37

original

2621 Les gens l'ont consulté

Grid est un véritable artefact de mise en page. Css n'a vraiment eu le concept de mise en page qu'après l'introduction des modules de mise en page Flex et de mise en page Grid. La disposition initiale du tableau était bizarre, puis les flotteurs étaient partout. Peut-être qu'abosulte était utilisé pour réaliser le 布局 de la page. En bref, c'est très délicat à mettre en œuvre. Vous devez toujours faire attention à savoir si cela s'effondrera si je l'écris de cette façon, si cela affectera les éléments suivants et pourquoi c'est toujours faux. L'auteur appelle hardiment ces implémentations les astuces structurelles que Flex et Grid sont le véritable tissu. bureau. Flex est responsable de la mise en page unidimensionnelle et Grid est responsable de la mise en page bidimensionnelle. Les deux mises en page sont très puissantes, mais l'une est plus difficile que l'autre, et il y a tellement d'attributs que j'ai envie de vomir du sang. génial est 模块 au lieu de 属性. Aujourd'hui, nous présenterons uniquement les concepts liés à la disposition de la grille autour de l'image ci-dessous

Tutoriel GRID de disposition de grille CSS

Conteneur de grille

L'endroit où commence la disposition de la grille , le support du module de grille. De l'extérieur, cela ressemble à un 块 ou peut-être à un inline-block块, mais à l'intérieur du conteneur il y a des cellules une à une. Comme la disposition Flex, elle est également divisée en propriétés de conteneur et propriétés d'élément.

Lignes de grille

Les lignes de grille comprennent des lignes horizontales et verticales. Les lignes entrecroisées coupent le conteneur de grille en les plus petites unités单元格. Les lignes du quadrillage sont numérotées en commençant par le chiffre 1. Il y a 6 lignes horizontales et 6 lignes verticales dans l'image ci-dessus. Vous pouvez également nommer les fils de discussion si vous le souhaitez, et un fil de discussion peut avoir plusieurs noms.
Tutoriel GRID de disposition de grille CSS

Cellule

Cellule de grille Le bloc avec un fond vert sur l'image est la cellule, la plus petite unité de mesure pour la disposition de la grille. Le conteneur a un total de 25 cellules.
Tutoriel GRID de disposition de grille CSS

Piste en grille

La partie médiane de deux lignes de grille adjacentes est la piste Pourquoi y a-t-il le concept de piste Parce que la largeur de ? la piste doit être définie si la largeur et la hauteur des cellules sont définies séparément, cela risque de devenir un flux en cascade et la complexité augmentera fortement. Jetez un autre coup d’œil aux pistes bleu clair et rose clair dans l’image ci-dessus pour vous en faire une idée.
Tutoriel GRID de disposition de grille CSS

Zone de grille

La signification de l'existence de lignes de grille, de cellules et de pistes est de diviser le conteneur en zones dont vous avez besoin. Zone. Une région est un bloc entier pouvant contenir plusieurs cellules, alors comment la diviser ? La zone où se croisent deux lignes de quadrillage horizontales et deux lignes de quadrillage verticales est la zone. Si le conteneur est raisonnablement divisé en plusieurs zones, l’objectif de mise en page sera atteint. Les régions peuvent se chevaucher, elles ont donc un z-index.
Tutoriel GRID de disposition de grille CSS

C'est tout pour la partie concept d'aujourd'hui. Les connaissances liées à la programmation de disposition en grille seront présentées en détail ultérieurement.
ps : L'image est extraite de CSS Grid Layout : Qu'est-ce que Grid Layout

L'article complémentaire fournit une compréhension approfondie de l'artefact de mise en page flexbox

Grid, un véritable artefact de mise en page. Css n'a vraiment eu le concept de mise en page qu'après l'introduction des modules de mise en page Flex et de mise en page Grid. La disposition initiale du tableau était bizarre, puis les flotteurs étaient partout. Peut-être qu'abosulte était utilisé pour réaliser le 布局 de la page. Bref, c'est très délicat à mettre en œuvre. Il faut toujours faire attention à savoir si cela va s'effondrer si je l'écris de cette façon, si cela affectera les éléments suivants, et pourquoi est-ce toujours faux ? L'auteur appelle hardiment ces implémentations astuces de mise en page : Flex et Grid sont les véritables mises en page. Flex est responsable de la mise en page unidimensionnelle et Grid est responsable de la mise en page bidimensionnelle. Les deux mises en page sont très puissantes, mais l'une est plus difficile que l'autre, et il y a tellement d'attributs que cela donne envie de vomir du sang. qui rend les gens géniaux est 模块 au lieu de 属性. Aujourd'hui, nous présenterons uniquement les concepts liés à la disposition en grille sur la base de la figure ci-dessous.
Tutoriel GRID de disposition de grille CSS

Conteneur de grille

L'endroit où commence la disposition de la grille, le support du module de grille. De l'extérieur, cela ressemble à un 块 ou peut-être à un inline-block块, mais à l'intérieur du conteneur il y a des cellules une à une. Comme la disposition Flex, elle est également divisée en propriétés de conteneur et propriétés d'élément.

Lignes de grille

Cell

Grid Cell Le bloc de fond vert sur l'image est la cellule, la plus petite unité de mesure pour la disposition en grille. Le conteneur a un total de 25 cellules.
Tutoriel GRID de disposition de grille CSS