grid 布局纵向布局排列

grid布局可以通过grid-row-start和grid-row-end属性来控制元素在纵向方向上的排列。具体来说，可以通过指定元素所占的起始和结束网格线来实现。例如，如果想让一个元素跨越第2行到第4行，可以这样设置：grid-row-start: 2; grid-row-end: 5;。此外，还可以使用grid-row属性来同时指定起始和结束网格线，例如：grid-row: 2 / 5;。通过这些属性的设置，可以实现灵活的纵向布局排列。

相关问题

grid布局可以不对齐吗

### CSS Grid 布局中的元素不对齐方式

在CSS Grid布局中，虽然默认情况下网格项会按照定义好的行列结构排列并保持对齐，但是可以通过特定属性使某些项目不遵循这一规律从而达到不对齐的效果。

#### 使用 `justify-self` 和 `align-self`

这两个属性可以分别控制单个项目在其所在单元格内的横向和纵向位置。当这些项目的值不是默认的`stretch`时，则不会填满整个分配给它们的空间，进而造成视觉上的不对齐现象[^1]。

.item {
    justify-self: start; /* 或者 end, center */
    align-self: start;   /* 或者 end, center */
}

#### 设置不同的跨度 (`span`)

如果不同行或列之间的跨越数量不一样大，那么即使是从相同起点出发也会因为终点的不同而显得错位。比如让某个元素跨多行或多列：

.item:nth-child(odd){
    grid-row: span 2;
}

.item:nth-child(even){
    grid-column: span 3;
}

这样奇数编号的子元素会在垂直方向上占用两个轨道空间，偶数则是在水平方向扩展三个轨道宽度，最终形成交错分布的状态[^2]。

#### 应用负边距 (Negative Margins)

尽管这不是最推荐的做法，在特殊需求下也可以利用负外边距来调整各个组件的位置关系，使其偏离原本应该处于的地方。不过这种方法容易引起其他样式冲突问题，因此需谨慎使用[^3]。

.item-special{
    margin-top: -20px;
    margin-left: -15px;
}

div纵向布局

要实现 div 元素的纵向布局，可以通过设置其 display 属性为 flex 或 grid，然后使用相应的布局属性来控制其子元素的排列方式。例如：

使用 flex 布局：

.container {
  display: flex;
  flex-direction: column; /* 将子元素纵向排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

使用 grid 布局：

.container {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); /* 设置行高 */
  justify-items: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

其中，auto-fit 表示自动适应容器宽度，minmax(100px, 1fr) 表示行高最小为 100px，最大为 1fr（剩余空间的比例）。