I’m brand new to using CSS grid. I’m trying to create an ordered list where each of the lis is a nested grid within the overall grid I’m using for the whole page so I can position elements (two icons followed by some text) within each numbered li. I thought if I gave the ol a display:grid, that all of the lis would be considered elements of the ol, so that I’d be able to write grid properties within the li. However, when I try that, it tells me that the li would have to be a grid for me to use grid properties.
That sounds fine - except that when I give the lis a display:grid (or display:inline-grid), the numbers that the ordered list was providing disappear. I’m using this on the ol:
list-style-type: decimal; (or also the shorthand “list-style:decimal inside none;”)
I tried putting the list-style-type on the li instead of the ol and the same thing happens, i.e., the numbers are there unless I add display:grid (or inline-grid) and then they disappear.
I’m thinking I’m missing something conceptually. Anyone have ideas?
What is the actual layout/look you intend for the list?
That will determine what CSS you will use to achieve the desired layout, which may, or may not be grid.
I need it to be responsive. It’s a page of forms - more than 50. Right now, my design has one form per li and the lis have a beige background. Users will be able to download either a .doc version or a .pdf version - so one icon for each. Some forms have really long names. #7 in the mockup is one example of a long name but there are some that are even longer. Obviously, if this were on mobile, we’d only get to see 1 li per screen but on a wide screen, we might get 4 columns - maybe more.
P.S. I have NOT been able to make it look like the mockup. I did that in Photoshop. But numbers 1-7 are pretty much what I’m trying to recreate. Seemed like CSS Grid was the best way to do it. But it’s as I said - if I don’t add display:grid, I can’t play with the columns and rows in each li like I need to. If I DO add display:grid, my numbers go away.
Thanks so very much, Paul. I wondered if I’d have to use counter and counter-increment but hadn’t tried it yet. I got hung up in not being able to understand why you’d need that - why just a regular ol by itsself wouldn’t work within a grid.
But yes - this works great and is exactly what I was wanting. Thanks so much for your help.
The reason is that a list element has a display of list-item and its that display value that creates the numbers, markers and bullets etc. If you set the list element to display:grid then it is no longer a list-item and behaves just like a div.
These are some of the anomalies of the display value being used for different things (or one thing only although that is changing).
Future versions of CSS may address some of these issues in the future. I see no reason why a list should not maintain its numbering system but layout like a grid or flex.
However css counters are much more flexible and controllable so maybe its just something that will stay forever
Thanks, Paul. I really appreciate the explanation and it makes sense. I kept thinking I was missing something - that if I only did this or that, it would work. Glad to know I can just use the alternative.
This really isn’t a case I’d suggest using grid for. Grid is great for making complex layout when you lack the document structure or semantics for flex, and you know the number of elements and their placement/arrangements are fixed. It’s not a great choice in situations where you might want responsive layout or wrapping of an arbitrary number of elements.
Flex is probably the better choice for something like this, particularly thanks to the flex-wrap property.
Likewise I’d use float inside the cards as nested grids can be… wonky cross-browser. Though with Chakra based Edge going away and Blink/Quantum/Webkit being the only engines that matter, that’s less and less of a worry.
To summarize the how/what/why, It’s flex with auto-wrap, using generated content with a counter as per what @PaulOB did, using less “classes for nothing” since we now have useful selectors, The 26% flex-basis is a cute trick so you don’t have to worry about the box model or margins. If they’re set to flex-grow you’ll end up with three across until the min-width kicks in to force them smaller.
In production a media query should probably be tossed on there to disable the min-width and maybe switch the floats to inline-block.
As I said in my post there are probably a hundred of other ways to do this and I used CSS grid as I assumed that was the OP was trying to learn.
Flex is great also and would probably have been my first choice also. However in this case grid actually gives a slightly better layout on the smaller screens as the flex version is basically a fixed width element (within limits) and you end up with lots of white space instead of taking up available space. That’s fine if that’s what you want and I quite like white space but its good to know the differences.
Here are screenshots of flex and grid side by side so the differences can be seen.
As I said above either method is good (and I can think of other ways to do this also) but if you want to utilise more screen space without the need for extra media queries then grid is fine.
Thanks for the additional input! My deal is that I wear a lot of hats so I rarely have time to actually learning something new. I tackled CSS grid last weekend - had a great time! But I don’t know flex - so I’ll stick with what I have. Always interested to see additional info/thoughts, though.
