How can I create this tiled page layout? - html

Question

I've found HTML/CSS combinations that do one or multiple of these things but none that do all of them together. Basically I want:
a tile-style menu with six tiles
each tile to be a fixed height and width (maybe 10em - square)
wrapped text without creating a bigger tile (line-height has this problem)
background colour for the tiles but whitespace (margins) to the right and below
all text centred vertically and horizontally
wrapped tiles for smaller displays
Basically I'm looking for something like the collapse by rows option here but with centred text (and WordPress doesn't seem to recognise the #breakpoint rule, so it doesn't work for me). I've tried various methods with display:table/table-cell, display:inline-block, position:absolute/relative and different element types (div, a, p, tables...) but can't get anything to fulfil all the criteria listed above. Anyone got a solution (ideally with just standard HTML and CSS to make it easy to implement in WordPress)?
Below are examples of one of the methods I've tried. Example one shows how I'd like it to look (with a nicer colour scheme and proper link styling), except with smaller tiles and wrapped text. Example two has wrapped text, but because of using line-height the tiles with wrapped text double in height.
.big a {
display:inline-block; width:15em; line-height:15em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}
.small a {
display:inline-block; width:10em; line-height:10em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}
<p><strong>Example one</strong></p>
<div class="big"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>
<p><strong>Example two</strong></p>
<div class="small"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>

Answer 1

How about something like this... using display:flex and align-items: center;
NB: may not be compatible with some older web browsers.
.small{
display:flex;
flex-wrap:wrap;
}
.small a {
display:flex; align-items: center; height:10em; width:10em; text-align:center; background-color:#FFC107; margin-bottom:10px; margin-right:10px; padding:30px; box-sizing:border-box;
}
<p><strong>Example two</strong></p>
<div class="small">
<a><strong>Language change</strong></a>
<a><strong>Language diversity</strong></a>
<a><strong>Language and the media</strong></a>
<a><strong>Language and gender</strong></a>
<a><strong>Child language acquisition</strong></a>
<a><strong>Discoures and attitudes</strong></a>
</div>

Answer 2

a tile-style menu with six tiles
I would suggest a <div> with six display:inline-block <div> children.
each tile to be a fixed height and width (maybe 10em - square)
So of course we give your <div> children width:10em; height:10em;
wrapped text without creating a bigger tile (line-height has this
problem)
First we give each <div> child an overflow:hidden; so even if the content is larger than the tile, it will be cut. Then, since we know that the child is 10em high, if you can fix the number of lines of the text, you can define line-height as, say, 2em or even 20% which will be 20% of 10em.
background colour for the tiles
That's easy-peasy: background-color:#00FF00;
but whitespace (margins) to the right and below all text centred
I suggest you use border instead: border-width:0px 0px 0.5em 0.5em;. If you do it well, nobody will be able to tell it's border and not margin.
vertically and horizontally wrapped tiles for smaller displays
Inline block will do this for you. Since each <div> child is 10em wide, you can give the container <div> max-width:30em and it will shrink on small screens making the inline-block children skip to the next line.
Hope this gives you some useful ideas at least.