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?