1

First im sorry for the sloppy Css im still new to it. ?Im trying to follow this designBut i can't figure a way to make the text align vertically without it leaving the grid header or disappearing.Any tips? Thnx in advance.

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>
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
Some Guu
  • 35
  • 1
  • 5
  • If my *guess* is right though you should know that a transform is **purely visual** and does not affect layout. You will need to search some more on [**vertical text**](https://stackoverflow.com/questions/1080792/how-can-i-draw-vertical-text-with-css-cross-browser).... – Paulie_D Apr 06 '18 at 11:23

1 Answers1

1

Instead of rotating it buy -90deg, use

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

Try inspecting the #something div. Notice how it is rotated, but the grid doesn't stretch to fill it?

This is because the browser works out how things look in three separate steps: Layout, Paint and Composite.

When you use a css transform, the browser only redoes the composite step, the layout doesn't change.

VirtuallyBookish
  • 31
  • 7