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

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 拉伸(stretch)以适应他们的父元素......

.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; (也许还有前缀？)解决你的问题，但你可能想调整你的方式输入的大小。

.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>