Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Grid Layout Flexible Sized Grids Repeat Tracks with auto-fill and auto-fit

Posted by Daniel Brown
Daniel Brown
16,908 Points

Would it be good practice to create a grid within a list?

Would it be good practice to create a grid within a list?

I'd like to know if it would be ok to create a grid using an unordered list rather than just your ordinary div tags.

Rather than:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

Maybe: 

<ul class="category__grid">
  <li class="category__item">Item 1</li>
  <li class="category__item">Item 2</li>
  <li class="category__item">Item 3</li>
  <li class="category__item">Item 4</li>
</ul>

Or does this just defeat the object?

Any feedback would be appreciated.

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Edited your markup a little. Be sure to check out the Markdown Cheatsheet link below the editor for more information!

3 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

The answer, as for many things, is 'it depends'. You should use a list if that is what makes sense semantically. That is, if the grid items and their content are logically grouped as a list (in your example, an unordered one).

It's a common pattern for navigation menus to use an unordered list because they are typically just a list of links.

I guess best practice is to think about all possible users, including perhaps those who interact with your website without a mouse, and perhaps without eyesight. To them, a 'grid' may be meaningless, if the content will just be read to them in the order it is in the source code.

Hope that helps.

justdave
justdave
31,518 Points
justdave
justdave
31,518 Points

Hi Daniel, I'll say first off I haven't done that video series yet, but a lot of CMS output their menus as an unordered list so there is a use case for it if you are not able to change the original markup easily. In the past some ways of styling those have been to use floats to get a horizontal menu, then more recently flex-layout makes it even easier. If you wanted to incorporate a grid there in a similar manner then go ahead!

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi Daniel,

You can do anything with code that you want. But what kind of grid are you trying to set up? A CSS grid inside a grid? Or a list that has horizontal and vertical lines that makes it look like a grid?

Cheers, Max

Daniel Brown
Daniel Brown
16,908 Points

So I'm just experimenting with the new grid-layout in both HTML and CSS.

I've completed most of the tutorials but have not actually seen this method integrated into a site yet.

In this case, I'm trying to create a grid-layout within the page but not the actual page structure itself.

Currently, I'm creating a list of items (with headlines) which I'd normally create using a unordered list with boxes.

Ie: animals, education, fitness, games and so on which would act as buttons and would display in possibly rows of 3's or 4's using a fluid and responsive theme.

So I suppose what I'm saying is this, Id like to create the same thing using the new grid-layout with a familiar naming convention but to do so I need to know if its ok to create the layout this way.

Hope that makes sense to you.

And thanks for getting back to me with your reply I really appreciate it.

Best Regards