promotion

Sunday, April 5, 2015

How to add different styles to last row of css grid layouts

Here is the simple way to add different styles for last row elements of css grid layout.
li:nth-child(Xn):nth-last-child(-n+Y) ~ li {
}
X is the no.of columns in the grid and Y is the (no.of columns+1)
For example, we have 3 column grid layout with border bottom for each grid item, and we don't want to border bottom for last row items.
li:nth-child(3n):nth-last-child(-n+4) ~ li {
    border-bottom: 0px;
}
Ex: 4 column grid layout
li:nth-child(4n):nth-last-child(-n+5) ~ li {
    border-bottom: 0px;
}
Ex: 5 column grid layout
li:nth-child(5n):nth-last-child(-n+6) ~ li {
    border-bottom: 0px;
}
Note: Above code will only work, if you have two or more than two rows.

No comments:

Post a Comment