minmax() and spanning columns and rows A simple minmax example

In this example, I am creating a grid that contains as many 200 pixel column tracks as will fit into the container with the remaining space shared equally between the columns. In the minmax() function the first value is the minimum size I want my tracks to be, the second is the maximum. By using 1fr as the maximum value, the space is equally distributed.

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, [col] 100px ) ;
    grid-template-rows: repeat(auto-fill, [row] auto );
}
[fl_row] .a {
    grid-column: col / span 2;
    grid-row: row;
}
[fl_row] .b {
    grid-column: col 3 / span 2 ;
    grid-row: row;
}
[fl_row] .c {
    grid-column: col ;
    grid-row: row 2;
}
[fl_row] .d {
    grid-column: col 2 / span 3 ;
    grid-row: row 2;
}
[fl_row] .e {
    grid-column: col / span 4;
    grid-row: row 3;
}

A

B

C

D

E

In this example, I am creating a grid that contains as many 100-pixel column tracks as will fit into the container (in the example this is the viewport) and naming them col. I can then position the grid items using named lines and spans.

[fl_row] {
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, [col] 100px ) ;
grid-template-rows: repeat(auto-fill, [fl_row] auto );
}
.a {
grid-column: col / span 2;
grid-row: row ;
}
.b {
grid-column: col 3 / span 2 ;
grid-row: row ;
}
.c {
grid-column: col ;
grid-row: row 2 ;
}
.d {
grid-column: col 2 / span 3 ;
grid-row: row 2 ;
}
.e {
grid-column: col / span 4;
grid-row: row 3;
}

A

B

C

D

E