Grid网格布局，借鉴了Bootstrap，以Flex弹性布局为基础，使用组件方式，让我们以更加简单直接的行列方式，进行灵活布局，是MASA Blazor中更加推荐的布局方式。如果已经熟悉了Flex弹性布局，上手Grid也会很快。

一、Grid网格布局的相关组件

1、MContainer（组织容器）

MRow的容器。作用是把多个MRow组织起来。虽然叫Container，但并不是Flex弹性布局中的那个Container，可以认为就是一个div。没有MContainer，仅使用MRow和MCol也可以进行网格布局。

Fluid属性，布尔类型，如为true，则无论视窗多大，容器都自适应视窗大小；如为false，则容器自适应为当前设备的最大宽度后，不再变大。

2、MRow（行）

MCol的容器。从Flex弹性布局来看，它才是真正的Container，主轴方向为X轴，自左向右排列，是否换行为wrap。

Justify属性：子元素（MCol）在主轴即X轴方向上的对齐方式。

Align属性：单行时，子元素在交叉轴即Y轴方向上的对齐方式。

AlignContent属性：多行时，子元素在交叉轴即Y轴方向上的对齐方式。

NoGutters属性：布尔类型，确定子元素之间是否有间隔。

Dense属性：布尔类型，如为true，则收缩。

Justify、Align和AlignContent支持响应式，如Justify/JustifySm/JustifyMd/JustifyLg/JustifyXl等。

Grid网格布局将每行划分为12列，子元素MCol通过Cols属性确定自身占据的列数，通过Offset属性定义偏移列数。

3、MCol（列）

MRow的子元素，不能单独使用。从Flex弹性布局来看，它就是Item。

Align属性，定义当前列在Y轴方向上的对齐方式，相当于Flex弹性布局的AlignSelf。

Order属性，定义当前列的排序，相当于Flex弹性布局的Order。支持响应式，不同断点的属性名为Order/OrderSm/OrderMd/OrderLg/OrderXl

Cols属性：Grid网格布局将每行划分为12列，Cols属性定义占据的列数。支持响应式，不同断点的属性名为Cols/Sm/Md/Lg/Xl

Offset属性：当前列向右偏移列数。支持响应式，不同断点的属性名为Offset/OffsetSm/OffsetMd/OffsetLg/OffsetXl

4、MSpacer（空白列）

MRow的子元素，可以使用空白列填充可用空间，或者在两个组件之间留出空间，主要作用就是用来占位的

MSpacer除了在Grid布局中使用外，还可以独立使用。

5、其它行为说明

如果MCol或MSpacer未定义占据列数，则均分当前行剩余列数。比如


    <MRow><MCol Cols="2"></MCol><MSpacer></MSpacer><MCol></MCol></MRow>

，MSpacer和第2个MCol，平分剩余10列，各占5列。

换行wrap行为，举个例子说明，如第1个MCol占据9列，第2个MCol占据4列，当前行排列不下，第2个MCol换行。

默认列与列之间有间隔，通过在MRow上设置NoGutters属性，消除间隔。

MCol的占据列数除了可以设置1~12数值外，可以设置为auto，如【cols="@("auto")"】，根据MCol的子元素确定尺寸。

通过设置MCol的Class属性的左或右外边距为auto，可以将同级列强行分开。如【Class="ml-auto"】，当前列会被顶向最右边。

和Flex一样，Grid也支持嵌套，如


    <MRow><MCol><MRow>......</MRow></MCol>......</MRow>

Grid网格布局，借鉴了Bootstrap，以Flex弹性布局为基础，使用组件方式，让我们以更加简单直接的行列方式，进行灵活布局，是MASA Blazor中更加推荐的布局方式。如果已经熟悉了Flex弹性布局，上手Grid也会很快。

一、Grid网格布局的相关组件

1、MContainer（组织容器）

2、MRow（行）

3、MCol（列）

4、MSpacer（空白列）

5、其它行为说明

二、Grid网格布局的示例

MASA的官网已经提供了比较详尽的示例，可点击到官网查阅>>>

Grid网格布局，借鉴了Bootstrap，以Flex弹性布局为基础，使用 组件方式 ，让我们以更加简单直接的行列方式，进行灵活布局，是MASA Blazor中更加推荐的布局方式。如果已经熟悉了Flex弹性布局，上手Grid也会很快。

一、Grid网格布局的相关组件

1、MContainer（组织容器）

2、MRow（行）

3、MCol（列）

4、MSpacer（空白列）

5、其它行为说明

二、Grid网格布局的示例

MASA的官网已经提供了比较详尽的示例， 可点击到官网查阅>>>

Grid网格布局，借鉴了Bootstrap，以Flex弹性布局为基础，使用组件方式，让我们以更加简单直接的行列方式，进行灵活布局，是MASA Blazor中更加推荐的布局方式。如果已经熟悉了Flex弹性布局，上手Grid也会很快。

MASA的官网已经提供了比较详尽的示例，可点击到官网查阅>>>