行网格的CSS网格垂直

Question

我有一个对象数组，我将其映射到一个时间块网格。每个街区代表10分钟，所以12:00 - 12：10,12：10 - 12:20等等......

现在我正在使用网格使块在屏幕上水平移动并向后包裹。

const GridLayout = styled.div`
  display: grid;
  grid-template-columns: repeat(6, 2fr);
  justify-content: center;
  grid-gap: 0;
  margin: 0 auto;
  width: 16rem;
 `;

我想得到它所以我的积木垂直布局，在左下角凌晨12:00，时间向上移动，如下：

我可以通过向GridLayout添加-webkit-transform: rotate(270deg);来实现这一点，但是如果可以的话，我更愿意实现这一点，而不必旋转整个网格。有没有办法使用css-grid rows / columns来实现这个视图？

Answer 1

我通过删除display: grid而不是制作div display: flex来实现此目的。

我的最终样式组件如下所示：

const Wrapper = FlexColumn.extend`
    flex-wrap: wrap;
    flex-flow: column wrap;
    align-content: stretch;
    max-height: 13rem;
    width: 48rem;
    align-items: flex-start;
    justify-content: center;
`;