# CSS grid

[CSS](https://lochiwei.gitbook.io/web/css) ⟩ [layout](https://lochiwei.gitbook.io/web/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 ⟩
  * [ ]  [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 %}