New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-grid] Ability to target items in nth-row of autofilled, implicit grid #1943

Open
rachelandrew opened this Issue Nov 6, 2017 · 10 comments

Comments

Projects
None yet
@rachelandrew
Contributor

rachelandrew commented Nov 6, 2017

I've had various people ask me the same question as raised here: rachelandrew/cssgrid-ama#115

The use case is as described in that issue. If the author creates the following grid:

nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

They then want to style items on the second (or nth) row differently to the first, they don't have a way to target it. I've mocked it up using MQs. https://codepen.io/rachelandrew/pen/yPJKeo?editors=1100

It's really a selectors issue, would the table pseudo-class selectors (https://drafts.csswg.org/selectors-4/#table-pseudos) work on grid items, or is this another instance of needing to be able to target a row or column of the grid, with the added complication of wanting to target the children of that row or column?

At the moment to do so, they need to go back to taking more control over the grid, rather than using auto-fill, so that they know where each item sits and can use nth-child on the items, or use media queries which makes for less flexible components.

@jensimmons

This comment has been minimized.

Show comment
Hide comment
@jensimmons

jensimmons Nov 6, 2017

+1 This is one of the many things I think we want in order to be able to style the Grid, or style based on a position on the Grid. nth-row would be great — or really, nth-track (row or column). Also to be able to target a specific cell. To make the one cell where the 2nd row and 3rd column intersect, for example.

I think this is related to being able to style a cell. To target the second row and give it a background color. Ir to put a border around the cell where the 2nd row and 3rd column intersect. If we can target the cell or track, we can either style it, or style the content within it.

jensimmons commented Nov 6, 2017

+1 This is one of the many things I think we want in order to be able to style the Grid, or style based on a position on the Grid. nth-row would be great — or really, nth-track (row or column). Also to be able to target a specific cell. To make the one cell where the 2nd row and 3rd column intersect, for example.

I think this is related to being able to style a cell. To target the second row and give it a background color. Ir to put a border around the cell where the 2nd row and 3rd column intersect. If we can target the cell or track, we can either style it, or style the content within it.

@wesbos

This comment has been minimized.

Show comment
Hide comment
@wesbos

wesbos Nov 6, 2017

Thanks for opening this - here are a few use cases in which I'd fine it useful:

Styling elements that spill onto the second row or column:
resize-observer-grid

Tiger Striping rows/columns

odd-even-grid

I like @jensimmons's suggestion to selecting the track as I could see the need to doing specific TRBL grid-gap on each of those.

wesbos commented Nov 6, 2017

Thanks for opening this - here are a few use cases in which I'd fine it useful:

Styling elements that spill onto the second row or column:
resize-observer-grid

Tiger Striping rows/columns

odd-even-grid

I like @jensimmons's suggestion to selecting the track as I could see the need to doing specific TRBL grid-gap on each of those.

@fantasai

This comment has been minimized.

Show comment
Hide comment
@fantasai

fantasai Nov 7, 2017

Contributor

The trouble with this is that selectors can be used to set the placement properties (grid-area), which can change which row the item is in. :) For tables we work off of the markup only: the selector works even if you style the table as a list, so we don't have this cyclic problem.

The use case makes a lot of sense, but I don't see how to make it work...

Contributor

fantasai commented Nov 7, 2017

The trouble with this is that selectors can be used to set the placement properties (grid-area), which can change which row the item is in. :) For tables we work off of the markup only: the selector works even if you style the table as a list, so we don't have this cyclic problem.

The use case makes a lot of sense, but I don't see how to make it work...

@kartikadur

This comment has been minimized.

Show comment
Hide comment
@kartikadur

kartikadur Jan 29, 2018

Adding to @fantasai's point, in @wesbos's 2nd example if there were some boxes that were n x m rather than 1 x 1 how should selecting nth-row/nth-column/nth-track affect boxes in multiple tracks? e.g. the 'facebook' element in the image below.

option 1
1

option 2
1

kartikadur commented Jan 29, 2018

Adding to @fantasai's point, in @wesbos's 2nd example if there were some boxes that were n x m rather than 1 x 1 how should selecting nth-row/nth-column/nth-track affect boxes in multiple tracks? e.g. the 'facebook' element in the image below.

option 1
1

option 2
1

@SebastianZ

This comment has been minimized.

Show comment
Hide comment
@SebastianZ

SebastianZ Apr 10, 2018

Contributor

@fantasai wrote:

The trouble with this is that selectors can be used to set the placement properties (grid-area), which can change which row the item is in. :) For tables we work off of the markup only: the selector works even if you style the table as a list, so we don't have this cyclic problem.

The cyclic problem could be solved by applying the selector to the grid tracks, not to the grid items themselves, so grid-area and Co. do not apply.
Having said that, it sounds like it might be solved by using pseudo-elements rather than pseudo-classes, similar to what's described in #499.
So, @rachelandrew's example might be achieved like this:

nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

nav::nth-row(1n+2) {
  background-color: red;
}

@kartikadur wrote:

Adding to @fantasai's point, in @wesbos's 2nd example if there were some boxes that were n x m rather than 1 x 1 how should selecting nth-row/nth-column/nth-track affect boxes in multiple tracks?

Like the :nth-col() pseudo-class described in Selectors 4, the selector also applies to items spanning over several tracks. I.e. when several selectors match the same area, the normal specificity and cascading rules apply.

Sebastian

Contributor

SebastianZ commented Apr 10, 2018

@fantasai wrote:

The trouble with this is that selectors can be used to set the placement properties (grid-area), which can change which row the item is in. :) For tables we work off of the markup only: the selector works even if you style the table as a list, so we don't have this cyclic problem.

The cyclic problem could be solved by applying the selector to the grid tracks, not to the grid items themselves, so grid-area and Co. do not apply.
Having said that, it sounds like it might be solved by using pseudo-elements rather than pseudo-classes, similar to what's described in #499.
So, @rachelandrew's example might be achieved like this:

nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

nav::nth-row(1n+2) {
  background-color: red;
}

@kartikadur wrote:

Adding to @fantasai's point, in @wesbos's 2nd example if there were some boxes that were n x m rather than 1 x 1 how should selecting nth-row/nth-column/nth-track affect boxes in multiple tracks?

Like the :nth-col() pseudo-class described in Selectors 4, the selector also applies to items spanning over several tracks. I.e. when several selectors match the same area, the normal specificity and cascading rules apply.

Sebastian

@tabatkins tabatkins added css-grid-3 and removed css-grid-2 labels Apr 30, 2018

@tobireif

This comment has been minimized.

Show comment
Hide comment
@tobireif

tobireif Jun 12, 2018

This feature would be very useful!

tobireif commented Jun 12, 2018

This feature would be very useful!

@yairEO

This comment has been minimized.

Show comment
Hide comment
@yairEO

yairEO Aug 12, 2018

@SebastianZ - The title of this issue is about nth-row and I see only nth-column in Selectors 4 draft..

yairEO commented Aug 12, 2018

@SebastianZ - The title of this issue is about nth-row and I see only nth-column in Selectors 4 draft..

@KES777

This comment has been minimized.

Show comment
Hide comment
@KES777

KES777 Sep 5, 2018

yes nth-row would be really awesome

KES777 commented Sep 5, 2018

yes nth-row would be really awesome

@SebastianZ

This comment has been minimized.

Show comment
Hide comment
@SebastianZ

SebastianZ Sep 5, 2018

Contributor

@SebastianZ - The title of this issue is about nth-row and I see only nth-column in Selectors 4 draft..

Right. That should have read nth-row. I've updated my example.

Sebastian

Contributor

SebastianZ commented Sep 5, 2018

@SebastianZ - The title of this issue is about nth-row and I see only nth-column in Selectors 4 draft..

Right. That should have read nth-row. I've updated my example.

Sebastian

@KeviinCosmos

This comment has been minimized.

Show comment
Hide comment
@KeviinCosmos

KeviinCosmos Sep 16, 2018

Would a fix for this! :D

KeviinCosmos commented Sep 16, 2018

Would a fix for this! :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment