CSS Grid Layout Mastery

/* Simple grid - 3 equal columns */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Or shorter: */
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Fixed and flexible columns */
.layout {
    display: grid;
    grid-template-columns: 250px 1fr 200px; /* Sidebar, main, aside */
    grid-template-rows: auto 1fr auto; /* Header, content, footer */
    gap: 20px;
    min-height: 100vh;
}

/* Responsive grid with auto-fit */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    /* Items wrap automatically when space is insufficient */
}

/* minmax() for flexible constraints */
.grid {
    grid-template-columns: 
        minmax(200px, 300px)  /* Between 200px and 300px */
        minmax(0, 1fr);       /* Grows but can shrink to 0 */
}

/* auto-fill vs auto-fit */
.auto-fill {
    /* Creates empty tracks if space available */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.auto-fit {
    /* Collapses empty tracks, items grow to fill */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Complex patterns */
.complex {
    grid-template-columns: 
        200px              /* Fixed sidebar */
        repeat(3, 1fr)     /* 3 equal flexible columns */
        minmax(150px, 20%); /* Constrained column */
}

/* Grid with 3 columns, 3 rows */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
}

/* Place item from column 1 to 3 (spans 2 columns) */
.item1 {
    grid-column: 1 / 3;  /* Start at line 1, end at line 3 */
    grid-row: 1 / 2;     /* First row */
}

/* Alternative: using span */
.item2 {
    grid-column: span 2;  /* Span 2 columns from auto position */
    grid-row: 2;
}

/* Full row span */
.header {
    grid-column: 1 / -1;  /* From first to last column */
}

/* Complex placement */
.featured {
    grid-column: 2 / 4;  /* Columns 2-3 */
    grid-row: 1 / 3;     /* Rows 1-2 (spans 2 rows) */
}

/* Span multiple columns/rows */
.wide {
    grid-column: span 3;  /* Span 3 columns */
}

.tall {
    grid-row: span 2;  /* Span 2 rows */
}

/* Negative line numbers (count from end) */
.full-width {
    grid-column: 1 / -1;  /* First to last column */
}

.last-column {
    grid-column: -2 / -1;  /* Second-to-last to last */
}

/* Shorthand grid-area */
.box {
    /* row-start / col-start / row-end / col-end */
    grid-area: 1 / 2 / 3 / 4;
}

/* Self-alignment */
.centered {
    place-self: center;  /* Center in both directions */
}

/* Visual layout definition */
.page {
    display: grid;
    grid-template-columns: 200px 1fr 150px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header  header"
        "sidebar content aside"
        "footer  footer  footer";
    gap: 1rem;
    min-height: 100vh;
}

/* Assign items to areas */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* Empty cells with dot */
.layout-with-gap {
    grid-template-areas:
        "logo  nav    nav"
        "main  main   ."
        "footer footer footer";
}

/* Define named lines */
.grid {
    display: grid;
    grid-template-columns: 
        [main-start] 1fr 
        [content-start] 2fr 
        [content-end] 1fr 
        [main-end];
    grid-template-rows:
        [header-start] auto
        [header-end content-start] 1fr
        [content-end footer-start] auto
        [footer-end];
}

/* Use named lines for placement */
.header {
    grid-column: main-start / main-end;
    grid-row: header-start / header-end;
}

.main-content {
    grid-column: content-start / content-end;
    grid-row: content-start / content-end;
}

/* Multiple names for same line */
.grid-multi {
    grid-template-columns:
        [sidebar-start] 250px
        [sidebar-end main-start] 1fr
        [main-end];
}

/* Explicit grid: 3 columns, 2 rows */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 100px;
    gap: 10px;
}

/* If more than 6 items, implicit rows are created */
.grid {
    grid-auto-rows: 100px;  /* Size for auto-created rows */
}

/* Column flow instead of row */
.column-flow {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-auto-flow: column;  /* Create new columns as needed */
    grid-auto-columns: 200px; /* Size of auto columns */
}

/* Dense packing (fills gaps) */
.masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;  /* Fill gaps with later items */
    gap: 10px;
}

.item-large {
    grid-column: span 2;  /* Takes 2 columns */
}

/* Explicit: defined tracks */
.grid {
    display: grid;
    grid-template-columns: 200px 1fr 200px;  /* 3 explicit columns */
    grid-template-rows: auto 1fr;            /* 2 explicit rows */
    
    /* Implicit: auto-created when items overflow */
    grid-auto-rows: minmax(100px, auto);     /* Auto rows grow with content */
    grid-auto-columns: 200px;                /* Auto columns fixed */
}

/* Items beyond explicit grid create implicit tracks */
.item {
    grid-column: 1;   /* Uses explicit column */
}

.item-overflow {
    grid-column: 5;   /* Creates implicit columns 4 and 5 */
}

/* Auto-fit with implicit rows */
.responsive {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 200px;  /* All rows (implicit) are 200px */
}

/* Parent grid */
.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* Child item spans multiple columns and becomes subgrid */
.child-grid {
    grid-column: span 4;  /* Spans all 4 parent columns */
    
    display: grid;
    grid-template-columns: subgrid;  /* Inherits 4 columns from parent */
    gap: 0.5rem;  /* Can override gap */
}

/* Grandchildren align to parent grid */
.grandchild {
    /* Automatically placed in parent's column tracks */
}

/* Practical: Card with aligned content */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.card {
    display: grid;
    grid-template-rows: subgrid;  /* Align card sections vertically */
    grid-row: span 3;  /* Card spans 3 rows: image, title, description */
}

/* Product cards with aligned prices */
.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: auto auto auto 1fr auto;  /* image, title, desc, spacer, price */
    gap: 1rem;
}

.product-card {
    display: grid;
    grid-template-rows: subgrid;  /* Inherit parent's 5 rows */
    grid-row: span 5;  /* Span all 5 rows */
    border: 1px solid #ddd;
    padding: 1rem;
}

/* All cards' prices align horizontally */
.product-image { grid-row: 1; }
.product-title { grid-row: 2; }
.product-desc { grid-row: 3; }
.product-price { grid-row: 5; }  /* Always at same height */

/* Form with label/input alignment */
.form {
    display: grid;
    grid-template-columns: [labels] 150px [inputs] 1fr;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: subgrid;  /* Inherit label/input columns */
    grid-column: 1 / -1;  /* Span all columns */
}

/* Grid for page structure */
.page {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 250px 1fr;
}

/* Flexbox for navigation inside header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Grid for card layout */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

/* Flexbox for card content */
.card {
    display: flex;
    flex-direction: column;
}

.card-footer {
    margin-top: auto;  /* Push to bottom with flexbox */
}