🎯 CSS grid-template-columns Property

The grid-template-columns property is one of the most important features of CSS Grid Layout. It defines how many columns a grid container will have and determines the width of each column.

With this property, you can create fixed-width columns, flexible layouts, or columns that automatically adapt to their content.

No explicit columns are defined. The browser handles column creation automatically.

.container {
    grid-template-columns: none;
}
                

Column widths are automatically adjusted according to their content.

.container {
    grid-template-columns: auto auto auto;
}
                

Each column grows according to the maximum width required by its content.

.container {
    grid-template-columns: max-content max-content;
}
                

Columns shrink to the smallest possible size without overflowing the content.

.container {
    grid-template-columns: min-content min-content;
}
                

You can define columns using units such as px, %, rem, em, and fr.

.container {
    grid-template-columns: 200px 300px;
}

.container {
    grid-template-columns: 50% 50%;
}

.container {
    grid-template-columns: 1fr 2fr;
}
                

The fr unit is commonly used in CSS Grid and represents a fraction of the available space.

Resets the property to its default browser value.

.container {
    grid-template-columns: initial;
}
                

.container {
    grid-template-columns: repeat(3, 1fr);
}
                

.container {
    grid-template-columns: 200px 1fr 200px;
}
                

.container {
    grid-template-columns: auto auto;
}