html – CSS Grid content to stay in the grid area and not to flow out-ThrowExceptions

Exception or error:

Is there a way for the grid areas to automatically adjust to the size of the content in them.

Right now I have used:
grid-auto-rows: min-content;

And

grid-auto-columns: min-content;

and thought that should fix the problem.

The image below shows how the content is not contained in the grid area.

enter image description here

.container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-auto-rows: min-content;
        grid-auto-columns: min-content;
      }
      
      
      
      :root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  box-sizing: border-box;
  font-size: 10px;
  color: var(--black);

}

*,
*:before,
*:after {
  box-sizing: inherit;
}



.item {
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow); 
}

.item p {
  margin: 0 0 5px 0;
}
<div class="container">
      <div class="item item1">1kajhdkha</div>
      <div class="item item2">2aksdakj</div>
      <div class="item item3">as,jhdahfjhs,h3</div>
      <div class="item item4">4akshdasd</div>
    </div>
How to solve:

Please add Css

.item {
display: grid;
justify-content: center;
align-items: center;
border: 5px solid rgba(0, 0, 0, 0.03);
border-radius: 3px;
font-size: 35px;
background-color: var(--yellow);
word-break: break-all;

}

###

The grid properties should be given to the parent so that child can stay within the boundaries of the parent. Hence you have to put the content inside a span or div like this:

<div class="item item1"><span>1kajhdkh sdsd sdsa</span></div>

And add this to css for “.item” :

word-break: break-all;

###

Add overflow:none and word-break:xxx as you want in .item class.

Leave a Reply

Your email address will not be published. Required fields are marked *