---
description: '🚧 under construction -> organize notes from Bear (search: grid)'
---

# CSS grid

[CSS](..) ⟩ [layout]() ⟩ grid

{% tabs %}
{% tab title="📔 小抄" %}
```css
/* ⭐️ 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;
}
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] CSSTricks ⟩
  * [ ] &#x20;[A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) ❤️
  * [ ] [Using Grid Named Areas to Visualize (and Reference) Your Layout](https://css-tricks.com/using-grid-named-areas-to-visualize-and-reference-your-layout/)
{% endtab %}

{% tab title="🛠 工具" %}
* :tools: [Grid Garden](https://cssgridgarden.com/) ❤️
{% endtab %}
{% endtabs %}
