CSS Grid Layout

Introduction to CSS Grid

CSS Grid is a two-dimensional layout system that allows you to create complex layouts with rows and columns. It's perfect for creating sophisticated page layouts.

Grid Container Properties

Creating a Grid Container

.container {
    display: grid;
    /* or */
    display: inline-grid;
}

Defining Grid Tracks

/* Fixed sizes */
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px;

/* Flexible sizes */
grid-template-columns: 1fr 2fr 1fr; /* Fractional units */
grid-template-columns: repeat(3, 1fr); /* Repeat function */

/* Mixed sizes */
grid-template-columns: 200px 1fr 100px;

/* Auto-sizing */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Grid Gap

gap: 20px;              /* Same gap for rows and columns */
gap: 20px 30px;         /* Row gap, column gap */
row-gap: 20px;
column-gap: 30px;

Grid Areas

grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";

Grid Item Properties

Grid Line Positioning

grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;

/* Shorthand */
grid-column: 1 / 3;     /* Start / End */
grid-row: 1 / 2;

/* Span syntax */
grid-column: span 2;    /* Span 2 columns */
grid-row: span 3;       /* Span 3 rows */

Grid Area

grid-area: header;      /* Named area */
grid-area: 1 / 1 / 2 / 4; /* row-start / col-start / row-end / col-end */

Grid Alignment

Container Alignment

/* Align grid within container */
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;

/* Align items within grid cells */
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;

Item Alignment

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;

Responsive Grid Patterns

Auto-Fit Grid

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

Holy Grail Layout

.holy-grail {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 200px 1fr 200px;
    min-height: 100vh;
}

Complete Grid Example

<style>
.page-grid {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main sidebar"
        "footer footer footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 200px 1fr 250px;
    min-height: 100vh;
    gap: 1rem;
    padding: 1rem;
}

.header {
    grid-area: header;
    background-color: #007bff;
    color: white;
    padding: 1rem;
    border-radius: 8px;
}

.nav {
    grid-area: nav;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
}

.main {
    grid-area: main;
    background-color: white;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.sidebar {
    grid-area: sidebar;
    background-color: #e9ecef;
    padding: 1rem;
    border-radius: 8px;
}

.footer {
    grid-area: footer;
    background-color: #6c757d;
    color: white;
    padding: 1rem;
    text-align: center;
    border-radius: 8px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.card {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.featured-card {
    grid-column: span 2;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-grid {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
    }
    
    .featured-card {
        grid-column: span 1;
    }
}
</style>

<div class="page-grid">
    <header class="header">
        <h1>CSS Grid Layout</h1>
    </header>
    
    <nav class="nav">
        <h3>Navigation</h3>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    
    <main class="main">
        <h2>Main Content</h2>
        <p>This is the main content area using CSS Grid layout.</p>
        
        <div class="card-grid">
            <div class="card">
                <h3>Card 1</h3>
                <p>Regular card</p>
            </div>
            <div class="card featured-card">
                <h3>Featured Card</h3>
                <p>This card spans 2 columns</p>
            </div>
            <div class="card">
                <h3>Card 3</h3>
                <p>Regular card</p>
            </div>
            <div class="card">
                <h3>Card 4</h3>
                <p>Regular card</p>
            </div>
        </div>
    </main>
    
    <aside class="sidebar">
        <h3>Sidebar</h3>
        <p>Additional information and links.</p>
    </aside>
    
    <footer class="footer">
        <p>© 2024 CSS Grid Example</p>
    </footer>
</div>