Maybe I did the wrong thing, but I'm trying to create <ul>one filled with these elements:
<li>
<div>
<img src="img/productname.png" alt="desc" />
<h2>Product name</h2>
<p>This text is variable in lenght so the height of each list item may differ.</p>
</div>
</li>
Since the website on which this is happening has the maximum width that I need to wrap after a certain number of elements (three seems to be a sweet spot), but I am having trouble remembering how to do this.
It is also important that all images are at the top of each “line” and the next line is not broken by the previous one. If I just use float:left;in the elements of the list, and the first element in the list has a longer description than the other, then I get this element that blocks the elements in the next row to get a table like:
+-----+-----+-----+
| | 2 | 3 |
| 1 +-----+-----+
| | |
+-----+ 4 |
| |
+-----+
-, , :
+-----+-----+-----+
| | 2 | 3 |
| 1 +-----+-----+
| |
+-----+-----+
| 4 | 5 |
| +-----+
+-----+
, , , ?
(, , , , , , , , , googling , "css/html" "grid" " "