Ive been toying with a pure-CSS way to create a table without needing to specify the number of columns. A table where, when the browser is resized the number of rows and columns adjust accordingly. This code works for the most part:
<html>
<head>
<style>
.kw1 {background-color:#F00; color:#FFF; border-radius:5px; padding:3px;}
.kw2 {background-color:#0F0; color:#000; border-radius:5px; padding:3px;}
.kw3 {background-color:#DDD; color:#000; border-radius:5px; padding:3px;}
.kw4 {background-color:#000; color:#FFF; border-radius:5px; padding:3px;}
.kw5 {background-color:#00F; color:#FFF; border-radius:5px; padding:3px;}
.out {display:inline-block; border:solid 1px #999; width:245px; height:300px; }
img {width:240px;} /* image height will vary */
font {font-size:8pt;}
</style>
</head>
<body>
<div style="border:solid 3px #000;" >
<span class="out">
<a href="some-location"><img src="some-image"></a><br/>
<font class="kw1">keyword 1</font>
<font class="kw2">keyword 2</font>
<font class="kw3">keyword 3</font>
</span>
<span class="out">
<a href="some-location"><img src="some-image"></a><br/>
<font class="kw4">keyword 4</font>
</span>
<span class="out">
<a href="some-location"><img src="some-image"></a><br/>
<font class="kw3">keyword 3</font>
</span>
<span class="out">
<a href="some-location"><img src="some-image"></a><br/>
<font class=""></font>
</span>
<span class="out">
<a href="some-location"><img src="some-image"></a><br/>
<font class="kw5">keyword 5</font>
<font class="kw3">keyword 3</font>
</span>
</div>
</body>
smaller browser window -- larger browser window
The problem is the staggered alignment of the "cells"; especially noticeable when real images with varying heights are thrown in. I thought that specifying an exact height would correct the problem, it has not.
I tried toying with display:grid but unless I specified what row and column, items would overflow.
Im open to other pure-CSS ideas, but would love to NOT have to specify columns. Future plans will be inserting new items in between existing ones, I dont want to be adjusting rows and columns all the time.
<html>
<head>
<style>
.kw1 {background-color:#F00; color:#FFF; border-radius:5px; padding:3px;}
.kw2 {background-color:#0F0; color:#000; border-radius:5px; padding:3px;}
.kw3 {background-color:#DDD; color:#000; border-radius:5px; padding:3px;}
.kw4 {background-color:#000; color:#FFF; border-radius:5px; padding:3px;}
.kw5 {background-color:#00F; color:#FFF; border-radius:5px; padding:3px;}
.out {
display:inline-block; border:solid 1px #999; width:245px;height:400px; }
img {
width:240px;
height:300px;
} /* image height will vary */
font {font-size:8pt;}
</style>
</head>
<body>
<div style="border:solid 3px #000;" >
<span class="out">
<a href="some-location"><img src="https://source.unsplash.com/WLUHO9A_xik/300x400"></a><br/>
<font class="kw1">keyword 1</font>
<font class="kw2">keyword 2</font>
<font class="kw3">keyword 3</font>
</span>
<span class="out">
<a href="some-location"><img src="https://source.unsplash.com/WLUHO9A_xik"></a><br/>
<font class="kw4">keyword 4</font>
</span>
<span class="out">
<a href="some-location"><img src="https://source.unsplash.com/WLUHO9A_xik/500x600"></a><br/>
<font class="kw3">keyword 3</font>
</span>
<span class="out">
<a href="some-location"><img src="https://source.unsplash.com/WLUHO9A_xik"></a><br/>
<font class="kw3">keyword 3</font>
</span>
<span class="out">
<a href="some-location"><img src="https://source.unsplash.com/WLUHO9A_xik"></a><br/>
<font class="kw5">keyword 5</font>
<font class="kw3">keyword 3</font>
</span>
</div>
</body>
</html>
You need to define the height of the image otherwise it will cause problems in most cases. here I have used images of different sizes but they fit in the specific width and height because we have defined it, if you don't give specific height and width then it will automatically take the width and height as per their needs and that will cause problems in alignment.