a - Introduction CSS Grid is a powerful layout system introduced in CSS3 It provides a flexible way to create complex responsive designs by defining rows and columns. It's a two-dimensional layout model display: grid; → Enable the element to be a grid container grid-template-columns: 100px 200px 100px; → Creates three columns with specific size for each one Adding more children inside the parent with display: grid... it will follow the rules from the grid-template-columns grid-gap → Set gap between rows and columns
b - grid-template-columns, grid-template-rows properties grid-template-columns → defines the number and size of columns within a grid container. grid-template-rows → defines the number and size of rows within a grid container. Both accept the same values values → length values(px etc), percentage and fraction(fr) fr → stands for "Fraction of Available Space" The total available space is divided equally among all fractional units grid-template-columns: 1fr 2fr 3fr; → the first column will take up one third of the available width, the second column will take up two thirds, and the third column will take up all remaining space.
c - value keywords for grid-template-columns and grid-template-rows
The values can also be keywords: max-content → should take up the maximum possible amount of space, min-content → should take up the minimum possible amount of space. minmax(min, max) → specifies the minimum and maximum possible dimensions for grid items. auto → represents the range between the minimum and maximum grid-template-columns: minmax(100px, 200px) auto; the first column will have a minimum width of 100px and a maximum width of 200px. The second column will occupy any remaining available space within the grid repeat → creates columns and rows by repeating a pattern repeat(3, 100px); → creates a grid with three columns, each being exactly 100px wide