Tutoriel GRID de disposition de grille CSS

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

Le contenu ci-dessus est le tutoriel GRID de mise en page de grille CSS, j'espère qu'il pourra vous aider.

Recommandations associées :

Guide de mise en page de la grille CSS

CSS Introduction au module de disposition de grille_html/css_WEB-ITnose

Apprenez-vous la disposition de grille CSS en cinq minutes

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!