Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Multiple lines with the same names? #6
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:
I then had a class that I wanted to have certain items start on either an odd or even line like so:
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:
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?
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
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?
Thank you. I understand why it is going back, but I was surprised by where it went back to. I kinda get why normal
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.
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
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.
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.
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.