哈哈各位晚安，歡迎來到coding小白盜版學校官網的第八天～

這個計畫的內容是我這個coding超新手會在這30天裡，把複刻學校官網當作目標，從最基礎的前端html、css、js...開始邊做邊學，紀錄每天的學習進度，看看一個月過去能學到什麼程度

今天是值得慶祝的日子，因為我終於把首頁整個生出來啦！

雖然還沒做到更深的動態回饋和自動輪播，但乍看之下還挺有模有樣的吧～

今天的進度整體做起來沒什麼障礙，稍微花時間的是學習了新技能grid排版，用來排footer網站資訊的文字部分

Grid排版

這次的需求不難，我先把需要排版的p們綁成一個div

<div class="footer-grid">
    <p>電話：+886-2-2732-1104 +886-2-6639-6688</p>
    <p>網址： https://www.ntue.edu.tw</p>
    <p>地址：106320 臺北市大安區和平東路2段134號</p>
    <p>網站維護：計網中心</p>
    <p>本網站著作權屬於 國立臺北教育大學</p>
    <p>訪問人數：5782337</p>
</div>

因為中間需要略過一格，所以我在倒數第二行打了一個沒有內容的p，來欺騙它那裏有東西要放

<div class="footer-grid">
    <p>電話：+886-2-2732-1104 +886-2-6639-6688</p>
    <p>網址： https://www.ntue.edu.tw</p>
    <p>地址：106320 臺北市大安區和平東路2段134號</p>
    <p>網站維護：計網中心</p>
    <p>本網站著作權屬於 國立臺北教育大學</p>
    <p></p>
    <p>訪問人數：5782337</p>
</div>

css就照著老師的講義設定

.footer-grid{
    display: grid;
    grid-template-columns: 350px 350px 350px;
    grid-template-rows: 20px 20px 20px;
    gap: 8px 40px;
    margin: 0px;
}

唉呦不錯呦
但好像又有哪裡怪怪的...這個排列順序和我原本想像不太一樣？

但免緊張，遇到問題就問chatgpt

我發現我在css裡用3*3的grid排版p元素，內容會先由左至右再由上至下排列，
能不能改成先由上至下再由左至右

它回答

可以的！

在 CSS Grid 預設的 自動排版 (auto-placement) 中，元素會按照「先行後列」的順序，也就是你看到的 先由左到右，再由上到下。如果你想要改成 先由上到下，再由左到右，可以在 grid 容器上加上：

.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3欄 /
grid-template-rows: repeat(3, auto); / 3列 /
grid-auto-flow: column; / ← 這個設定很關鍵！ */
}

grid-auto-flow: row;（預設值） → 先填滿行（左到右），再換行。
grid-auto-flow: column; → 先填滿列（上到下），再換列。✅

聽勸照做

.footer-grid{
    display: grid;
    grid-template-columns: 350px 350px 350px;
    grid-template-rows: 20px 20px 20px;
    grid-auto-flow: column;
    gap: 8px 40px;
    margin: 0px;
}

gpt哥果然永遠不會讓人失望，除了說笑話的時候
真是收穫滿滿的一天੧ᐛ੭

明天開始還債，研究響應式設計怎麼調
以上就是今天的內容，大家明天見，ㄅㄅ～