[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;
}
好的,這樣基本上他會在手機版上面是單一個欄然後逐行顯示我們的內容,這時候針對內文的文字也約略調整一下。