1. Intro aka About

Grid, however great, still is not supported by over 10% of browser. So, lets try functional, tiles layout builded only on Flexbox. This is demonstration of basic possibilities.

• Back to...
• List of layouts
• my Github Page

2. Rules

• Tile Layout buided only on Flexbox - no Grid, Float, etc
• Standard compliant
• Minimal number of elements - only two containers here
• RWD - four layouts for different resolutions
• Mobile First - Builded from bottom to the top
• Tested on Chromium, Vivaldi (Blink), and Mozilla Firefox (Gecko)
• Firefox needs special treatment (see CSS comments, 2 additional rules).
• Here all tiles are numbered by their sequence in HTML

3. Full RWD

CSS is created from the lowest resolution, and at the beginning this is only one column of identical elements.

First breakpoint is at 768px, and it's sets some of tiles two in a row, some still only one.

Second breakpoint is at 1024, and it's changing top of a layout. Two columns at the top: left has three elements, right only one - for main, important content (like oe News). This top can be easily highlighted, because all four first elements are included in one container.

Third breakpoint adds a margin between tiles and transparent background making main element invisible.

4. Order of Elements

Not only layout is changing. With the second breakpoint the second element is move to the end of container.