# #19 CSS Grid、Subgrid：網頁排版的神奇格子，來排個照片牆與雞腿便當吧！

> ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev**，請至新站閱讀完整版**：
> 
> *   [CSS Grid 排版入門：建立格子、劃分區域、fr 單位與 minmax() 實用語法](https://css.im1010ioio.dev/layout/css-grid/)
>     
> *   [CSS Subgrid、gap、order 與 Grid 實戰：照片牆、Bento Grid 一次做到會](https://css.im1010ioio.dev/layout/css-grid-advanced/)
>     

* * *

昨天我們介紹的 `flex` 是單向的排版，而今天我們要探討 `grid` ，它是雙向的排版，可以創造很多行與列。`grid` 也是十分好用的 CSS，大家一起學起來吧！

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696256417180/cd9e8c25-ebca-4bfb-b011-e0c6f103054e.png align="center")

> #### ↓ 今日學習重點 ↓
> 
> *   學習 Grid 容器的各種設定
>     
> *   了解如何劃分 Grid 區域
>     
> *   了解 Subgrid
>     
> *   學習 Grid 細節設定：Gap、Order
>     

* * *

## 一、Grid 容器

和 flex 一樣，首先要準備一個 `grid` 容器。

### 1\. 建立一個基本的 Grid

我們將這個容器設為 `display: grid;`，接著我們要使用：

*   `grid-template-rows` （切出**橫的 rows**）和
    
*   `grid-template-columns` （切出**直的 columns**）來畫格子。
    

我們以一個範例來說明…