CSS Grid Columns and Rows

Defining Columns

grid-template-columns: 
  200px 300px 150px;

grid-template-columns: 
  25% 50% 25%;

grid-template-columns: 
  1fr 2fr 1fr;

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

🔹 Fixed Size Columns

Fixed-size columns in CSS Grid use absolute units like pixels for rigid, predictable layouts. Example: grid-template-columns: 200px 200px 200px;. Ideal for dashboards or control panels requiring precise alignment. Not inherently responsive; may cause horizontal scrolling on small screens. Can be combined with overflow-x: auto or media queries. Offers maximum control where exact dimensions outweigh fluid adaptability.

/* Fixed Columns */
.fixed-grid {
    display: grid;
    grid-template-columns: 150px 200px 100px;
    gap: 15px;
    background: #f8f9fa;
    padding: 20px;
}

.item {
    background: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
}

<div class="fixed-grid">
    <div class="item">150px</div>
    <div class="item">200px</div>
    <div class="item">100px</div>
</div>

🔹 Flexible Columns with fr Units

Flexible columns use the fractional unit (fr) to distribute space proportionally in CSS Grid. Example: grid-template-columns: 1fr 2fr 1fr; gives the middle column twice the leftover space. fr units create inherently responsive layouts adapting to container width. Ideal for main content/sidebar patterns, card grids, and fluid designs. Combined with gap for consistent gutters, it’s a cornerstone of modern CSS layout.

/* Flexible Columns */
.flexible-grid {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr;
    gap: 20px;
    background: #e9ecef;
    padding: 20px;
    min-height: 120px;
}

.flex-item {
    background: #28a745;
    color: white;
    padding: 25px;
    text-align: center;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="flexible-grid">
    <div class="flex-item">1fr</div>
    <div class="flex-item">3fr (3x wider)</div>
    <div class="flex-item">2fr</div>
</div>

🔹 Repeat Function

The CSS Grid repeat() function defines multiple tracks without repetition. Syntax: repeat(count, track-size). Example: repeat(3, 1fr) creates three equal columns. Accepts auto-fit or auto-fill for responsive grids that adjust column count. Saves code, improves readability, and is essential for creating flexible, maintainable grid templates. A powerful tool for efficient layout definitions.

/* Using Repeat */
.repeat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
    background: #fff3cd;
    padding: 15px;
}

.repeat-item {
    background: #ffc107;
    color: #212529;
    padding: 15px;
    text-align: center;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

<div class="repeat-grid">
    <div class="repeat-item">1</div>
    <div class="repeat-item">2</div>
    <div class="repeat-item">3</div>
    <div class="repeat-item">4</div>
    <div class="repeat-item">5</div>
    <div class="repeat-item">6</div>
    <div class="repeat-item">7</div>
    <div class="repeat-item">8</div>
</div>

🔹 Mixed Units

Mixed units combine different unit types in CSS Grid for complex, hybrid layouts. Example: grid-template-columns: 250px 1fr auto; mixes fixed, flexible, and content-based sizing. This allows precise control over specific areas while others adapt fluidly. Useful for layouts with a fixed sidebar, flexible main content, and an auto-sized control panel. Provides the versatility needed for sophisticated, responsive designs.

/* Mixed Units */
.mixed-grid {
    display: grid;
    grid-template-columns: 200px 1fr 150px;
    grid-template-rows: 80px auto 60px;
    gap: 15px;
    background: #f1f3f4;
    padding: 20px;
    min-height: 300px;
}

.mixed-item {
    background: #6f42c1;
    color: white;
    padding: 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

<div class="mixed-grid">
    <div class="mixed-item">Fixed 200px</div>
    <div class="mixed-item">Flexible 1fr</div>
    <div class="mixed-item">Fixed 150px</div>
    <div class="mixed-item">Row 2</div>
    <div class="mixed-item">Auto Height</div>
    <div class="mixed-item">Row 2</div>
    <div class="mixed-item">Fixed 60px</div>
    <div class="mixed-item">Footer</div>
    <div class="mixed-item">Fixed 60px</div>
</div>

🔹 Common Patterns

Common CSS Grid patterns include 12-column grids, magazine layouts, and asymmetric designs. These patterns provide reliable structures for diverse content types. For example, a 12-column grid offers granular control for complex interfaces. Magazine layouts use overlapping areas for visual interest. Asymmetric designs break uniformity for artistic impact. These patterns are SEO-friendly, accessible, and enhance user engagement through thoughtful information architecture.