Elastic Layout
These layouts have an assigned width, which is set in ‘em’ – a unit of measure. One em is equal to the height of the font, which is equal to the width of two characters (roughly). This is because most characters are taller and not as wide.
When you set the layout width in ems, you are indicating that the design should be as wide as a specific number of text characters. Ergo, when the text becomes larger, the entire layout has to stretch and become wider so that they can remain equal to the same number of text characters which are now bigger. Similarly, when the text size is smaller, the layout contracts to match the text.
In other words, it can be said that increasing the font size in your browser will cause the blocks to appear bigger in size, and reducing the font will make the blocks appear smaller, as the elastic layout features a design that is aligned to the font size.
Advantages
- Elastic layouts don’t depend on the resolution of the display
- Everything remains proportional to the user’s configuration as layouts are aligned with font size
- It can help you with a middle path between fixed and fluid layouts
Remember, however, that this only applies to the text and not images, as they are not sized in pixels.
Cons:
- It is more difficult to design elastic layout as compared to fixed or fluid layout as resizing the layout can disturb the text format. D.g – a single line of text may get broken into two or three lines.