---
# System prepended metadata

title: 格線系統 (Grid-system)
tags: [NKFW 網頁設計入門]

---

# 格線系統 (Grid-system)
###### tags: `NKFW 網頁設計入門`
## Breakpoint

* 直接設計出來的網站無法適應所有大小的螢幕，所以我們需要對不同設備設計不同的排版。
* 以下是Bootstrap對於不同大小的設備做的分類，分別有以下的尺寸代號。
* 可以按-F12-切換裝置模擬，來看看不同大小的設備顯示網頁的狀況。

| Breakpoint  | 類別名稱 | 尺寸   | 相對應的設備 | EX                 |
|:----------- | -------- | ------ | ------------ |:------------------ |
| Extra small | None     | <576px | 手機直向寬度 | Samsung Galaxy S8+ |
| Small       | **sm**       | ≥576px | 手機橫向     |                    |
| Medium      | **md**       | ≥768px | 平板直向寬度 | iPad Air           |
| Large       | **lg**     | ≥992px |              | 電腦螢幕           |

:::warning
上面的表格僅為參考用，難免會有一些特殊尺寸的設備(Ultra、Pro)會尺寸比同類型的設備還要大一些。
:::

## Container & Fluid container

:::info
Container的作用是用於填充整個畫面，容納其他元素。在Containter裡面有網格系統，網格系統則由row跟column組成，範例如下：
:::

```xml!
<div class="container">
    <div class="row">
        <div class="col">
            ... 
        </div>
        <div class="col">
            ... 
        </div>
        <div class="col">
            ...
        </div>
    </div>
</div>
```

1. container 
    * 定寬容器
    * 在每一個breakpoint上都有一個最大寬度(max-width)

2. container-fluid
    * 在所有大小的視窗中都是width:100%，會隨著視窗大小縮放

<!-- 3. Responsive container
    * EX：container-md
    * 在平板直向寬度以下的時候，container是滿版的(fluid)
    * 大於等於平板直向寬度的時候，container是定寬的

底下的範例，container-md會在`md`以下的尺寸滿版(`container-fluid`)

```htmlmixed!
<div class="container-md bg-danger-subtle">
    試試看我甚麼時候會是滿版容器
</div>
``` -->

## Grid

:::info
* Bootstrap的格線系統是由row跟column組成，每一個row都被切分成12等分
* 因為常用的版面是2、3、4欄的版面，所以就取最小公倍數12作為基準
:::

![](https://i.imgur.com/wTAFtco.png)

* 不指定column欄寬，會自動分配寬度
    ```xml!
    <div class="container">
        <div class="row">
            <div class="col">...</div>
            <div class="col">...</div>
            <div class="col">...</div>
            <div class="col">...</div>
        </div>
    </div>
    ```

* 指定column欄寬
    ```xml!
    <div class="container">
        <div class="row">
            <div class="col-4">...</div>
            <div class="col-8">...</div>
        </div>
    </div>
    ```

* column+breakpoint
    EX：在手機上面滿版(只有一欄)，但是希望在平板上面有三欄，我該怎麼做？

    ```xml!
    <div class="container">
        <div class="row">
            <div class="col col-md-4">...</div>
            <div class="col col-md-4">...</div>
            <div class="col col-md-4">...</div>
        </div>
    </div>
    ```
* row-cols欄數
    * 控制一個row有幾個column，多的換行
    * EX：平板橫向/電腦以上4欄，平板直向以上2欄，手機1欄 
    ```xml!
    <div class="container">
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 justify-content-center">
            <div class="col">......</div>
            <div class="col">......</div>
            <div class="col">......</div>
            <div class="col">......</div>
            <div class="col">......</div>
        </div>
    </div>
    ```



## Flex
因為row有flex的屬性，所以我們可以對column做以下幾種操作：
* <p style="color:purple">justify-content</p>
* <p style="color:purple">align-items</p>
* <p style="color:purple">align-content</p>


```xml!
<!-- 指定column欄寬 -->
<div class="container">
    <div class="row justify-content-between">
        <div class="col-4">...</div>
        <div class="col-8">...</div>
    </div>
</div>
```

:::success
客戶奇怪的要求：我想要一個三欄的版面，但是我想要每一個欄位的寬度只有3/12
該怎麼做呢？
:::

:::spoiler 解答在這裡
```xml!
<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
    </div>
</div>

<!-- 或是-->

<div class="container">
    <div class="row justify-content-around">
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
    </div>
</div>
```


:::

## Gutter

是時候讓column之間有點喘息的空間了。
gutter控制每一個column的padding。 

* <p style="color:purple">g-0</p>
* <p style="color:purple">g-1</p>
* <p style="color:purple">g-2</p>
* <p style="color:purple">g-3</p>
* <p style="color:purple">g-4</p>
* <p style="color:purple">g-5</p>


```xml!
<div class="container">
    <div class="row ">
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
    </div>
</div>
```

<!-- :::danger
我在column上面設定背景顏色之後

gutter就沒有作用了

我該怎麼辦？
:::

因為gutter是指column的padding，而設定背景顏色的時候padding會受到影響，加上預設的flex物件之間沒有margin，所以你要給column一些margin。

底下是範例

:::info
class:`flex-nowrap`屬性指的是CSS的`flex-wrap: nowrap`。

因為我們有三個4欄的`col`，所以他們被分配到各1/3的row的寬度，但是現在每一個`col`又被手動加上水平10px的`margin`，所以最後一個`col`會超出去整個`row`，這時候需要設定`flex-wrap: nowrap`，讓超出去的`col`不要被換行，這樣會使所有的`col`重新分配大小。
:::

```xml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Document</title>
    <style>
        .content{
            text-align: center;
            margin: 0px 10px;
        }
        #content1{
            background-color:blueviolet;
        }
        #content2{
            background-color: brown;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="row g-0 justify-content-center flex-nowrap m-3">
            <div class="content col-3" id="content1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit possimus similique sit sequi veritatis, iure tempore, enim qui aliquid doloribus mollitia cum necessitatibus iste, repudiandae at officia praesentium recusandae.</div>
            <div class="content col-3" id="content2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit possimus similique sit sequi veritatis, iure tempore, enim qui aliquid doloribus mollitia cum necessitatibus iste, repudiandae at officia praesentium recusandae.</div>
            <div class="content col-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit possimus similique sit sequi veritatis, iure tempore, enim qui aliquid doloribus mollitia cum necessitatibus iste, repudiandae at officia praesentium recusandae.</div>
            <div class="content col-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit possimus similique sit sequi veritatis, iure tempore, enim qui aliquid doloribus mollitia cum necessitatibus iste, repudiandae at officia praesentium recusandae.</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
``` -->