CSS Содержимое сетки, чтобы оставаться в области сетки и не вытекать

Question

Есть ли возможность для областей сетки автоматически подстраиваться под размер содержимого в них.

Прямо сейчас я использовал:
grid-auto-row: min-content;

И

grid-auto-columns: min-content;

и подумал, что должен решить проблему.

На рисунке ниже показано, как содержимое не содержится в области сетки.

.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>

Answer 1

Пожалуйста, добавьте 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;

}

Answer 2

Свойства сетки должны быть переданы родителю, чтобы дочерний элемент мог оставаться в пределах границ родителя. Следовательно, вы должны поместить содержимое в span или div следующим образом:

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

И добавить это к css для ".item":

word-break: break-all;

Answer 3

Добавьте overflow:none и word-break:xxx как хотите в .item классе.