0

I've got an unusual problem with breaking words in HTML. The problem is inside the grid which is nested inside another one because every element has got its own height and width. I want to have got the same measurements for every span element.

Example:

body{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px;
}
div{
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}
div > span{
  overflow-wrap: anywhere;
}
span:nth-child(1){
  background-color: red;
}
span:nth-child(2){
  background-color: blue;
}
span:nth-child(3){
  background-color: green;
}
<body>
    <div>
      <span class="title">Behind Her Eyes</span>
      <span class="rate">62%</span>
      <span class="main-character">Simona Brown</span>
     </div>
    <div>
      <span class="title">White Lines</span>
      <span class="rate">68%</span>
      <span class="main-character"> Laura Haddock</span>
     </div>
    <div>
      <span class="title">You</span>
      <span class="rate">87%</span>
      <span class="main-character">Penn Badgley</span>
     </div>
</body>

If something is unclear feel free to ask :)

EDIT: As you can see words can get the different lengths. Behind Her Eyes is longer and breaks differently than others, that's why columns are not similar and I want them to have got the same length.

Stairss
  • 176
  • 1
  • 14
  • Words in spans can vary in length, but if one line advances to the next line, the others will – Stairss Oct 10 '21 at 22:48
  • Let me edit the question then – Stairss Oct 10 '21 at 22:50
  • @connexo check it now – Stairss Oct 10 '21 at 22:59
  • *that's why columns are not similar and I want them to have got the same length* I still don't understand what you expect instead of what it showing. CSS does not have `length`. It has `width` and `height`, and for both, all three columns are identical. – connexo Oct 10 '21 at 23:01

1 Answers1

1

You can use display:flex instead to get your desired result if I understood it correctly.

body{
  display: flex;
}
div{
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  flex: 1;
}
div > span {
  text-align: center;
  overflow-wrap: anywhere;
  flex-grow: 1;
  border: 1px solid black;
}
span:nth-child(1){
  background-color: red;
}
span:nth-child(2){
  background-color: blue;
}
span:nth-child(3){
  background-color: green;
}
<body>
    <div>
      <span>aaaaaaaaaaaaaaasoihsidohfifpfpsdhfpofdsfsdgsdgsdgsdg</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
    <div>
      <span>aaaaaaaa</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
    <div>
      <span>aaaaaaaaaaaaaaaaaaaa</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
</body>

If you want to have same length for both column and rows, then you can use grid-auto-rows: 1fr; using display:grid as mentioned here: Equal height rows in CSS Grid Layout

body{
  display: grid;
  grid-template-columns: 100px 100px 100px;
}
div{
  border: 1px solid black;
  display: grid;
  grid-auto-rows: 1fr;
}
div > span{
  overflow-wrap: anywhere;
}
span:nth-child(1){
  background-color: red;
}
span:nth-child(2){
  background-color: blue;
}
span:nth-child(3){
  background-color: green;
}
<body>
    <div>
      <span>aaaaaaaaaaaaaaasoihsidohfifpfpsdhfpofdsfsdgsdgsdgsdg</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
    <div>
      <span>aaaaaaaa</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
    <div>
      <span>aaaaaaaaaaaaaaaaaaaa</span>
      <span>bbbbbbb</span>
      <span>cccccc</span>
     </div>
</body>
TheUnKnown
  • 681
  • 5
  • 29