Adaptive and responsive grids - how to create them?

Question

css

Hello!
Question about creating an adaptive grid. How to build such grids correctly / what breakpoints are used most often?
And how do you get the sizes in rem in the end when calculating?

Answer 1

what are the most commonly used breakpoints

320/480/600/768/1024/1200
Multiply the base size in pixels by rem.
body {fontsize: 16px;}
h1 {font-size: 1.5 rem} = 16*1.5 = 24px
As well as fixed ones, only in relative units of measurement + media

Answer 2

As a real example, you can see how the grid is made in bootstrap. In the 3rd, in the 4th. Or in other css frameworks.

Answer 3

Is that what CSS grid was made for?
Building Production-Ready CSS Grid Layouts Today
In 2017 it's time to use.

Answer 4

The answers to such a question are a wagon and a small cart. I see no point in creating such a ticket.
https://www.google.com.ua/search?q=how+to+do+ada...
In order to determine breakpoints, use the analytics of your site's mobile visits, or world statistics.
gs.statcounter.com/screen-resolution-stats