<\/div>\n\n\n\nGrid-template-columns are characteristic to specify the number of columns a grid is going to have. Whereas, 1fr specifies the browser to calculate the amount of space available. These things are useful when you have gaps within columns and rows.<\/p>\n\n\n\n
Position: relative is of significance here. It enables the z-index for images to function according to our requirements and specification.<\/p>\n\n\n\n
Once you have a functional grid available, you have to look at the width of the images. To add width to the images, the ideal specification is to specify the width in percentages. <\/p>\n\n\n\n
Now, you should begin with the total width of the component related to the image. The width of the image is 844 px, which means it is 100%. The width of the image on the top is 521 px. Here, we can divide 521px by 844px. Now the resultant value has to be multiplied by 100, which roughly equals 61.7%.<\/p>\n\n\n\n
If you round up 61.7% to 62%, you see that you get a value in the middle of 58% and 66%. Hence, we are going to take up 66%.<\/p>\n\n\n\n
For the image on top, we have the following code that goes into CSS:<\/strong><\/p>\n\n\n