行垂直的 CSS 网格答案

【问题标题】：CSS Grid with Rows Going Vertical行垂直的 CSS 网格
【发布时间】：2018-07-06 16:20:43
【问题描述】：

我有一个要映射的对象数组来制作时间块网格。每个区块代表 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 行/列来实现这个视图？

【问题讨论】：

Make grid container fill columns not rows
谢谢@Michael_B

标签： css flexbox grid css-grid

【解决方案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;
`;

【讨论】：