Search code examples
css-positioncss-grid

CSS Grid: I am trying to fix the size of the first column

I am having a hard time finding out how to fix the column size in only one column of my CSS grid.

The item inside is a 60px x 60px clickable icon and I want the description (next columns) to be 1fr.

But I want the fist column to remain 60px width.

any help would be appreciated

`

.wrapper-portfolio {
  margin-top: 5px;
  display: grid;

  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  grid-template-rows: 1fr min-content;
}

And I don't know what to search to fix individual columns`

Solution

  • Try grid-template-columns: 60px repeat(6, 1fr);

    Basically means "from left to right", it is 60px width, followed by 6 of 1fr.