How to put small/thumbnail image grid (2×2, 3×2,etc) besides a text block?

[Egp]

Hi,
I have a page with several paragraphs of text:
in normal desktop screens, the text is laid out very “widely”, so I thought in putting small grids (say 2×2 or 3×2) of thumbnail-sized images (say, 160x100px) besides each paragraph of text (on either side, doesn’t matter) to serve as illustration and principally to reduce the text to a more appropriate “reading” width in larger viewports.

If possible too, the images could disappear or go ‘downward’ each paragraph when the viewport gets smaller, as in tablets/mobiles. The main idea is for the text width to remain in an appropriate “reading” size whatever the browser’s width.

I know HTML/CSS/Javascript/media queries, and am doing a website with WordPress and the Customizr theme, but my problem is that I don’t know how to characterize this sort of layout to search in their forums and in their resources/plugins. I don’t know where to start to look for it!

I thought (and tried) using the normal html/css solutions with float and table, but it’s not quite what I want: not “fluid” or responsive enough.

How this sort of “effect” is called/characterised, so I can search in WordPress themes/plugins and/or perhaps Bootstrap? (I suppose both of them have methods/resources to produce this simple arrangement already, no need to reinvent the wheel everytime, but I don’t know how to start looking for it!)

Thanks,

[shaneisme]

Why don’t you show us what you’ve tried?

You can use a CSS framework (eg. Bootstrap, Foundation) that have their own grid systems built in that are easy enough to grasp.

Many WordPress themes have ways using shortcode to set up grids and things in pages or posts.

As far as characterizing the layout – think of it this way: when something doesn’t look right at a certain viewport width, that’s when you need a breakpoint… make adjustments, rinse and repeat.

P.S. your image grid subject made me think of this: http://foundation.zurb.com/docs/components/block_grid.html

[Author]

Posts