CSS Grid with Rows Going Vertical

Question

I have an array of objects I'm mapping over to make a grid of time blocks. Each block represents 10 minutes so 12:00 - 12:10, 12:10 - 12:20, etc...

Right now I'm using a grid to make the blocks go horizontally across the screen and wrap back down.

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

I want to get it so my blocks are laid out vertically with 12:00am in the bottom left corner and the times moving in an upwards direction like so:

I can do this by adding a -webkit-transform: rotate(270deg); to the GridLayout however I prefer to achieve this without having to rotate the entire grid if I can. Is there a way to use the css-grid rows/columns to achieve this view?

[Make grid container fill columns not rows](https://stackoverflow.com/q/44092529/3597276) — Michael Benjamin, Jan 29 '18 at 04:29

score 0 · Answer 1 · answered Jan 28 '18 at 16:42

I achieved this by removing the display: grid and instead making the div display: flex.

My final styled component looks like this:

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;
`;

CSS Grid with Rows Going Vertical

1 Answers1