如何不使用旋转实现CSS Grid垂直向上排列时间块布局？

当然可行！完全可以只靠CSS Grid的行/列属性实现这种垂直排列、从左下角（底部）向上递增的时间块布局，不需要旋转整个网格。下面给你两种实用的实现思路：

方法一：反转时间块数组（最简单直接） #

CSS Grid是按照DOM中元素的顺序渲染的，把时间块数组反转后，最早的时间（12:00am）会自然出现在网格底部，后续时间依次向上堆叠。

首先修改GridLayout的样式，改成单列布局，行高匹配原来的列宽：

const GridLayout = styled.div` 
  display: grid; 
  grid-template-columns: 2fr; /* 单列，宽度和原来每个时间块的宽度一致 */
  grid-auto-rows: 2fr; /* 自动生成行，行高和原来的列宽保持一致 */
  justify-content: center; 
  align-content: start; /* 让元素从网格容器顶部开始堆叠 */
  grid-gap: 0; 
  margin: 0 auto; 
  height: 48rem; /* 根据时间块总数调整，比如8小时就是48个块，每个块约1rem高 */
  width: 2.67rem; /* 原来总宽度16rem ÷ 6列 ≈ 2.67rem，和单个块的宽度一致 */
`;

然后渲染时反转数组：

<GridLayout>
  {/* 展开并反转数组，让最晚的时间先渲染（排在最上方） */}
  {[...timeBlocks].reverse().map((block, index) => (
    <TimeBlock key={index}>{block.timeRange}</TimeBlock>
  ))}
</GridLayout>

方法二：使用order属性（不修改原数组顺序） #

如果不想改动原数组的顺序，可以用CSS的order属性调整时间块在网格中的排列位置。给更早的时间设置更大的order值，让它们最后渲染，自然落在网格底部。

GridLayout的样式和上面保持一致，渲染时给每个块设置order：

<GridLayout>
  {timeBlocks.map((block, index) => (
    <TimeBlock 
      key={index} 
      style={{ order: timeBlocks.length - index }} 
    >
      {block.timeRange}
    </TimeBlock>
  ))}
</GridLayout>

• 最早的时间（12:00am，索引0）会得到order: 总块数，成为最后被渲染的元素，落在网格底部。
• 后续时间的order值依次减小，会堆叠在更早时间的上方。

关键注意点 #

• 容器高度：必须给GridLayout设置固定或动态高度，这样网格才有空间垂直堆叠块。可以根据总块数计算（比如每个块高1rem，48个块就设48rem）。
• 块尺寸：2fr是沿用你原来的列尺寸，如果你想调整块的大小，可以修改这个值。
• 对齐方式：align-content: start让元素从容器顶部开始堆叠，但因为我们反转了排列顺序，最早的时间最终会落在底部，正好符合你要的“左下角”位置。

这种方式保持了布局的整洁，完全不会有旋转带来的视觉变形问题。

内容的提问来源于stack exchange，提问作者Onaracs