Columns

Columns

Columns are the foundation of any grid. grid-template-columns defines how many columns to create and how wide each one should be.

Fixed-Width Columns

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

This creates three columns: 200px, 300px, and 200px wide. Items flow into these columns automatically.

The fr Unit

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

The fr (fraction) unit divides available space proportionally. 1fr 2fr 1fr means the middle column gets twice the space of the side columns. This is responsive by default.

Mixing Units

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

The first column is fixed at 250px. The remaining space is split equally between the two 1fr columns. This is a common sidebar + content layout.

repeat()

/* Instead of: 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(4, 1fr);

/* Mixed pattern */
grid-template-columns: repeat(3, 1fr 2fr);
/* Creates: 1fr 2fr 1fr 2fr 1fr 2fr (6 columns) */

minmax()

grid-template-columns: repeat(3, minmax(200px, 1fr));

minmax(200px, 1fr) means each column is at least 200px wide but can grow to fill available space. This prevents columns from becoming too narrow on small screens.

auto-fill and auto-fit

/* Auto-fill: creates as many columns as fit */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* Auto-fit: same, but collapses empty tracks */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

auto-fill and auto-fit create responsive grids without media queries — the number of columns adjusts automatically based on container width.

Gap Between Columns

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;   /* Gap between columns only */
    gap: 20px;          /* Gap between both rows and columns */
}

Key Takeaways

• grid-template-columns defines the number and size of columns
• The fr unit distributes free space proportionally — great for responsive layouts
• repeat() avoids repetition; minmax() sets size boundaries
• auto-fill/auto-fit + minmax() creates fully responsive grids without media queries