Advanced Layout Guide

Mastering the Grid

Axiom's grid system, built on CSS Grid, offers unparalleled flexibility for creating complex and adaptive layouts. Beyond the basics, you can leverage advanced features like explicit grid definitions, named grid areas, and intricate responsive adjustments.

Explicit Grid Definitions

Define precise column and row tracks using grid-template-columns and grid-template-rows. Combine fixed, flexible (fr units), and intrinsic (min-content, max-content, auto) sizing for ultimate control.

.my-layout {
    display: grid;
    grid-template-columns: 1fr 200px auto;
    grid-template-rows: auto 1fr;
    gap: var(--a-space-m);
}

Implicit Grid & Auto-Placement

CSS Grid automatically creates implicit grid tracks when content extends beyond explicitly defined tracks. You can control this auto-placement behavior with grid-auto-rows, grid-auto-columns, and grid-auto-flow.

.auto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px; /* All implicitly created rows will be 100px tall */
    grid-auto-flow: dense; /* Fills in empty spaces */
    gap: var(--a-space-m);
}

Alignment & Justification with place-items and place-content

Control the alignment of grid items within their cells (place-items) and the grid tracks within the grid container (place-content) using powerful shorthand properties.

.aligned-grid {
    display: grid;
    grid-template-columns: repeat(2, 150px);
    grid-template-rows: repeat(2, 100px);
    place-items: center; /* Aligns items in both axes within their cells */
    place-content: center; /* Aligns the grid itself within the container */
    height: 300px; /* For place-content to be visible */
    border: 1px dashed var(--a-color-outline);
}

Named Grid Areas

Simplify complex layouts by assigning names to grid areas and placing items visually. This makes your CSS more readable and maintainable.

.page-layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    grid-template-columns: 150px 1fr 1fr;
    gap: var(--a-space-m);
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Nested Grids

Combine the power of CSS Grid by nesting grids within grid items. This allows for highly intricate and modular layouts.

.parent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--a-space-l);
}
.parent-grid-item {
    /* ... styling ... */
}
.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--a-space-s);
}

Responsive Breakpoints & Customization

Axiom provides default breakpoints, but you can easily customize them or add your own to fine-tune responsiveness. Use CSS custom properties for breakpoints to maintain consistency.

/* In your custom CSS or theme file */
:root {
    --a-breakpoint-sm: 600px;
    --a-breakpoint-md: 900px;
    --a-breakpoint-lg: 1200px;
}

/* Example usage */
.my-responsive-component {
    grid-template-columns: 1fr;

    @media (min-width: var(--a-breakpoint-md)) {
        grid-template-columns: 1fr 1fr;
    }

    @media (min-width: var(--a-breakpoint-lg)) {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

By leveraging these advanced grid features, you can create highly sophisticated and performant layouts that adapt perfectly to any device and content requirement.