CSS Grid Fundamentals (`grid-template-columns`, `fr` Units)

CSS Grid is a 2-dimensional layout system for organizing content simultaneously into rows and columns.

display: grid: Activates grid layout context.

grid-template-columns: Defines columns.

fr (Fractional Unit): Represents a fraction of the available free space.

⊞Code Example

.card-grid {

display: grid;

grid-template-columns: 1fr 1fr 1fr; /* 3 Equal Columns */

gap: 20px;

}