CSS布局模式之Flex布局&Grid布局（二）https://developer.aliyun.com/article/1426127
3.4.3 grid-column-start
grid-column-start是Grid布局中用于指定网格项开始放置列的起点位置的属性。它可以接受数字和关键字值作为输入，并与其他 Grid 属性联合使用，以指定网格项放置和调整它在 Grid 容器中的位置的方式。
具体来说，grid-column-start属性指定网格项开始放置的列的起点位置。它可以接受以下类型的值：
- ：具有整数值的表示列线的编号，从
1开始（类似于grid-column: / ;） - ：自定义标识符的名称（类似于
grid-column: ;） span：指定网格项横跨多少个单元格（类似于grid-column: span ;）span：指定网格项横跨多少个命名的列（类似于grid-column: span ;）
例如，以下代码显示了一个简单的 Grid 布局，其中两个网格项跨越了两个列：
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: 100px 100px; } .item1 { background-color: red; grid-column-start: 1; grid-column-end: 3; } .item2 { background-color: blue; grid-column: 2 / 4; }
在这个例子中，我们定义了一个3列2行的 Grid 容器，并设置了两个子元素，其中一个元素跨越了第1列和第2列，另一个元素跨越了第2列和第3列。其中，.item1 等价于 grid-column-start: 1; grid-column-end: 3;，.item2 等价于 grid-column: 2 / 4;。这两种写法都可以达到同样的效果，其中 grid-column 是 grid-column-start 和 grid-column-end 的简写方式。
总的来说，grid-column-start属性非常适合于在 Grid 容器中定义跨越多行或多列的网格项，以及调整网格项的位置和大小。
3.4.4 grid-column-end
grid-column-end是Grid布局中用于指定网格项结束放置列的终点位置的属性。它可以接受数字和关键字值作为输入，并与其他 Grid 属性联合使用，以指定网格项放置和调整它在 Grid 容器中的位置的方式。
具体来说，grid-column-end属性指定网格项结束放置的列的终点位置。与grid-column-start不同的是，grid-column-end属性接受的值的范围是从指定的起点位置到下一个位置。它可以接受以下类型的值：
- ：具有整数值的表示列线的编号，从
1开始（类似于grid-column: / ;） - ：自定义标识符的名称（类似于
grid-column: ;） span：指定网格项横跨多少个单元格（类似于grid-column: / span ;）span：指定网格项横跨多少个命名的列（类似于grid-column: / span ;）
例如，以下代码显示了一个简单的 Grid 布局，其中一个网格项跨越了两个列：
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: 100px 100px; } .item { background-color: red; grid-column-start: 1; grid-column-end: 3; }
在这个例子中，我们定义了一个3列2行的 Grid 容器，并设置了一个子元素，它跨越了第1列和第2列，并占用了所有行。其中，.item 的起点为第1列，终点为第3列。如果仅使用grid-column属性，则等价于grid-column: 1 / 3;。
总的来说，grid-column-end属性非常适合于在 Grid 容器中定义跨越多行或多列的网格项，以及调整网格项的位置和大小。
3.4.5 grid-row和grid-column
grid-row和grid-column是Grid布局中的简写属性，可以同时指定网格项开始放置的行和列，以及结束放置的行和列。grid-row和grid-column属性均由两个值组成，第一个值表示开始位置，第二个值表示结束位置。
这两个属性可以接受以下类型的值：
- ：表示表示网格线的编号或自定义名称；
span：表示跨越多少个网格线；span：表示跨越多少个自定义名称的网格线。
例如，以下代码展示了如何使用grid-row和grid-column属性：
.item { grid-row: 1 / 3; /* 从第1行到第3行 */ grid-column: 2 / 4; /* 从第2列到第4列 */ }
在这个例子中，我们定义了一个.item元素，使用grid-row属性指定了该元素应该跨越从第1行到第3行，在列方向上使用grid-column属性指定了该元素应该跨越从第2列到第4列。这意味着该元素将占用第1、2行和第2、3、4列的所有单元格。
总的来说，使用grid-row和grid-column属性能够使网格项的位置和大小更加直观地描述，并且更容易调整。
3.4.6 grid-area
grid-area是Grid布局中用于同时指定网格项开始放置的行和列以及结束放置的行和列的简写属性。它可以接受数字和关键字值作为输入，并与其他 Grid 属性联合使用，以指定网格项放置和调整它在 Grid 容器中的位置的方式。
grid-area属性由4个值组成，分别表示网格项的开始行、开始列、结束行和结束列。可以使用下列三种方法指定grid-area属性的值：
- 使用数值和斜线指定起始行和起始列，紧接着使用数值和斜线指定结束行和结束列：
grid-area: / / / ; - 使用自定义命名网格的名称来代替行或列起始和结束位置的数值：
grid-area: [ / / / ]; - 使用
row-span或col-span指定跨越多少行或列：grid-area: / / span / span ;
例如，以下代码展示了如何使用grid-area属性：
.item { grid-area: 1 / 2 / 3 / 4; }
在这个例子中，我们定义了一个.item元素，使用grid-area属性指定了它所跨越的区域，从第1行和第2列开始，到第3行和第4列结束，它将占用第1、2、3行和第2、3、4列的所有单元格。
总的来说，使用grid-area属性方便地指定了网格项的开始和结束位置，并可以使网格项的位置和大小更加直观地描述。
4. 比较
4.1 Flex布局与Grid布局的异同
Flex布局和Grid布局是两种不同的CSS布局模式，它们各自采用不同的策略来对元素进行排列和定位。这里列出一些它们之间的异同点：
异同之处：
1. 相对定位和绝对定位
Flex布局是基于相对定位模型的，它的主要目的是对元素进行适应性布局，相对容器或其他元素进行定位，从而在可变屏幕尺寸和设备上改变它们的位置和大小。而Grid布局是基于绝对定位模型的，它的主要目的是在父级网格容器的单元格中对元素进行排列和定位。
2. 方向
Flex布局只能在主轴和交叉轴方向上排列元素，而Grid布局则可以在行和列上排列元素。
3. 属性
Flex布局具有的主要属性有flex-direction、justify-content、align-items和align-content等。这些属性用于控制Flex容器内Flex项在主轴和交叉轴方向上的位置、对齐方式和空间分布情况，其中flex-direction用于控制主轴方向。而Grid布局则拥有grid-template-rows、grid-template-columns、grid-template-areas等属性。这些属性用于定义网格容器的行和列，在行和列上排列和定位网格项。
4. 实现方式
Flex布局通过在Flex容器上应用display: flex属性来启用，并与Flex项目使用诸如flex-grow、flex-shrink和flex-basis等属性，来指定在空间分布方案。而Grid布局通过在父级元素上应用display: grid来启用，并与网格项使用类似于grid-column和grid-row这样的属性，以指定它们的位置和大小。
相同之处：
1. 容器和项目
Flex布局和Grid布局都基于容器和项目的概念，在容器中包含多个项目，并对这些项目进行计算和布局。
2. 响应式设计
Flex布局和Grid布局都是响应式布局，可以在不同的设备上和屏幕尺寸下自适应排列和定位元素。
总的来说，这两种布局模式都有其特定的用途和优点，可以根据不同的需求和场景进行选择和应用。Flex布局适用于需要快速实现适应性布局的小型项目，而Grid布局则更适用于大型网格布局项目。
4.2 如何选择Flex布局或Grid布局？
根据项目的需求和设计，选择适合的布局模式是非常重要的。
以下是一些考虑以及建议的情况，有助于决定使用Flex布局还是Grid布局：
- 需要在单行或单列中排列和对齐元素时，可以使用Flex布局。例如，设计一个水平导航条、水平的图文列表以及一个垂直列布局等等。
- 当需要在多行或多列中创建一个网格布局时，可以使用Grid布局。比如设计一个相册模块，产品展示模块等等。Grid 布局以其对齐和罗列功能的出众性能而闻名。
- 如果布局需要同时支持网格和工具栏等外观，建议使用Flex布局。因为Flex布局更加灵活适应性强，在整个屏幕上都可以进行排列和对齐。
- 如果需要实现项目间比例关系的控制，建议使用Flex布局。因为Flex布局很容易实现元素的比例调整，而Grid布局则需要在行和列上进行指定。
- 如果网格布局需要对项目进行复杂的定位操作，建议使用Grid布局。因为Grid布局提供了更多的定位、调整和动态响应机制。
总而言之，选择使用Flex布局还是Grid布局取决于你的项目和需求。它们都有自己的优点和局限性，理解这些优点和局限性并灵活应用它们，可以帮助你更好地设计适应性的Web界面。
