CSS Grid Lines

Grid Line Basics

grid-column-start: 2;
grid-column-end: 4;

grid-template-columns: 
  [start] 1fr [middle] 1fr [end];

grid-column: 1 / 3;
grid-row: 2 / 4;

grid-column: span 2;
grid-row: span 3;

🔹 Basic Line Positioning

Position items by referencing grid line numbers, which start at 1 for both rows and columns. Use shorthand properties like grid-column and grid-row to define start and end lines. For example, grid-column: 1 / 3; places an item from column line 1 to 3. Negative numbers count from the end, e.g., -1 is the last line. This foundational method ensures precise, predictable layouts and is the backbone of advanced grid techniques like overlapping elements.

/* Grid with 3 columns creates 4 vertical lines */
.line-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    background: #f8f9fa;
    padding: 20px;
}

.line-item {
    background: #17a2b8;
    color: white;
    padding: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Position specific items */
.item-1 {
    grid-column-start: 1;
    grid-column-end: 3;  /* Spans from line 1 to line 3 */
    background: #dc3545;
}

.item-2 {
    grid-column-start: 2;
    grid-column-end: 4;  /* Spans from line 2 to line 4 */
    grid-row-start: 2;
    background: #28a745;
}

<div class="line-grid">
    <div class="line-item item-1">Spans 2 columns</div>
    <div class="line-item">Normal</div>
    <div class="line-item">Normal</div>
    <div class="line-item item-2">Spans 2 columns</div>
    <div class="line-item">Normal</div>
    <div class="line-item">Normal</div>
</div>

🔹 Shorthand Syntax

Streamline your CSS Grid code with shorthand properties for efficiency and readability. Use grid-area to define row start, column start, row end, and column end in one line: grid-area: 1 / 2 / 3 / 4;. The grid shorthand combines grid-template-rows, grid-template-columns, and grid-template-areas. For example, grid: 100px auto / 1fr 2fr;. These shorthands reduce code bulk, improve maintainability, and help prevent errors in complex layout definitions.

/* Shorthand Grid */
.shorthand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 120px);
    gap: 15px;
    background: #e9ecef;
    padding: 20px;
}

.short-item {
    background: #6610f2;
    color: white;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Using shorthand syntax */
.header {
    grid-column: 1 / 5;  /* From line 1 to line 5 (spans all 4 columns) */
    background: #fd7e14;
}

.sidebar {
    grid-column: 1 / 2;  /* Column 1 only */
    grid-row: 2 / 3;     /* Row 2 only */
    background: #20c997;
}

.main {
    grid-column: 2 / 5;  /* Columns 2-4 */
    grid-row: 2 / 3;     /* Row 2 only */
    background: #6f42c1;
}

<div class="shorthand-grid">
    <div class="short-item header">Header (spans all columns)</div>
    <div class="short-item sidebar">Sidebar</div>
    <div class="short-item main">Main Content (spans 3 columns)</div>
</div>

🔹 Using Span Keyword

The span keyword simplifies grid item sizing by specifying how many tracks to cover. Instead of calculating end lines, use span directly: grid-column: span 2; makes an item occupy two columns. It can be combined with line numbers: grid-row: 2 / span 3; starts at row 2 and spans three rows. This approach is intuitive for responsive designs, as items can dynamically span tracks based on content or viewport size, enhancing layout flexibility.

/* Span Grid */
.span-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 80px);
    gap: 12px;
    background: #fff3cd;
    padding: 18px;
}

.span-item {
    background: #856404;
    color: white;
    padding: 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Using span keyword */
.span-2 {
    grid-column: span 2;  /* Spans 2 columns from current position */
    background: #e83e8c;
}

.span-3 {
    grid-column: span 3;  /* Spans 3 columns from current position */
    background: #007bff;
}

.span-row {
    grid-row: span 2;     /* Spans 2 rows */
    background: #28a745;
}

<div class="span-grid">
    <div class="span-item span-2">Span 2 cols</div>
    <div class="span-item span-3">Span 3 cols</div>
    <div class="span-item">Normal</div>
    <div class="span-item span-row">Span 2 rows</div>
    <div class="span-item">Normal</div>
    <div class="span-item">Normal</div>
    <div class="span-item">Normal</div>
    <div class="span-item">Normal</div>
    <div class="span-item">Normal</div>
</div>

🔹 Named Grid Lines

Improve code clarity and maintainability by assigning meaningful names to grid lines. Define names in grid-template-columns or grid-template-rows using brackets: grid-template-columns: [sidebar-start] 200px [content-start] 1fr [content-end];. Then position items with these names: grid-column: sidebar-start / content-start;. Named lines make layouts self-documenting, easier to update, and reduce errors in large projects. They also improve collaboration by making the grid structure instantly understandable.

/* Named Lines Grid */
.named-grid {
    display: grid;
    grid-template-columns: 
        [sidebar-start] 200px 
        [sidebar-end main-start] 1fr 
        [main-end ads-start] 150px 
        [ads-end];
    grid-template-rows: 
        [header-start] 80px 
        [header-end content-start] 1fr 
        [content-end footer-start] 60px 
        [footer-end];
    gap: 15px;
    background: #f1f3f4;
    padding: 20px;
    min-height: 400px;
}

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

/* Using named lines */
.header-area {
    grid-column: sidebar-start / ads-end;
    grid-row: header-start / header-end;
    background: #dc3545;
}

.sidebar-area {
    grid-column: sidebar-start / sidebar-end;
    grid-row: content-start / content-end;
    background: #28a745;
}

.main-area {
    grid-column: main-start / main-end;
    grid-row: content-start / content-end;
    background: #007bff;
}

.ads-area {
    grid-column: ads-start / ads-end;
    grid-row: content-start / content-end;
    background: #ffc107;
    color: #212529;
}

.footer-area {
    grid-column: sidebar-start / ads-end;
    grid-row: footer-start / footer-end;
    background: #6c757d;
}

<div class="named-grid">
    <div class="named-item header-area">Header</div>
    <div class="named-item sidebar-area">Sidebar</div>
    <div class="named-item main-area">Main Content</div>
    <div class="named-item ads-area">Ads</div>
    <div class="named-item footer-area">Footer</div>
</div>

🔹 Line Positioning Tips

Master grid line positioning with these best practices for robust, scalable layouts. Always use negative numbers to reference lines from the end grid for responsive adjustments. Combine span with line numbers for flexible spanning. Avoid hard-coded line counts; use repeat() and auto-placement where possible. Test layouts in multiple browsers to ensure consistent line interpretation. Comment complex line logic for future maintenance. These tips ensure your grid layouts remain adaptable, performant, and cross-browser compatible.