AMP: Building Accelerated Mobile Pages

Using flex and media queries for horizontal layout

To achieve the first goal, we can apply the following properties to the list container:

.related-items {  display:flex;  flex-wrap: wrap;  list-style: none;}

This nearly gets us there. However, it's a little messy: there is no consistency in item width, and depending on the screen width, the list will end up being both horizontal and vertical (as shown in the following image), when we wanted it to be either horizontal or vertical:

Related content thumbnails with a flexible container: incorrect alignment

We can fix this with a media query. Let's say we have four items. When displayed horizontally, ...