作者：前端小智 來源：大遷世界
經常有人私信我，小智這個設計圖用 CSS 要怎麼佈局呀，這個按鈕要怎麼畫的。所以今天，在這篇文章我們來介紹一些新的佈局的方法，希望對智米們有些用處。
把設計細節放在一邊
我通常做的第一件事就是把設計細節放在一邊。我想先知道這次設計主要包括哪些部分，然後再關注每個部分的細節。考慮以下UI：
在上面UI中，有以下特點：
Header/Navigation
中間內容 部分
底部的 How it works 部分
接著，我們先把這三個主要部分抽象出來：
抽象後，我們可以看到主要的部分，就可以幫助我們考慮如何佈局元件，而不用考慮每個元件的細節。
我是這樣想的：
Full-width header：頭部的導航欄
Centered Content：中間內容水平居中，注意，這個一般需要設定最大寬度 max-width。
How it works：這是一個4列的佈局，整個部分都被限制在一個包裝器中。
接著，把上面三個部分用程式碼表示出來：
<！—— A div to constraint the content ——>
<！—— 4-columns layout ——>
因為我們有一個4列的部分，這裡我使用 CSS網格：
。wrapper {
margin-left： auto；
margin-right： auto；
padding-left： 1rem；
padding-right： 1rem；
max-width： 1140px；
}
。hero__content {
max-width： 700px；
margin-left： auto；
margin-right： auto；
}
。grid-4 {
display： grid；
grid-template-columns： repeat（4， 1fr）；
}
拿到 UI 時，我們不是馬上就開始行動，而是要觀察整體的構成，先實現每塊的構成，然後再去深入構成的實現。
文章頁面
在本例中，我們有一個文章頁面佈局。這是UI，它包含：
頭部
圖片
文章標題
文章內容
側邊欄（旁邊）
我們再一次把它抽象成主要的幾個部分：
抽象主要包括幾個部分：
網站的頭部寬度是 100%
標題：包含文章標題和說明，其內容左對齊，要設定最大寬度
兩列布局，包含main和sidebar元素。
文章內容，水平居中並有最大寬度。
文章-頁面標題
這裡不需要什麼佈局方法。一個簡單的max-width就可以了，當然還需要加些 padding，增加一些舒適距離。
。page-header {
max-width： 50rem；
padding： 2rem 1rem；
}
文章- Main 和 Sidebar
main 元素是視口的整個寬度減去側邊欄的寬度。通常，側邊欄應具有固定的寬度。為此，使用CSS網格是完美的。
。page-wrapper {
display： grid；
grid-template-columns： 1fr；
}
@media （min-width： 800px） {
grid-template-columns： 1fr 250px；
}
對於文章的內部內容，應該將其限制在一個包裝器中。
。inner-content {
max-width： 50rem；
margin-left： auto；
margin-right： auto；
padding-left： 1rem；
padding-right： 1rem；
}
有些整體的佈局後，我們來看具體的細節。
深入細節
How It Works 部分
在本文的第一個示例中，我們來看一下 How It Works 部分 的細節實現。
列
這裡的步驟一，二，三，有沒有可能會增加或者減少的情況，如果有，我們應該如何處理？
我們是否需要列的高度相等，特別是當一個卡片有一個很長的文字？
標題
我們是否需要該部分標題留在一邊？還是在某些情況下應採用全寬？
響應式設計
當網頁寬度縮小時，我們需要做響應式嗎？如果有， 那觸發的條件是什麼？
這些是我們開發可能會遇到的問題，你覺得怎麼樣？作為一名前端開發人員，我們應該考慮這樣的邊緣情況，而不僅僅按 UI 照貓畫虎這樣簡單。
由於本文著重於思考過程，所以無法詳細介紹一個個有可能出現的情況。
在上面的模型的第一個和第三個版本中，步驟數分別是3和2。我們可以使CSS動態化來處理嗎？可以。
HTML
How it works
Easy and simple steps
CSS
。steps {
display： grid；
grid-template-columns： 1fr；
grid-gap： 1rem；
}
@media （min-width： 700px） {
。steps {
grid-template-columns： 250px 1fr；
}
}
。layout {
display： grid；
grid-template-columns： 1fr；
grid-gap： 1rem；
}
@media （min-width： 200px） {
。layout {
grid-template-columns： repeat（auto-fit， minmax（200px， 1fr））；
}
}
我使用了CSS grid minmax（）和auto-fit關鍵字。這在卡片數量可以增加或減少的情況下很有用。
內容部分
圖片
圖片應如何呈現？它是每天變化的還是應該從CMS更新？
是使用HTML 還是CSS background？
圖片的預期長寬比是多少？
我們是否需要根據視口大小使用多個影象大小？
圖片的部分是否可能會換成影片？
高度
內容最小高度是多少？
內容長度
我們需要設定標題和描述的最大長度嗎？如果是，設計期望處理的最小值和最大值是多少？
元素之間的間距
如何處理垂直間距？
內容中心
如何水平和垂直居中內容？已知我們只知道寬度，而高度是未知的。
限制內容
為了提高可讀性，最好限制內容。理想的寬度是多少？
響應式設計
我們需要根據視窗寬度改變字型大小嗎？如果是，我們應該使用基於px的單位，視口單位，或CSS clamp（）函式？
根據我們所做的專案的性質，我們應該找到這些問題的答案，這將幫助我們確定元件的構建方式。
有時，很難回答每個問題，但是問得越多，獲得良好的無錯誤結果的可能性就越大。
在本部分中，我將解決子元素之間的間距。我喜歡使用flow-space實用程式。我是從Andy Bell的Piccalil部落格中學到的。目的是在直接同級元素之間提供間距。
html
<！—— A div to constraint the content ——>
css
。flow > * + * {
margin-top： var（——flow-space， 1em）；
}
最後的想法如前面所見，實現元件的過程不僅要使其與 UI 完全匹配，還要考慮邊緣情況。希望智米從本文中學到至少一件事。