Diamond shape layout with CSS

Question

I am attempting to layout an unordered list in a diamond form.

I cannot figure out how to do this without adding hacky <div>'s all over the place.

I'd rather keep it semantically a clean ul.

Code example (I can add id's, that is no problem.)

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

I want it to look like this:

Perhaps something like this can be achieved with display: flex? Perhaps display: table-cell? I have tried everything so far, I cannot figure it out.

Answer 1

The layout can be achieved with flexbox all the way through:

ul {
  display: flex;
  flex-direction: column;                 /* 1 */
  flex-wrap: wrap;                        /* 1 */
  height: 200px;                          /* 2 */
  list-style: none;
  padding: 0;                             /* 3 */
}

li {
  flex: 0 0 100%;                         /* 4 */
  display: flex;                      
  justify-content: center;                /* 5 */
  align-items: center;                    /* 5 */
  background-color: lightyellow;
}

li:not(:first-child):not(:last-child) {   /* 6 */
  flex-basis: 50%;
}

span {
  height: 50px;
  width: 100px;
  background-color: lightgreen;
  border: 1px solid black;
  display: flex;                         /* 7 */
  justify-content: center;               /* 7 */
  align-items: center;                   /* 7 */
}
* { box-sizing: border-box; }
/* grid lines
ul {  border: 1px dashed black; }
li {  border: 1px solid red;  }
*/

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
  <li><span>item 4</span></li>
</ul>

jsFiddle

Notes:

1. Set the container to column wrap.
2. For flex items to know where to wrap, a height must be defined on the container.
3. Remove ul default padding.
4. Make list items consume all column space.
5. Center spans vertically and horizontally.
6. Make second and third list items consume half column space, so both fit in one column.
7. Center text vertically and horizontally.

Answer 2

I'm interested in seeing if anyone comes up with something a little more clever. Here's the simplest route that came to mind - just using absolute positioning.

ul {
  list-style: none;
  padding: 0;
  position: relative;
  width: 200px;
  height: 80px;
}

li {
  border: 2px solid #000;
  font-size: 18px;
  padding: 4px;
  position: absolute;
}

li:nth-child(1) { top: 50%;  left: 0;   transform: translateY(-50%); }
li:nth-child(2) { top: 0;    left: 50%; transform: translateX(-50%); }
li:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }
li:nth-child(4) { top: 50%;  right: 0;  transform: translateY(-50%); }

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

Answer 3

	    ul li{
           position:absolute;
        }
        #item1{
    	    margin-left:10%;
        }
        #item2{
    	    margin-top:5%;
        }
        #item3{
    	    margin-top:5%;
            margin-left:20%;
        }
        #item4{
    	    margin-top:10%;
            margin-left:10%;
        }

    <ul >
        <li id=item1>item 1</li>
        <li id=item2>item 2</li>
        <li id=item3>item 3</li>
        <li id=item4>item 4</li>
    </ul>

here is my version ... just made it work ... you can find a better way or make it better...