Arrange list items using all parent width space and multiple lines

Question

I have a <ul> inside a 600px width div (this width is variable. It is set in %.. 600 is just for example). What I'm trying to do is to put <li> items using all the 600px width keeping the space between each <li> item.

I do not intend to use javascript! Thanks for help!

Just like this:

* { margin:0; padding:0; }

#myDiv {
  width:600px;
  display:table;
  background:lime;    
}

#myDiv ul {
  list-style:none;
}

#myDiv ul li {
  display:inline-block;
  width:180px;
  background:red;   
}

<div id="myDiv">
   <ul>
       <li>content</li>
       <li>content</li>
       <li>content</li>
       <li>content</li>
       <li>content</li>
   </ul>
</div>

Note I have 5 <li> items. I would like the first item begins on left. The second one in the middle. And the third one on the right side of the parent div.

So the list puts a margin top to start the second line. And the 4th begins on the left side (just below the 1st). And the 5th just below the 2nd.

Just to illustrate. Here is a preview demo.

What I'm trying to do:

What I'm reaching now:

Answer 1

Use CSS Grids by giving display: grid to ul . Like:

#myDiv ul {
  display: grid; /* Grid */
  grid-template-columns: auto auto auto; /* Defining 3 column layout */
  justify-content: space-between; /* Spacing out the list items equally */
}

Have a look at the snippet below:

 * { margin:0; padding:0; } #myDiv { width:600px; background:lime; } #myDiv ul { list-style:none; display: grid; grid-template-columns: auto auto auto; justify-content: space-between; } #myDiv ul li { display:inline-block; width:180px; background:red; } 

 <div id="myDiv"> <ul> <li>content</li> <li>content</li> <li>content</li> <li>content</li> <li>content</li> </ul> </div> 

Hope this helps!