How can we obtain a flexible grid (core RWD concept 1)?

In a fluid website layout, also referred to as a liquid layout or flexible grids, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.

The image above shows a fluid (liquid) website layout. While some designers may give set widths to certain elements in fluid layouts, such as margins, the layout in general uses percentage widths so that the view is adjusted for each user.

Source: https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

A proportionally resizing page can be achieve with CSS Grid using:

• fr
• minmax()

And in Flexbox by using:

• flex

For older browsers, we can use percentages:

• %