星期三的CSS-CSSBattle#18

是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！

很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！

回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！

那麼我們這次從 #18 的問題來提供我的作法，那麼題目圖如下：

1. 這次圖面簡單許多，也是一般實務上常會遇到的需求，這邊我會考慮使用 gird 的方式排版。
2. 如果和我一樣也是考慮用 grid 排版的話那要注意，要從垂直的方向下去做，不然從水平面的話，中間那行的底色就要額外處理了。

下面的 html 是按照上述所描述的產出

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

沒什麼特別的，幾個1/4圓餅圖，就對應幾個 div 。

這次的圖面比較簡單，我們就直接往下處理版面配置的grid處理：

body {
    margin: 0;
    display: grid;
    place-items: center;
    background: #5C434C;
    gap: 10;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
}
div {
    width: 80px;
    height: 80px;
    border-radius: 100% 0 0 0;
    background: #F09462;
}
div:nth-child(even) {
    background: #F5D6B4;
}

這裡我透過使用nth-of-type(even)的方式來選取雙數單位的樣式，就如同前面提到的一樣，你如果選擇雙數的話要從垂直方向下手，不然不會達到錯位的效果，邏輯就是2%n !== 0 ，如果採水平的方向，你會得到所有垂直方向同色的效果。

技術總結

這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度，以及對nth-of-type的使用理解，當然你也可以透過下Id或class的方式去做微調，以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !