html - CSS GRID 垂直对齐文本，因此它不会离开容器

Question

首先我很抱歉草率的 Css 我还是新手。？ Im trying to follow this design但是我想不出一种方法来使文本在不离开网格标题或消失的情况下垂直对齐。有什么提示吗？提前致谢。

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "first-section"
    "second-section"
    "footer";
}

header {
    grid-area: header;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: auto;
}

#something{
  color: red;
  transform: rotate(-90deg);
}

<header>
            <div id="something">
                    <h1>Someting</h1>
                    <h2>NAME GOES HERE</h2>
            </div>
            <div id="picture">
    
            </div>
</header>

Answer 1

而不是旋转它购买-90deg，使用

#something {
    color:red;
    writing-mode: vertical-rl;
}

尝试检查#something div。请注意它是如何旋转的，但网格不会拉伸(stretch)以填充它？

这是因为浏览器通过三个独立的步骤来计算事物的外观:布局、绘画和合成。

当您使用 css 转换时，浏览器只会重做复合步骤，布局不会改变。