CSS grid is very useful in designing webpages, as it limits your use of floats and positioning. However, CSS grid is not a replacement for flex box, due to the fact that css grid is used for 2 dimensional layouts while flex box is used for one dimensional layouts. The picture below gives a great visual on the physical difference in the properties of Flexbox VS CSS grid.
Since CSS grid works on 2 dimensional layouts, it doesn't completely erase the use of flexbox. While using one dimensional layouts, one should definitely consider using flexbox because it is simply easier in my opinion. However, this is completely up to the developer themselves and it is their preference (only for one dimensional layouts).
The grid value of the display property defines a CSS grid; determines types of boxes generated.
In order to define rows/columns you need to use
grid-template-columns. Changing the fractions of the page that you want your pictures to be helps develop a more progressional look for your webpage;
1 fr 1 fr 1 fr 1 fr is what was used for our webpage because we had 3 pictures in the column and needed them to be equally sized across the page.
The gap property is used in order to determine how much space to leave between each picture after they are arranged in either rows or columns. You can change the amount of pixels depending on how big or small that you want the gap to be, we chose 25 pixels which generates the following:
As you may see in the image above, the 25 px gap is adequate for separating the images in the columns. If more separation was needed, 50 px would have been a better option.
CSS grid is very useful when designing your website. Now that you have gone over the important functions of CSS Grid, it's now your turn to create a website!
(More pictures which included in the website which use css grid, but wasn't able to fit into the snippet)