Grids and resolution on the web. How to calculate correctly and are there any rules?

Question

Layout

Let's start with the fact that I can easily work in Photoshop, Figma, and also know how to make up a little. I understand that screen resolution is how many pixels a device can display in one inch in width and height. I know that there is such a thing as grids and that it is necessary to make it easier for layout designers. And so on. But I can't clearly understand the following things;
1. What is permission? It is responsible for the quality of the image or for its size (width, height) and how to calculate it correctly, for example, when creating a banner on a site or in web design when making a layout, how to set the correct image resolution to get what you need.
For example, my screen resolution is 1440x900px, and if I create a banner of the same resolution and upload it to the site, it will still be displayed in an enlarged or reduced size.
Or when creating a website layout. Screen resolution on iPhones from 1200px of old models and up to 2688 × 1242 on iphone xs max, but for some reason in Photoshop or Figma you need to choose a resolution of 320px. I can draw different elements and process images, but when it comes to size and resolution settings, I just take the standard values ​​\u200b\u200bwithout understanding how to calculate everything and how it will look on a particular screen

2. Grids. I've read a lot about these questions, but I just don't get it. I know what bootstrap is and that the grid structures the content and sets some kind of fixed indents. But does everything need to be leveled according to the grid and are there any rules for arranging elements

Ps may be a question and it will seem stupid to someone, but I watched a lot of video tutorials and articles, but I still didn’t understand these things. I would be very grateful if someone can explain with some simple example, or at least say what I specifically need to read to understand this.

Answer 1

1) physical resolution and resolution in the browser are not the same
here below there is info on devices https://www.mydevice.io/
find out your resolution myresolutionis.ru
2) If there is no grid in a particular block, then you will have to spend more on it time. It can be done, but "thank you" no one will say.
Video on grids https://youtu.be/3mV-Yw6cm-E
This is about layout. But grids are an important topic in the design itself, it is a system for organizing objects in space, and so on. Look for info.