Search code examples
htmlcsscss-gridsemantic-markup

css grids - do I still need to use lists?


I'm sorry, this isn't really a code issue specifically other than I'm looking for simplification.

I'm trying to migrate to using CSS grids since the concept seems great and a lot more intuitive - but before I get carried away I'm just considering one point to experiment with.

Does css grids render lists useless?

Instead of:

<ul class="floater-left">
    <li>x</li>
    <li>y</li>
    <li>z</li>
</ul>

do I now just need:

<div class="grid-type-1">  // where this type 1 has set out columns
    <p>x</p>
    <p>y</p>
    <p>z</p>
</div>

Because now I can order my "list" by dropping in some selectors, make it easier to spread the list out, justify etc.

Am I barking up the wrong tree here?


Solution

  • Short answer: You still need lists (if you need a list in your document).

    Long answer: Markup semantics trump CSS conveniences. If it makes semantic sense to present a given HTML structure using a ul, then use one. Although developers may not see the difference using a p or li, screen readers will present our possibly misguided HTML to individuals with various challenges (visual, tactile, etc.) who greatly depend on the accuracy of an HTML document.