🔰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?