Creating Tiles Layout

Hello everyone and thanks for the help in advance. 'm trying to create a tiling effect similar to https://donalds.house.gov/ (contact me, newsletter, etc.). My thinking was to use flexbox to get the layout started with the idea that as the screen gets smaller, the layout would stack itself into vertical layout. Where I am confused as to how to proceed is managing the width of the tiles in a manner that will keep the text readable, yet resize responsively. I’m not sure if this is using minimum widths and heights, or some other method. Any insight owuld be appreciated.

Text size will not depend on viewport size (unless you include CSS to make it change). This applies whether you use traditional CSS, CSS Flexbox or CSS Grid. A text container can resize and the text will flow into the width available, creating as many lines of text as necessary.

1 Like

Typically in a tile layout the size of the tile won’t change drastically, they just wrap to fewer columns as the screen narrows.
So you would just use a text size that fits the tile size. If there is a bit of change in tile size, text should cope, as it naturally wraps, just don’t constrain the tile height.

1 Like