CODEWITHSUNDEEP
csscss-grid
redOctober13
redOctober13

Reputation: 4014

Is it possible to create vertical text that spans all rows in a CSS Grid?

Looking to create a section header for a grid (instead of taking up vertical space by having it above the section), like so:

enter image description here

It's easy of course to have the first column span the rows with grid-rows: 1 / span 3 but then if I transform the text and align/justify it, the div doesn't take up the full space of the column, so setting backgrounds/borders doesn't look right.

See trial pen

body {
  padding: 1em;
  font-family: sans-serif;
}

.my-grid {
  display: grid;
  grid-template-columns: 2rem 100px 10rem;
  background-color: #eee
}

.my-grid>* {
  border: 1px solid #ccc;
}

.section-title {
  grid-row: 1 / span 5;
  align-self: center;
  justify-self: center;
  transform: rotate(270deg);
  background-color: papayawhip;
  text-transform: uppercase;
}

input {
  border: 2px solid #000;
}
<div class="my-grid">
  <div class="section-title">Address</div>
  <div>Address 1</div>
  <input type="text">
  <div>Address 2</div>
  <input type="text">
  <div>City</div>
  <input type="text">
  <div>State</div>
  <input type="text">
  <div>Zip Code</div>
  <input type="text">
</div>

Upvotes: 12

Views: 4689

Answers (1)

Paulie_D
Paulie_D

Reputation: 115373

Yes, using writing-mode

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

MDN

body {
  padding: 1em;
  font-family: sans-serif;
}

.my-grid {
  display: grid;
  grid-template-columns: 2rem 100px 10rem;
  background-color: #eee
}

.my-grid>* {
  border: 1px solid #ccc;
}

.section-title {
  grid-row: 1 / span 5;
  text-align: center;
  writing-mode:vertical-rl; /* vertical text */
  line-height:2rem; /* center in div */
  transform:rotate(180deg); /* spin to orient as required */
  background-color: papayawhip;
  text-transform: uppercase;
}

input {
  border: 2px solid #000;
}
<div class="my-grid">
  <div class="section-title">Address</div>
  <div>Address 1</div>
  <input type="text">
  <div>Address 2</div>
  <input type="text">
  <div>City</div>
  <input type="text">
  <div>State</div>
  <input type="text">
  <div>Zip Code</div>
  <input type="text">
</div>

Upvotes: 16

Related Questions