CSS Grid

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;  /* 3 columns */
    grid-template-rows: auto 1fr auto;       /* 3 rows */
    gap: 16px;                                /* Row and column gap */
}

/* Result:
┌────────┬──────────────┬────────┐
│ 200px  │    1fr       │ 200px  │ ← auto row
├────────┼──────────────┼────────┤
│        │              │        │ ← 1fr row (takes remaining)
├────────┼──────────────┼────────┤
│        │              │        │ ← auto row
└────────┴──────────────┴────────┘
*/

/* Fixed + flexible mix */
.grid {
    display: grid;
    grid-template-columns: 200px 1fr 2fr;
    /* 200px fixed, then 1/3 and 2/3 of remaining space */
}

/* Repeat notation */
.grid {
    grid-template-columns: repeat(3, 1fr);           /* 3 equal columns */
    grid-template-columns: repeat(4, 150px);         /* 4 fixed columns */
    grid-template-columns: repeat(3, 1fr 2fr);       /* Repeating pattern */
}

/* Auto-fill / auto-responsive */
.grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    /* As many 250px+ columns as fit, each filling available space */
}

/* Explicit rows */
.grid {
    grid-template-rows: 80px 1fr 60px;  /* Header, content, footer */
}

/* By line numbers */
.item {
    grid-column: 1 / 3;     /* Start at line 1, end at line 3 (span 2 cols) */
    grid-row: 1 / 2;
}

/* Shorthand */
.item {
    grid-column: span 2;    /* Span 2 columns from current position */
    grid-row: span 3;       /* Span 3 rows */
}

/* Start/end (modern) */
.item {
    grid-column-start: 1;
    grid-column-end: 3;
}

/* Named areas (semantic layouts) */
.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    gap: 16px;
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

.container {
    display: grid;
    /* Align all items */
    justify-items: center;   /* Horizontal (main axis in grid) */
    align-items: center;     /* Vertical (cross axis in grid) */
    
    /* Align the grid itself within container */
    justify-content: center;
    align-content: center;
}

/* Per-item alignment */
.item {
    justify-self: end;
    align-self: start;
}

/* Responsive card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    padding: 24px;
}

/* Dashboard layout */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar main";
    min-height: 100vh;
}

/* Image gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    gap: 8px;
}

.gallery .featured {
    grid-column: span 2;
    grid-row: span 2;
}

/* Calendar grid */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}