旋转所有子元素但仍适合父元素

Question

这里需要一张照片。

我有一个使用CSS网格定义的9格，就像这样......

.App {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "1 2 3" "4 5 6" "7 8 9";
}

在2,4,6和8 grid-areas我有很多输入元素。他们使用flexbox来伸展以适合他们的父元素...

.ItemsSection {
  display: flex;
  flex-direction: column;
}

.ItemsSection * {
  flex: 1;
  font-size: 100%;
}

您可以从图像中看到我尝试旋转4 grid-area。它没用。我对此并不感到惊讶，但我正在努力思考如何在没有太多痛苦的情况下实现这种布局。

我需要的是将输入转换为90度，然后将然后拟合到父元素，使它们横向打开，但大小适合中蓝区域。

老实说，我甚至不确定该为什么谷歌！

我真的在寻找一种仅限CSS的解决方案，但乞丐不能选择。

编辑：根据要求添加了代码段

 .app {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: "a b c" "d e f" "g h i";
    }

    .ItemSection {
        display: flex;
        flex-direction: column;
        padding:10px;
    }

    .ItemSection * {
        flex: 1;
        font-size: 100%;
        text-align: center;
    }

    .one {
        background-color: #999;
        grid-area: a;
    }

    .two {
        background-color: #666;
        grid-area: b;
    }

    .three {
        background-color: #999;
        grid-area: c;
    }

    .four {
        background-color: #666;
        grid-area: d;
    }

    .five {
        background-color: #999;
        grid-area: e;
    }

    .six {
        background-color: #666;
        grid-area: f;
    }

    .seven {
        background-color: #999;
        grid-area: g;
    }

    .eight {
        background-color: #666;
        grid-area: h;
    }

    .nine {
        background-color: #999;
        grid-area: i;
    }

<div class="app">
        <div class="ItemSection one">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection two">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection three">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection four">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection five">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection six">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection seven">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection eight">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection nine">
            <input />
            <input />
            <input />
            <input />
        </div>
    </div>

提前致谢。

Answer 1

尽管我使用working solution对您的问题发表了评论（虽然它只能在某种布局中使用），但我相信您可以使用writing-mode: sideways-lr;（也许是前缀？）来解决您的问题但是您可能想要调整input的大小。

.app {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "a b c" "d e f" "g h i";
}

.ItemSection {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.ItemSection * {
  flex: 1;
  font-size: 100%;
  text-align: center;
}

.one {
  grid-area: a;
}

.two {
  grid-area: b;
}

.three {
  grid-area: c;
}

.four {
  grid-area: d;
}

.five {
  grid-area: e;
}

.six {
  grid-area: f;
}

.seven {
  grid-area: g;
}

.eight {
  grid-area: h;
}

.nine {
  grid-area: i;
}

.one,
.three,
.five,
.seven,
.nine {
  background-color: #999;
}

.two,
.four,
.six,
.eight {
  background-color: #666;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
      writing-mode: sideways-lr;
}

<div class="app">
  <div class="ItemSection one">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection two">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection three">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection four">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection five">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection six">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection seven">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection eight">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection nine">
    <input />
    <input />
    <input />
    <input />
  </div>
</div>