DEV Community

ze he
ze he

Posted on • Originally published at aiforeverthing.com

CSS Grid Complete Guide — grid-template, auto-fill, minmax, and Responsive Layouts - DevKits

#cssgridtutorial #gridtemplatecolumns #autofillautofit #minmaxcss

Introduction 

            CSS Grid is the most powerful layout system ever added to CSS. Unlike Flexbox (which is one-dimensional), Grid lets you control both rows and columns simultaneously. The result: complex magazine-style layouts, responsive card grids, and full-page application shells — all without a single media query in many cases. Browser support is now 97%+ worldwide, so there is no excuse not to use it.

            ## The Basics — Defining a Grid

            Any element becomes a grid container with `display: grid`. All direct children become grid items automatically.
Enter fullscreen mode Exit fullscreen mode 
`.container {
    display: grid;

    /* Define 3 equal columns */
    grid-template-columns: 1fr 1fr 1fr;

    /* Or use repeat() shorthand */
    grid-template-columns: repeat(3, 1fr);

    /* Define row heights */
    grid-template-rows: auto 200px auto;

    /* Gap between cells */
    gap: 1rem;                /* row-gap + column-gap */
    row-gap: 1rem;
    column-gap: 2rem;
}
`
Enter fullscreen mode Exit fullscreen mode 
            The `fr` unit is the key innovation: it distributes the **remaining space** after fixed/auto sizes are calculated. `1fr 2fr` means the second column gets twice as much space as the first.

            ## grid-template — The Shorthand
Enter fullscreen mode Exit fullscreen mode 
`/* Rows / Columns */
.grid {
    grid-template: 100px auto 100px / 200px 1fr;
    /*             rows           /  columns   */
}

/* Using named areas */
.layout {
    grid-template:
        "header header header" 80px
        "sidebar main   aside" 1fr
        "footer  footer footer" 60px
        / 200px  1fr    200px;
}
`
Enter fullscreen mode Exit fullscreen mode 
            ## Named Grid Areas — The Most Readable Pattern
Enter fullscreen mode Exit fullscreen mode 
`.layout {
    display: grid;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr 60px;
    min-height: 100vh;
    gap: 1rem;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
`
Enter fullscreen mode Exit fullscreen mode 
`<div class="layout">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
    <footer class="footer">Footer</footer>
</div>
`
Enter fullscreen mode Exit fullscreen mode 
            ## auto-fill vs auto-fit — The Essential Difference

            Both `auto-fill` and `auto-fit` create as many columns as will fit. The difference is subtle but important for responsive layouts:
Enter fullscreen mode Exit fullscreen mode 
`/* auto-fill: creates empty columns to fill the row */
.grid-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

/* auto-fit: collapses empty columns, items stretch to fill */
.grid-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
`
Enter fullscreen mode Exit fullscreen mode 
            Practical rule: use `auto-fill` when you want consistent column widths at any count; use `auto-fit` when you want items to stretch and fill the full row.

            ## minmax() — The Responsive Superpower

            `minmax(min, max)` sets the minimum and maximum size for a track. Combined with `auto-fill`, it creates fully responsive grids without media queries:
Enter fullscreen mode Exit fullscreen mode 
`/* Responsive card grid — no media queries needed */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
/* Result:
   - 4 columns on wide screens
   - 3 columns on medium screens
   - 2 columns on tablets
   - 1 column on mobile
   All automatic, zero @media */
`
Enter fullscreen mode Exit fullscreen mode 
`/* Common minmax patterns */

/* Never less than 200px, can grow to fill */
grid-template-columns: repeat(3, minmax(200px, 1fr));

/* Auto rows: at least 100px, grows with content */
grid-auto-rows: minmax(100px, auto);

/* Fluid typography-aware columns */
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
`
Enter fullscreen mode Exit fullscreen mode 
            ## Placing Items Explicitly
Enter fullscreen mode Exit fullscreen mode 
`/* Place by line numbers (1-indexed) */
.item {
    grid-column: 1 / 3;    /* start at line 1, end at line 3 */
    grid-row: 2 / 4;
}

/* Using span */
.item {
    grid-column: span 2;   /* span 2 columns from auto position */
    grid-row: 1 / span 3;  /* start at line 1, span 3 rows */
}

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

/* Named lines */
.container {
    grid-template-columns: [start] 1fr [center] 1fr [end];
}
.item {
    grid-column: start / center;
}
`
Enter fullscreen mode Exit fullscreen mode 
            ## Alignment in Grid
Enter fullscreen mode Exit fullscreen mode 
`.container {
    /* Align all items within their cells */
    justify-items: center;   /* horizontal: start | end | center | stretch */
    align-items: center;     /* vertical:   start | end | center | stretch */
    place-items: center;     /* shorthand: align-items / justify-items */

    /* Align the grid tracks within the container */
    justify-content: space-between;  /* if grid narrower than container */
    align-content: start;
    place-content: center;
}

/* Override for individual items */
.item {
    justify-self: end;
    align-self: start;
    place-self: center end;
}
`
Enter fullscreen mode Exit fullscreen mode 
            ## Real-World Patterns

            ### Masonry-like Layout with auto-rows
Enter fullscreen mode Exit fullscreen mode 
`.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 10px;  /* small unit for fine control */
    gap: 10px;
}

/* Each item needs inline style: grid-row-end: span N */
/* Calculate N = ceil(itemHeight / rowHeight) */
`
Enter fullscreen mode Exit fullscreen mode 
            ### Holy Grail Layout
Enter fullscreen mode Exit fullscreen mode 
`.holy-grail {
    display: grid;
    grid-template:
        "header" auto
        "nav main aside" 1fr
        "footer" auto
        / 200px 1fr 200px;
    min-height: 100dvh;
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }
`
Enter fullscreen mode Exit fullscreen mode 
            ### Responsive without Media Queries
Enter fullscreen mode Exit fullscreen mode 
`/* Stack on mobile, side-by-side on desktop */
.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 2rem;
}

/* Feature grid: 1-3 columns based on space */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1.5rem;
}
`
Enter fullscreen mode Exit fullscreen mode 
            ## Subgrid — Next-Level Alignment

            Subgrid (now in all major browsers) lets nested elements align to the parent grid:
Enter fullscreen mode Exit fullscreen mode 
`.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.child {
    grid-column: span 3;
    display: grid;
    grid-template-columns: subgrid; /* inherits parent's 3 columns */
}
`
Enter fullscreen mode Exit fullscreen mode 
            ## DevKits Tools for CSS Development

            When building layouts, these [DevKits](/) tools save time:


                - <a href="/css-minifier.html">CSS Minifier</a> — minify your CSS for production

                - <a href="/color-converter.html">Color Converter</a> — convert between hex, RGB, and HSL for your grid backgrounds



            ## Summary

            CSS Grid has made responsive layout dramatically simpler. The key patterns to internalize:


                - `repeat(auto-fill, minmax(250px, 1fr))` — the responsive grid one-liner

                - Named grid areas for complex page layouts

                - `fr` units for proportional space distribution

                - `place-items: center` for centering anything

                - Subgrid for nested alignment





                ### Host Your Web Projects — Recommended Hosting


                    [
                        🌐
                        HostingerWeb Hosting from $2.99/mo
                    ](https://www.hostinger.com/web-hosting?REFERRALCODE=88SHEZECLZMG)
                    [
                        💧
                        DigitalOcean$200 Free Credit
                    ](https://www.digitalocean.com/?refcode=cd17c633ca0c)
Enter fullscreen mode Exit fullscreen mode

Originally published at aiforeverthing.com

Top comments (0)