🔰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;
}

📗 參考

• CSSTricks ⟩

  • A Complete Guide to Grid ❤️

  • Using Grid Named Areas to Visualize (and Reference) Your Layout

🛠 工具

• 🛠️ Grid Garden ❤️