[12th 鐵人賽] 實際操作 Part 3, Day 21

從手機版開始

好的，今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器，所以這邊我們會準備一些內容，大抵上就當作一個文章內容來看看這個區塊。

首先，我們在 .context-wrapper 稍微調整了一下定義，

.context-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, [body] minmax(40ch, 1fr) [end]);
    grid-gap: 1rem;
    grid-column: 1 / 3;
}

好的，這樣基本上他會在手機版上面是單一個欄然後逐行顯示我們的內容，這時候針對內文的文字也約略調整一下。

.context-wrapper .card {
    display: flex;
    flex-direction: column;
}
.context-wrapper .card h2 {
    font-size: clamp(2rem, 5 * (1vw + 1vh) / 2, 3.6rem);
}
.context-wrapper .card p {
    font-size: clamp(1.4rem, 5 * (1vw + 1vh) / 2, 1.6rem);
    text-align: justify;
}

而以下是我們的 .card 的 HTML 內容，

<div class="card">
    <img class="cover" src="" alt="Cover">
    <h2>我是一張卡</h2>
    <p>若能夠洞悉資訊各種層面的含義，勢必能讓思維再提高一個層級。對我個人而言，資訊不僅僅是一個重大的事件，還可能會改變我的人生。若到今天結束時我們都還無法釐清資訊的意義，那想必我們昨天也無法釐清。我們不得不相信，謹慎地來說，我們必須考慮到所有可能。
    </p>
</div>

你想說圖片怎麼不見了？好的，我忘了設計圖片的展示樣式，

.context-wrapper .card .cover {
    width: 100%;
    height: 100%;
    display: block;
}

這樣就很單純的完成手機版的樣子。

往上延伸

主要比較複雜的在這裡，先上圖。

首先回頭看一下我們上面的設計，

grid-template-columns: repeat(auto-fit, [body] minmax(40ch, 1fr) [end]);

他會以 40ch 為單位，當我們的 .card 大於 40ch 的時候，會以 1fr 為單位來切割我們的容器，容器的切割次數則是以關鍵字 auto-fit 的方式來做自動分割。所以說，我們在相對大尺寸的裝置上觀看時，會自動分割成 3, 4 甚至 5 個不同數量的欄，來放置我們的 .card。

我以 4K 解析度的尺寸（寬度 3840px）展示給大家看看，

好的，這樣你就會看到他有 8 個 .card 排成剛好一行。這種情況是你的最外層容器沒有限制任何的最大尺寸的情況，但一般來說，我們會限制一個最大尺寸在外面，說好聽一點是 維持良好的觀看體驗，說白話一點就是 我不支援 MD4K 這種尺寸。

所以通常市面上的工具（例如 Bootstrap），對於 row 都會有一個最大尺寸設計，除非你故意拿掉他（或者你適用 .container-fluid）。所以我們也可以這麼做，例如在 .main 覆蓋一個 max-width 來結束這回合。

.main {
    /* 前略 */
    max-width: 192rem;
    margin: 0 auto;
}

那麼他在 4K 看起來就會變成這個樣子，

好的，這是簡易的向上延伸。

所以說那個手機版

卡片設計應該是比較常見的一種設計方式，至於他一行該排幾個？基本上除了你用 ch 來製作之外，你也可以用 % 來製作，但是，他就不是在手機版跟任何斷點上會是你想像中的樣子了。例如，我用 33.33% 來切割，你覺得他會變成如何？

grid-template-columns: repeat(auto-fit, [body] 33% [end]);

我明天再告訴你為什麼。