CSS Grid - Columns

Hello, can someone please help me understand the below.

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 100px 200px;
}

The above code stipulates that there are two columns: width of 1st column is 100px wide and width of 2nd column is 200px wide.

My question is what happened to the remaining 200px of the grid because the total width is 500px?

I think extra space is just ignored. Whatever children you put in the grid will be distributed in those 2 columns you specified. Here’s a quick codepen example: https://codepen.io/ArtemPetrov/pen/gNRLMj

3 Likes

Thank you, I’ll definitely check out the link.

I went through the code you shared with me and I now see what was confusing me. I wasn’t aware that unoccupied extra space is ignored. I was filling up the columns with “imaginery” grid-elements.