Different column size on each row (Grid)-CodePudding

I am using CSS Grid in my layout... How do I set different column size on first row and full width on second row? Is this possible?

Thank you so much!!!

CodePudding user response：

This is not possible, the idea of css grid is to have a "grid", that is all the rows follow the same column configuration.

What you can do however is have an element span several column, and here you have several options:

This one stretches from the first column to the first from the end

div:nth-child(3) {
  grid-column: 1 / -1;
}

This one spans 2 columns from the first one:

div:nth-child(3) {
  grid-column: 1 / span 2;
}