Grid with irregular item sizes and pinned elements - html

Question

I have to make a tag cloud. It should be looking like it shown in the picture below:
The red box here is the "show more" button which should be always sticked to the top right corner. Amount of tags (the tags are blue boxes here) is unknown, so as amount of rows.
I tried to do it with grid, but it seems it's impossible to make a non-rectangular cell. I tried to make the wrapper for blue boxes by the shape attribute, but it seems it's not an option as well.

Answer 1

Don't use grid for that because you don't really want a grid. Instead try flex with row-reverse - it will work if you don't care about the order of the tags (because they will be sorted in reversed horizontal order).
ul {
list-style:none;
}
li {
display: inline-block;
padding: 3px 10px;
}
.show-more,
.tag {
flex-basis: auto;
flex-grow: 1;
margin: 0 10px 10px;
text-align: center;
}
.show-more {
background-color: tomato;
color: white;
}
.tag {
background-color: beige;
color: black;
}
.tag:nth-child(2) { width: 100px; }
.tag:nth-child(4) { width: 120px; }
.tag:nth-child(6) { width: 75px; }
.container {
max-width: 400px;
}
.tag-list {
display: flex;
flex-flow: row-reverse wrap;
justify-content: space-between;
}
<div class="container">
<ul class="tag-list">
<li class="show-more">Show more</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
</ul>
</div>