Child content is ignoring fit-content width defined by parent grid-CodePudding

I have a card component that works with display: grid and I have defined 2 columns fit-content(135px) 1fr. On the first column (which should be 135px maximum) I have a component that has a child element that is not fitting into the column width and makes the column to go wider.

I've tried setting on the child node that causing the issue by placing min-width: 0 and max-width: 100% and all combinations possible. The only working solution I found is set a max-width to the child node but that would break the component styling on the app.

I'm missing something?

This is the css code I have:

.grid {
    grid-template-columns: fit-content(135px) 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "selector title"
        "selector ."
 }

 .child {
     grid-area: selector;
 }

CodePudding user response：

try this:

grid-template-columns: repeat(minmax(135px,1fr) 1fr);

CodePudding user response：

I have tried to make Grid Column width fit-content row-wise. But It is not possible. The Column width is possibly to be min-content or max-content for using the large text or small to be a minimum width.

.wrapper {
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: auto;
  grid-template-areas:
    "a"
    "b";
}

.item1 {
  grid-area: a;
  grid-column: 10px;
  border: 1px solid;
}
.item2 {
  grid-area: b;
  
  border: 1px solid;
}

<div >
  <div >Item1-----------</div>
  <div >Item2</div>
</div>