CODEWITHSUNDEEP
cssoverflowcss-grid
Sergey Arenzon
Sergey Arenzon

Reputation: 325

Css grid paragraph overflows

Hi I am trying to fit my text grif items but if the text is big enough it overflows out of grid. How can I make grid items height flexible and contain all of the divs text

jsfiddle demo

.grid{
  display     : grid;
  grid-template-columns: minmax(0, 1fr) ;
  background  : red;
  white-space : nowrap;
  }
.item{
  font-size : 30px;   
  border    : 1px green solid;
}
<div class="grid">
  <div class="item">
  
  </div>
  <div class="item">
  sdfsd
  </div>
  <div class="item">
  sdfsdf
  </div>
  <div class="item">
  sergey1sergey2sergey3sergey4sergey5sergey6sergey7sergey8sergey9sergeys10ergey11sergey12
  </div>
  <div class="item">
  sdfsf
  </div>
  <div class="item">
sdsdfsd
  </div>
  <div class="item">
  sdfsdf
  </div>
</div>

Upvotes: 0

Views: 630

Answers (1)

nad
nad

Reputation: 1100

You can use the CSS property word-break: break-word; and remove the white-space: nowrap; from the parent container.

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: red;
}

.item {
  font-size: 30px;
  border: 1px green solid;
  word-break: break-word;
}
<div class="grid">
  <div class="item">

  </div>
  <div class="item">
    sdfsd
  </div>
  <div class="item">
    sdfsdf
  </div>
  <div class="item">
    sergey1sergey2sergey3sergey4sergey5sergey6sergey7sergey8sergey9sergeys10ergey11sergey12
  </div>
  <div class="item">
    sdfsf
  </div>
  <div class="item">
    sdsdfsd
  </div>
  <div class="item">
    sdfsdf
  </div>
</div>

Upvotes: 2

Related Questions