Component's layout
Content driven
On the left side you can see content driven responsive behavior (recommended by fluid grid).
Card responds to space provided by its parent
This kind of behavior enables card to go from vertical to horizontal and back, based on its container size.
In the end, card layout can use optimal layout for given space, not based on window width.
Bootstrap like
On the right side you can see responsive behavior typical for bootstrap like grids.
Card itself has almost no responsive behavior. Only the master grid in which the cards are placed deals with the responsiveness
Small card has vertical layout, as container grows, it turns to horizontal layout. Once more cards fit in, two horizontal cards line up in a row and so on.
Layout
Layout can be done with fraction units. In following example there are .f-col-10 (keeps minimal width of 10 * minColWidth) and .f-col-5 (minimal width of 5 * minColWidth). Then .f-grid-14-collapse is used on Grid to avoid empty space, when cells are breaking into two rows.
For complex web page layouts it is reccomended to define your own grid with named areas and media querries.
Fluid grid focuses on content driven grids rather than page grids (too much code would be needed/generated by Fluid grid, to fulfill advanced page layout. Probably just very few of them would really be used.. ANd we don't want dead code, right?)
Tiles
Random tiles
If you either don't mind empty cells or you even prefer them, just add random cell sizes and let it go.
Tuned patterns
After some time you start finding cell patterns which looks random a bit, but as the container resizes, no empty cells appear in between.
In order make your life easie in finding those patterns, there is f-grid-dense, which allows elements to fill empty cell even if they are out of order.
Hints for seamless patterns:
- Use cell sizes with many divisors (2,4,6,..). Prime numbers are on the other hand quite hard to fit in.
- Dont use many cells with different sizes
- Use more small cells at the end (f-grid-dense will bring them from end and use them for filling gaps)
- Use repetitive sequences, where in one sequence, 1) next cell is always smaller then one before and 2) cell before in sequence can be exactly filled with cells following it in sequence. See example below.