CSS 그리드 레이아웃 GRID 튜토리얼

그리드는 실제 레이아웃 인공물입니다. CSS에는 Flex 레이아웃과 그리드 레이아웃 모듈이 도입된 후에야 실제로 레이아웃 개념이 생겼습니다. 초기 테이블 레이아웃은 이상했고, 이후에는 페이지의 레이아웃을 구현하기 위해 Abosulte를 사용해야 할 수도 있었습니다. 요컨대, 구현하기가 매우 어색합니다. 이렇게 작성하면 무너질지, 후속 요소에 영향을 미칠지, 왜 여전히 틀리는지 항상 주의해야 합니다. 저자는 이러한 구현을 Flex와 Grid가 진짜 천이라고 과감하게 부릅니다. 국. Flex는 1차원 레이아웃을 담당하고 Grid는 2차원 레이아웃을 담당합니다. 두 레이아웃 모두 매우 강력하지만 하나가 다른 것보다 어렵고 피를 토하고 싶을 정도로 속성이 너무 많습니다. awesome은 속성 대신 모듈입니다. 오늘은 아래 사진을 중심으로 그리드 레이아웃에 관련된 개념들만 소개하겠습니다布局。总之，实现起来特别别扭，要时刻注意：我这么写会不会塌陷，会不会给后面的元素造成影响，尼玛为啥还串位了。笔者斗胆的称这些实现为布局trick，Flex和Grid才是真的布。局。Flex负责一维布局，Grid负责二维布局，两个布局都非常强大，但是一个比一个难，属性多到想吐血，谁让人家牛逼是模块而不是属性呢。今天我们只围绕下图来介绍Grid布局相关概念

网格容器

Grid布局开始的地方，grid模块的承载体。外部看来就是个块也可能是inline-block块，容器内部一个格一个格的。和 Flex 布局一样，它也分容器属性和项目属性。

网格线

网格线有横线和纵线，纵横交错的线就将网格容器切割成了最小的单元单元格。网格线是有编号的，从数字1开始编号。上图中有6条横线和6条纵线。如果你喜欢也可以给线起名字，一根线还能有多个名字。

单元格

Grid Cell 图中绿色背景的块就是单元格，网格布局的最小计量单位，该容器一共有25个单元格。

网格轨道

两条相邻的网格线中间部分就是轨道，为啥要有轨道的概念呢?因为需要设定轨道的宽度，如果将宽高单独的设置到单元格上那很可能变成了瀑布流复杂程度嗖嗖地上升。再看看上图的浅蓝色和浅粉色轨道感受一下。

网格区域

网格线、单元格、和轨道存在的意义就是将容器划分出你所需要的区域Grid Area。区域是可包含多个单元格的一个整块，那么如何划分呢？两条横的网格线和两条纵的网格线交叉的部分就是区域了。将容器合理的划分出多个区域，那么布局目的也达到了。区域是可以重叠的，所以它是有 z-index。

今天的概念部分就介绍到这里。后续会详细的介绍 grid布局编程相关的知识。
ps: 图片摘抄于CSS Grid布局：什么是网格布局

姊妹篇 深入理解布局神器 flexbox

Grid，真的布局神器。Css在引入Flex布局和Grid布局两个模块后，才真正有了布局的概念。最初的table布局不知道是神马鬼，再到 float 满天飞，可能还要使用abosulte来实现页面的布局。总之，实现起来特别别扭，要时刻注意：我这么写会不会塌陷，会不会给后面的元素造成影响，尼玛为啥还串位了。笔者斗胆的称这些实现为布局trick，Flex和Grid才是真的布局。Flex负责一维布局，Grid负责二维布局，两个布局都非常强大，但是一个比一个难，属性多到想吐血，谁让人家牛逼是模块而不是属性呢。今天我们只围绕下图来介绍Grid布局相关概念。

网格容器

Grid布局开始的地方，grid模块的承载体。外部看来就是个块也可能是inline-block块，容器内部一个格一个格的。和 Flex 布局一样，它也分容器属性和项目属性。

网格线

网格线有横线和纵线，纵横交错的线就将网格容器切割成了最小的单元单元格

그리드 컨테이너

그리드 레이아웃이 시작되는 곳, 그리드 모듈의 캐리어입니다. 외부에서 보면 블록처럼 보일 수도 있고, 인라인 블록으로 보일 수도 있습니다. 컨테이너 내부에는 셀이 하나씩 있습니다. Flex 레이아웃과 마찬가지로 컨테이너 속성과 항목 속성으로 구분됩니다. 🎜

그리드 선

🎜그리드 선에는 가로선과 세로선이 있습니다. 십자형 선은 그리드 컨테이너를 가장 작은 단위인 셀로 자릅니다. 그리드 선에는 숫자 1부터 시작하여 번호가 매겨집니다. 위 그림에는 가로선 6개와 세로선 6개가 있습니다. 원하는 경우 스레드 이름을 지정할 수도 있으며 스레드는 여러 이름을 가질 수 있습니다. 🎜🎜🎜🎜🎜

셀

🎜그리드 셀 그림의 녹색 배경 블록은 그리드 레이아웃의 가장 작은 단위인 셀입니다. 컨테이너에는 총 25개의 셀이 있습니다. 🎜🎜🎜🎜

그리드 트랙

🎜둘 중간 인접한 그리드 선의 일부가 선로라는 개념이 있는 이유는 선로의 너비를 설정해야 하기 때문입니다. 너비와 높이를 셀에 별도로 설정하면 폭포 흐름이 될 가능성이 높습니다. 복잡성이 급증하고 있습니다. 위 사진의 연한 파란색과 연한 분홍색 트랙을 다시 한 번 살펴보면서 그 느낌을 느껴보세요. 🎜🎜🎜🎜

그리드 영역

🎜그리드 의미 라인, 셀, 트랙의 존재 여부는 컨테이너를 필요한 그리드 영역으로 나누는 것입니다. 영역은 여러 개의 셀을 포함할 수 있는 전체 블록입니다. 그러면 어떻게 나눌 수 있나요? 두 개의 수평 그리드선과 두 개의 수직 그리드선이 교차하는 영역이 영역입니다. 컨테이너를 여러 영역으로 합리적으로 나누면 레이아웃 목적이 달성됩니다. 지역은 겹칠 수 있으므로 Z-색인이 있습니다. 🎜🎜🎜🎜🎜오늘의 컨셉은 여기까지입니다. 그리드 레이아웃 프로그래밍과 관련된 지식은 나중에 자세히 소개하겠습니다. 🎜ps: 그림은 CSS 그리드 레이아웃: 그리드 레이아웃이란 무엇입니까🎜

🎜동반 기사에서 레이아웃 아티팩트 Flexbox🎜

🎜에 대한 심층적인 이해를 제공합니다. 🎜🎜Grid, 실제 레이아웃 Artifact. CSS에는 Flex 레이아웃과 그리드 레이아웃 모듈이 도입된 후에야 레이아웃 개념이 생겼습니다. 초기 테이블 레이아웃은 이상했고, 이후에는 페이지의 레이아웃을 구현하기 위해 Abosulte를 사용해야 할 수도 있었습니다. 요컨대 구현하기가 매우 어색한데, 이렇게 작성하면 무너질지, 후속 요소에 영향을 미칠지, 왜 여전히 틀리는지 항상 주의 깊게 살펴보아야 합니다. 저자는 이러한 구현을 레이아웃 트릭이라고 과감하게 설명합니다. Flex 및 Grid가 실제 레이아웃입니다. Flex는 1차원 레이아웃을 담당하고 Grid는 2차원 레이아웃을 담당합니다. 두 레이아웃 모두 매우 강력하지만 하나가 다른 것보다 어렵고 피를 토하고 싶을 정도로 속성이 너무 많습니다. awesome은 속성 대신 모듈입니다. 오늘은 아래 그림을 바탕으로 그리드 레이아웃과 관련된 개념만 소개하겠습니다. 🎜🎜🎜🎜

그리드 컨테이너

🎜그리드 레이아웃 시작점은 그리드 모듈의 캐리어입니다. 외부에서 보면 블록처럼 보일 수도 있고, 인라인 블록으로 보일 수도 있습니다. 컨테이너 내부에는 셀이 하나씩 있습니다. Flex 레이아웃과 마찬가지로 컨테이너 속성과 항목 속성으로 구분됩니다. 🎜

그리드 선

🎜그리드 선에는 가로선과 세로선이 있습니다. 십자형 선은 그리드 컨테이너를 가장 작은 단위인 셀로 자릅니다. 그리드 선에는 숫자 1부터 시작하여 번호가 매겨집니다. 위 그림에는 가로선 6개와 세로선 6개가 있습니다. 원하는 경우 스레드 이름을 지정할 수도 있으며 스레드는 여러 이름을 가질 수 있습니다. 🎜🎜🎜🎜🎜

Cell

Grid Cell 사진의 녹색 배경 블록은 그리드 레이아웃의 최소 단위인 셀입니다. 이 컨테이너에는 총 25개의 셀이 있습니다.

Grid track

두 개의 인접한 그리드 선의 중간 부분이 트랙입니다. 트랙의 너비와 높이를 별도로 설정해야 하기 때문입니다. 단위 그리드에서 폭포가 될 가능성이 있는 것은 복잡성이 엄청나게 증가한다는 것입니다. 위 사진의 연한 파란색과 연한 분홍색 트랙을 다시 한 번 살펴보면서 그 느낌을 느껴보세요.

Grid Area

그리드 라인, 셀, 트랙의 존재 의미는 컨테이너를 필요한 영역으로 나누는 것입니다. 영역은 여러 개의 셀을 포함할 수 있는 전체 블록입니다. 그러면 어떻게 나눌 수 있나요? 두 개의 수평 그리드선과 두 개의 수직 그리드선이 교차하는 영역이 영역입니다. 컨테이너를 여러 영역으로 합리적으로 나누면 레이아웃 목적이 달성됩니다. 지역은 겹칠 수 있으므로 Z-색인이 있습니다.

위 내용은 CSS 그리드 레이아웃 GRID 튜토리얼입니다. 도움이 되셨으면 좋겠습니다.

관련 권장사항:

CSS 그리드 레이아웃 가이드

CSS 그리드 레이아웃 모듈 소개_html/css_WEB-ITnose

5분 안에 CSS 그리드 레이아웃을 가르쳐주세요

위 내용은 CSS 그리드 레이아웃 GRID 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!