Search code examples
csscss-grid

prevent content from increasing size of CSS grid column

I currently have a grid with 2 rows and 3 columns. I want all 3 columns to be equal in size. However, there is more text content in the third column compared to the first two. This is causing the third column to expand in width. I looked over similar questions posted to Stack Overflow and tried solving this by placing setting the min-width of that grid item to 0. That did not work. How can I resolve this issue. Below I have included a screenshot of the page, which illustrates the problem. I have also copied and pasted the code from the relevant CSS file.

enter image description here

CSS file:

.App {
  text-align: center;
  box-sizing: border-box;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.criteria-grid {
  width: 100%;
  display: grid;
  grid-template-areas: 
    'header header header'
    'col1 col2 col3'
  ;
  justify-content: stretch;
  justify-items: stretch;
  min-height: 0;
  min-width: 0;
}

.criteria-header {
  grid-area: header;
}

.criteria-1 {
  list-style: none;
  padding: 10%;
  grid-area: col1;
}

.criteria-2 {
  list-style: none;
  padding: 10%;
  grid-area: col2;
}

.criteria-3 {
  list-style: none;
  padding: 10%;
  grid-area: col3;
  min-width: 0;
}
Solution

  • Shubh Sheth's answer is correct but probably another way of writing that is:

    grid-template-columns: repeat(3, 1fr);

    Comes in handy when you have numerous columns to layout.

    Having said this, your error is that you are not specifying the columns but only the areas.

     grid-template-areas: 
    'header header header'
    'col1 col2 col3'
  ;

    Grid areas are used in conjunction with grid-template-columns, not as a replacement.

    So your layout code should look something like this:

    display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: 
 'header header header'
 'col1 col2 col3';

    In this case, you could very well remove the template-areas code because you are not changing any positions.