Rotate all child elements but still fit to parent element - css

Question

A picture is needed here.
I have a 9 grid defined using CSS grid like this...
.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";
}
In the 2, 4, 6 and 8 grid-areas I've got a number of input elements. They stretch to fit their parent element using flexbox like this ...
.ItemsSection {
display: flex;
flex-direction: column;
}
.ItemsSection * {
flex: 1;
font-size: 100%;
}
You can see from the image that I've tried to rotate the 4 grid-area. It didn't work. I'm not surprised about that but I'm struggling to think how I would achieve that layout without a lot of pain.
What I need is for the inputs to be transformed by 90 degrees and then fitted to the parent element so that they are sideways on but sized to the mid-blue area.
Honestly, I'm not even sure what to google for that!
I'm really looking for a CSS only solution but beggars can't be choosers.
EDIT: Code snippet added as requested
.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>
Thanks in advance.

Answer 1

Despite my comment to your question with a working solution (albeit it'll only work in a certain layout), I believe you can solve your issue with writing-mode: sideways-lr; (and maybe prefixes?) but you might want to tweak how your inputs are sized.
.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>