minmax

minmax is used for each grid element as it prevents the grid from growing larger than the defined fractions, for example if the content grows beyond the available height or width.

Targeting Columns

Once the grid has been created, elements can be placed into their appropriate positions using the appropriate CSS properties:

• grid-column-start: {x};
• grid-column-end: {x};

.grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1.618fr) minmax(0, 2.618fr) minmax(0, 4.237fr);
}

.cell {
    grid-column-start: 2;
}

Would produce the following grid, with the item positioned in the 2nd column.

Items can stretch across rows and columns like so

.cell {
    grid-column-start: 2;
    grid-column-end: 5;
}

It is important to note that this column ends at 5, where the 5th column starts.

Targeting Rows & Columns

For grids with both rows and columns, the following properties can be used:

• grid-column-start: {x};
• grid-column-end: {x};
• grid-row-start: {y};
• grid-row-end: {y};

For example, the following code:

.grid {
    display: grid; 
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1.618fr) minmax(0, 2.618fr) minmax(0, 4.237fr); 
    grid-template-rows: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1.618fr) minmax(0, 2.618fr) minmax(0, 4.237fr);
}

.cell {
    grid-column-start: 2;
    grid-row-start: 3;
}

Would produce the following grid, with the item positioned in the 2nd column, and the 4th row.

Items can stretch across rows and columns like so

.cell {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
}

Would produce the following grid, with the item positioned in the 2nd column, and the 4th row.

Responsive Grids

Target different regions per breakpoint

/* Mobile */
.cell {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
}

/* Desktop */
@media only screen and (min-width: 768px) {
    .cell {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }
}

Different grids per breakpoint

Optionally, the above can be combined with using different grids across breakpoints:

/* Mobile Grid */
.grid {
    display: grid;
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1.618fr) minmax(0, 2.618fr) minmax(0, 4.237fr);
    grid-template-rows: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1.618fr) minmax(0, 2.618fr) minmax(0, 4.237fr);
}

/* Desktop Grid */
@media only screen and (min-width: 768px) {
    .grid {
        grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1.618fr) minmax(0, 2.618fr) minmax(0, 4.237fr) minmax(0, 6.856fr) minmax(0, 11.093fr) minmax(0, 17.95fr);
        grid-template-rows: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1.618fr) minmax(0, 2.618fr) minmax(0, 4.237fr) minmax(0, 6.856fr) minmax(0, 11.093fr) minmax(0, 17.95fr);
    }
}

Example

Example Demo Page