[[359416]]

經常有人私信我，小智這個設計圖用 CSS 要怎么布局呀，這個按鈕要怎么畫的。所以今天，在這篇文章我們來介紹一些新的布局的方法，希望對智米們有些用處。

把設計細節放在一邊

我通常做的第一件事就是把設計細節放在一邊。我想先知道這次設計主要包括哪些部分，然后在關注每個部分的細節。考慮以下UI：

在上面UI中，有以下特點：

• Header/Navigation
• 中間內容 部分
• 底部的 How it works 部分

接著，我們先把這三個主要部分抽象出來：

抽象后，我們可以看到主要的部分，主宋就可以幫助我們考慮如何布局組件，而不用考慮每個組件的細節。

我是這樣想的：

• Full-width header：頭部的導航欄
• Centered Content：中間內容水平居中，注意，這個一般需要設置最大寬度 max-width。
• How it works：這是一個4列的布局，整個部分都被限制在一個包裝器中。

接著，把上面三個部分用代碼表示出來：

<header></header> 
 
<section class="hero"> 
  <!-- A div to constraint the content --> 
  <div class="hero__content"></div> 
</section> 
 
<div class="wrapper"> 
  <!-- 4-columns layout --> 
  <section class="grid-4"></section> 
</div> 

因為我們有一個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

<div class="wrapper"> 
  <section class="steps"> 
    <div> 
      <h2>How it works</h2> 
      <p>Easy and simple steps</p> 
    </div> 
    <div class="layout"> 
      <div class="layout__item"> 
        <article class="card"></article> 
      </div> 
      <div class="layout__item"> 
        <article class="card"></article> 
      </div> 
      <div class="layout__item"> 
        <article class="card"></article> 
      </div> 
    </div> 
  </section> 
</div> 

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

<section class="hero"> 
  <!-- A div to constraint the content --> 
  <div class="hero__content flow"> 
    <h2>Food is amazing</h2> 
    <p>Learn how to cook amazing meals with easy and simple to follow steps</p> 
    <a href="/learn">Learn now</a> 
  </div> 
</section> 

css

.flow > * + * { 
  margin-top: var(--flow-space, 1em); 
} 

最后的想法如前面所見，實現組件的過程不僅要使其與 UI 完全匹配，還要考慮邊緣情況。希望智米從本文中學到至少一件事。

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。