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

Multiple lines with the same names? #6

Closed
Rothrock42 opened this Issue Nov 9, 2016 · 4 comments

Comments

Projects
None yet
2 participants
@Rothrock42

Rothrock42 commented Nov 9, 2016

Looking at this model for using repeat() https://drafts.csswg.org/css-grid/#repeat-notation which seems to indicate that you can repeat the name of a line. I was trying to do something similar like this:

.wrapper{
  grid-template-columns: repeat(10, [odd-line] 50px [even-line] 50px);
  grid-auto-rows: 50px;
  grid-auto-flow:row dense;
}

I then had a class that I wanted to have certain items start on either an odd or even line like so:

.odd{
   grid-column-start: odd-line;
}
.even{
  grid-column-start: even-line;
}

I see in this part of the spec https://drafts.csswg.org/css-grid/#common-uses-named-lines that you can use a number to tell the layout "find the nth occurrence of the named line like this:

grid-column-start: odd-line 3; /*start at the third line named odd-line*/

Auto placement seems to start at the beginning of the track and if the first instance of a named line is already occupied it jumps to the next row.

Here is a fiddle https://jsfiddle.net/Rothrock42/0tdemkyb/

In that fiddle you can see that auto placement does "go back" and checks the first name line and if it is available place content in it. (Notice that li 7 goes up to row three.)

I was hoping that the auto placement would continue in the current track and find the next odd/even line and place the item there.

Either with explicit named lines or the line numbers the ability to say "Start on the next available line that is a multiple of 3" would be great.

Do you know if there is any way to do this?

@rachelandrew

This comment has been minimized.

Show comment
Hide comment
@rachelandrew

rachelandrew Nov 17, 2016

Owner

The reason auto-placement is "going back" is because you have set it to dense packing. If you leave off the dense keyword then auto-placement will progress forward and keep the items in DOM order.

When you say grid-column-start: odd-line you are asking grid to start at the first line named odd-line, so you get the behaviour you see if you leave off the dense keyword. Grid will drop down to the next first line.

I don't think there is a way to achieve what you are after in the current spec, do you have a use case where this behaviour would be particularly important?

Owner

rachelandrew commented Nov 17, 2016

The reason auto-placement is "going back" is because you have set it to dense packing. If you leave off the dense keyword then auto-placement will progress forward and keep the items in DOM order.

When you say grid-column-start: odd-line you are asking grid to start at the first line named odd-line, so you get the behaviour you see if you leave off the dense keyword. Grid will drop down to the next first line.

I don't think there is a way to achieve what you are after in the current spec, do you have a use case where this behaviour would be particularly important?

@Rothrock42

This comment has been minimized.

Show comment
Hide comment
@Rothrock42

Rothrock42 Nov 17, 2016

Thank you. I understand why it is going back, but I was surprised by where it went back to. I kinda get why normal grid-auto-flow:row would skip to the next row and grab the first named one. I had hoped that the dense would go back to where ever it had determined was the last open place and look through all occurrences of named lines, not just the first one in the row. Obviously that didn't work...so here is a more explanation of what I'm trying to do.

My use case is in the arena of responsive design. For example, I have a design where there is something different between the odd and even columns. Maybe something like this where I have a repeating grid of wide and narrow columns.

grid-template-columns: repeat(auto-fill, [wide-col-start] minmax(200px,2fr) [narrow-col-start] minmax(100px,1fr));

So there could be two columns on a narrow grid and four or six, etc. on a wider space. I might want to start a wide item at 1 or 3 or 5 (if they exist) or wide-col-start 1 or 'wide-col-start 2`. But since the pattern is autofilled I don't know how many columns there are and therefore how many lines there are.

I'm looking for a way to say, "This grid item should always start in the next available wide column." Something like one of the following, although I'm pretty sure that isn't part of the spec.

.wide-item{
  grid-column-start: 2n-1;  /*only start on an odd number line*/
  grid-column-start: wide-col-start *; /*look through all lines with this name and find the first open one*/
}

This all came about because I've been trying to solve Jen Simmons challenge to create a responsive hexagon grid. Odd and even numbered grid items need to be placed in different locations, but on a responsive grid they can't have a specific line number as in her example. But I think this will have applications beyond just odd/even within the responsive auto-filled grid space.

The way of specifying line numbers and named lines works great if you know how many lines there are, but it feels lacking if you have a variable/responsive number of them. Maybe I'm just too new to this and there are ways to deal with it beyond what I'm seeing. Or perhaps the answer I'm looking for isn't part of the problem set grid is designed to address.

Thanks for any thoughts or suggestions you have.

Rothrock42 commented Nov 17, 2016

Thank you. I understand why it is going back, but I was surprised by where it went back to. I kinda get why normal grid-auto-flow:row would skip to the next row and grab the first named one. I had hoped that the dense would go back to where ever it had determined was the last open place and look through all occurrences of named lines, not just the first one in the row. Obviously that didn't work...so here is a more explanation of what I'm trying to do.

My use case is in the arena of responsive design. For example, I have a design where there is something different between the odd and even columns. Maybe something like this where I have a repeating grid of wide and narrow columns.

grid-template-columns: repeat(auto-fill, [wide-col-start] minmax(200px,2fr) [narrow-col-start] minmax(100px,1fr));

So there could be two columns on a narrow grid and four or six, etc. on a wider space. I might want to start a wide item at 1 or 3 or 5 (if they exist) or wide-col-start 1 or 'wide-col-start 2`. But since the pattern is autofilled I don't know how many columns there are and therefore how many lines there are.

I'm looking for a way to say, "This grid item should always start in the next available wide column." Something like one of the following, although I'm pretty sure that isn't part of the spec.

.wide-item{
  grid-column-start: 2n-1;  /*only start on an odd number line*/
  grid-column-start: wide-col-start *; /*look through all lines with this name and find the first open one*/
}

This all came about because I've been trying to solve Jen Simmons challenge to create a responsive hexagon grid. Odd and even numbered grid items need to be placed in different locations, but on a responsive grid they can't have a specific line number as in her example. But I think this will have applications beyond just odd/even within the responsive auto-filled grid space.

The way of specifying line numbers and named lines works great if you know how many lines there are, but it feels lacking if you have a variable/responsive number of them. Maybe I'm just too new to this and there are ways to deal with it beyond what I'm seeing. Or perhaps the answer I'm looking for isn't part of the problem set grid is designed to address.

Thanks for any thoughts or suggestions you have.

@rachelandrew

This comment has been minimized.

Show comment
Hide comment
@rachelandrew

rachelandrew Nov 17, 2016

Owner

There is an excellent post explaining in detail how auto-placement works here https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/

I don't think there is currently a way to do what you are asking for, beyond placing things more explicitly on the grid and then using media queries. It's certainly a valid use case though.

Owner

rachelandrew commented Nov 17, 2016

There is an excellent post explaining in detail how auto-placement works here https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/

I don't think there is currently a way to do what you are asking for, beyond placing things more explicitly on the grid and then using media queries. It's certainly a valid use case though.

@Rothrock42

This comment has been minimized.

Show comment
Hide comment
@Rothrock42

Rothrock42 Nov 17, 2016

Thanks for the link. Glad that it doesn't seem like a completely off the wall idea. In that post It was the placement if item i7 in the figure Grid item placement algorithm: Step 3 (dense) that gave me hope.

Guess I'll have to figure out a different way to do it!

Rothrock42 commented Nov 17, 2016

Thanks for the link. Glad that it doesn't seem like a completely off the wall idea. In that post It was the placement if item i7 in the figure Grid item placement algorithm: Step 3 (dense) that gave me hope.

Guess I'll have to figure out a different way to do it!

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