CODEWITHSUNDEEP
htmlcsscss-grid
Some Guu
Some Guu

Reputation: 35

CSS GRID vertically align text so it dosn't leave the container

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>

Upvotes: 1

Views: 577

Answers (1)

VirtuallyBookish
VirtuallyBookish

Reputation: 31

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.

Upvotes: 1

Related Questions