Diamond shape layout with CSS - html

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:
Set the container to column wrap.
For flex items to know where to wrap, a height must be defined on the container.
Remove ul default padding.
Make list items consume all column space.
Center spans vertically and horizontally.
Make second and third list items consume half column space, so both fit in one column.
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...

Answer 4

another approach with flex (for info since another one is already given):
ul {
display:inline-flex;/* or flex + margin:auto for the demo*/
flex-flow:column;
flex-wrap:wrap;
height:6.25em;/* an height is required to force wraping into columns , mind basic margin, padding and lines wanted /set for li */*/
padding:0;
margin:0;
width:25em;/* whatever you want*/
background:gray;
}
li {
display:block;/* removes the bullet */
padding:0.25em;
border:solid;
width:32%;
margin:0.5em;/* whatever, just mind for ul height*/
box-sizing:border-box;/* includes padding and borders into height calculation .... */
}
li:first-of-type,li:last-of-type {
margin:2em 0;/* increase at least margin-top */
}
body {
text-align:center;/* to center inline-flex-container and li's text */
}
ul:hover {
font-size:1.25em;/* see behavior when font-size is different */
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>

Answer 5

You can just change the 2nd and 3rd <li>'s into <span>'s and wrap them in a <li>:
ul {
list-style: none;
}
li {
display: inline-block;
padding: 0;
vertical-align: middle;
}
li > span {
display: block;
}
li:not(:nth-of-type(2)),
li > span {
border: 2px solid black;
margin: 4px;
}
<ul>
<li>item 1</li>
<li>
<span>item 2</span>
<span>item 3</span>
</li>
<li>item 4</li>
</ul>
It's simple, quick, and doesn't require any sort of weird positioning.
To be fully semantically correct, you should technically use an ol, since you have an order to your items:
Usage note: The <ol> and <ul> elements both represent a list of items. They differ in that, with the <ol> element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol> element should be used, otherwise you can use <ul>.