Align list items with variable height to bottom ul - html

Question

I'd like to align a series of li items to the bottom of their parent, the ul. One of the tricky parts is: the li items require a float: left as well as the items being variable in height and width. Is there a way to achieve this without using a "hacky" method?
Here's my current code:
ul {
width: 1000px;
height: 400px;
float: left;
vertical-align: bottom; /* doesn't influence the list items because of the float: left. i thought i'd put it here anyways */
}
ul li {
float: left;
display: inline-block;
}
ul li figure {
/* determines the width & height of the list item */
margin: 0; padding: 0;
width: 150px;
height: 150px;
background: red;
}
ul li:nth-child(2n) figure {
width: 300px;
height: 300px;
}
<ul>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
</ul>
NOTE: The width of the ul's width is variable and my design requires there to be no gap between the list items. This is what I'm looking to achieve:

Answer 1

See snippet, note that the fixed width on the ul means an even distribution of the li with table-cell, so you may need to work on that in regards to the "gaps" between the li. As you didn't specify how that is supposed to look I didn't try to solve it in any specific way.
I think this is the way to go to get a bottom align.
ul {
height: 400px;
float: left;
display: table;
list-style: none;
}
ul li {
display: table-cell;
vertical-align: bottom;
margin: 0;
padding: 0;
}
ul li figure {
/* determines the width & height of the list item */
margin: 0;
padding: 0;
width: 150px;
height: 150px;
background: red;
display: inline-block;
}
ul li:nth-child(2n) figure {
width: 300px;
height: 300px;
}
<ul>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
</ul>

Answer 2

float is not compatible with vertical alignement.
inline-block & vertical-align does :
ul {
width: 1000px;
height: 400px;
float: left;
}
ul li {
/*float: left;*/
display: inline-block;
vertical-align:bottom
}
ul li figure {
/* determines the width & height of the list item */
margin: 0; padding: 0;
width: 150px;
height: 150px;
background: red;
}
ul li:nth-child(2n) figure {
width: 300px;
height: 300px;
}
<ul>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
</ul>
display:flex & align-items does :
ul {
width: 1000px;
height: 400px;
display:flex;
align-items:flex-end;
}
ul li {
display:block;
float:right;
/* whatevever float or display will be overide by flex model */
margin:1px; /* is efficent */
}
ul li figure {
/* determines the width & height of the list item */
margin: 0; padding: 0;
width: 150px;
height: 150px;
background: red;
}
ul li:nth-child(2n) figure {
width: 300px;
height: 300px;
}
<ul>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
</ul>
display:grid
* {margin:0;padding:0;}
ul {
width: 1000px;
height: 400px;
float: left;
display:grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 0));
grid-auto-flow: dense;
grid-auto-rows: minmax(150px, 300px);
grid-gap: 1px;/* whatever */
align-items: end;/* or align-self on children */
}
ul li {
display:block;
/* align-self: end; */
}
ul li:nth-child(2n) {
grid-column: span 2;}
ul li figure {
margin: 0; padding: 0;
width: 150px;
height: 150px;
background: red;
}
ul li:nth-child(2n) figure {
width: 300px;
height: 300px;
}
<ul>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
<li>
<figure>
<img />
</figure>
</li>
</ul>
display:table of course