认识
一、认识
网格布局Grid 是最强大的 Css 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
二、核心
采用网格布局的区域，称为容器（container）。容器 内部采用网格定位的 子元素, 称为项目（item）。
三、问题
3.1 Grid 有哪些属性呢？
采用网格布局的区域，称为容器（container）。容器 内部采用网格定位的 子元素, 称为项目（item）。
Grid 容器属性:
-
display: 使用display: grid或inline-grid将一个元素定义为Grid容器。 -
grid-template-columns&grid-template-rows: 用来明确定义网格的列和行的尺寸, 如固定宽度、百分比或者fr单位，从而构建出网格的基础结构。 -
grid-template-areas: 允许给网格区域命名，形成更具语义化的布局结构。通过定义区域名称，可以在后续的项目中轻松定位和布局。 -
gap（包括row-gap和column-gap）: 用来设置网格单元之间的间距。可以统一设置，也可以分别设置行间距和列间距，增强布局的间隔感。 -
grid-auto-rows&grid-auto-columns: 针对隐式生成的行和列，定义它们的尺寸。常用于当网格项目超出明确定义的区域时自动创建的单元格。 -
grid-auto-flow: 决定隐式网格中项目的自动排列方式，可选值有row、column，以及dense（密集排列）选项，用来优化布局空隙。 -
justify-items&align-items: 用于设置所有网格项目在各自单元格内的默认对齐方式，分别作用于行内（水平）和列内（垂直）。 -
justify-content&align-content: 用来控制整个网格在容器内的对齐方式，当网格的总尺寸小于容器时，可以通过这两个属性调整整体位置。 -
place-items&place-content: 是对justify-items/align-items以及justify-content/align-content的简写形式，能更方便地进行同时设置。
Grid 项目属性:
-
grid-column-start,grid-column-end,grid-row-start,grid-row-end: 明确设置某个网格项目在网格中的起始和结束位置，从而实现精确的定位和跨列/跨行布局。 -
grid-area: 既可以用作网格项目的名字（与grid-template-areas对应），也可以作为简写属性，同时设置项目的行与列的起止位置。 -
justify-self&align-self: 单独为某个网格项目覆盖容器设置的默认对齐方式，允许该项目在水平方向和垂直方向上独立调整对齐方式。
3.2 Flex 与 Grid 有什么区别?
Flexbox 是专注于一维布局、强调项目间自适应伸缩和对齐的解决方案，非常适合于组件内部的动态排列; 而 CSS Grid 则是一个二维布局系统，能够同时管理行和列，使得复杂页面的整体布局更为直观和灵活。