CSS Basics

Colors & BG

Box Model

Text Styles

CSS Layout

CSS Effects

Advanced

CSS Grid Columns

❮ Previous Next ❯

CSS Grid Template Columns

The grid-template-columns property in CSS defines the number and the size of columns in a grid layout.

It allows you to set both fixed and flexible column sizes, making grid-based designs highly adaptable to various layouts and responsive needs.

Syntax and Property Values

Syntax:

.grid-container {
    grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;
}

Here is a breakdown of the property values for grid-template-columns:

Property Value Description
none (Default) No explicit columns are defined unless explicitly required by the grid items.
auto Columns are sized automatically based on their content and available container space.
min-content Columns are sized according to the smallest piece of content within them (e.g., the longest single word).
max-content Columns are sized according to the largest content within them (the text will not wrap).
length Specifies a fixed column size using standard CSS units like pixels (px), em units (em), or percentages (%).
initial Resets the property to its default value.
inherit Inherits the property value from its parent element.

CSS grid-template-columns Examples

Let's explore how mixing different values impacts the sizing of columns in a CSS Grid.

Example 1: Using Auto and Fixed-Width Columns

This example demonstrates how to create a grid layout with four columns. The first two columns are sized automatically based on their content (auto), the third column is strictly fixed at 200px, and the fourth column is fixed at 150px.

Auto and Fixed Columns Example:

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-template-columns Property</title>
    <style>
        .grid-container {
            background-color: navy;
            padding: 20px;
            display: grid;
            /* 4 Columns: Auto, Auto, Fixed 200px, Fixed 150px */
            grid-template-columns: auto auto 200px 150px;
            gap: 10px;
        }
        .grid-item {
            background-color: lightblue;
            color: navy;
            border: 2px solid white;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding: 15px;
        }
    </style>
</head>
<body>
    <h3>Auto | Auto | 200px | 150px</h3>
    <div class="grid-container">
        <div class="grid-item">A</div>
        <div class="grid-item">B</div>
        <div class="grid-item">C (200px)</div>
        <div class="grid-item">D (150px)</div>
        <!-- Row 2 -->
        <div class="grid-item">E</div>
        <div class="grid-item">F</div>
        <div class="grid-item">G</div>
        <div class="grid-item">H</div>
    </div>
</body>
</html>

Example 2: Using min-content, max-content, and Fixed-Width

This layout utilizes more advanced content-aware sizing values:

Content-Aware Sizing Example:

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-template-columns Property</title>
    <style>
        .grid-container {
            background-color: navy;
            padding: 20px;
            display: grid;
            /* Mix of content-aware and fixed sizes */
            grid-template-columns: min-content max-content 250px min-content;
            gap: 10px;
        }
        .grid-item {
            background-color: lightblue;
            color: navy;
            border: 2px solid white;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>Min-Content | Max-Content | 250px | Min-Content</h3>
    <div class="grid-container">
        <div class="grid-item">I am tightly wrapped</div>
        <div class="grid-item">I will never wrap!</div>
        <div class="grid-item">Fixed Width (250px)</div>
        <div class="grid-item">Short</div>
        <!-- Row 2 -->
        <div class="grid-item">E</div>
        <div class="grid-item">F</div>
        <div class="grid-item">G</div>
        <div class="grid-item">H</div>
    </div>
</body>
</html>

Using the repeat() Function

If you want to create multiple columns of the exact same size without writing the value repeatedly, you can use the CSS repeat() function.

Instead of writing this:

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

You can write this:

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

Supported Browsers

The grid-template-columns property is widely supported across all modern browsers:

Note: Ensure your browser is updated to the latest version for the best compatibility with advanced CSS Grid features. Older browsers, particularly Internet Explorer, may only have partial or legacy support for CSS Grid.

Exercise

?

Which value sizes a grid column to be exactly wide enough to fit its largest piece of content without breaking text into a new line?

❮ Previous Next ❯