๐Ÿ”ฐCSS grid

๐Ÿšง under construction -> organize notes from Bear (search: grid)

CSS โŸฉ layout โŸฉ grid

/* โญ๏ธ grid container */
.container {
    display: grid;
    /* 5 rows / 4 cols */
    grid-template: repeat(5, 1fr) / repeat(3, auto) 1fr;
}

/* โญ๏ธ grid item */
.container .item {
    /*  r1 /  c1 /   r2   /  c2   */
    /* row / col / height / width */
    grid-area: 1 / 1 / 1 / span 3;
}
PreviousEmail FormNextvertical-align

Last updated

Was this helpful?