新年，新工作？讓我們做一個網格驅動的簡歷！

許多流行的簡歷設計通過以網格形狀鋪設部分來充分利用可用的頁面空間。讓我們使用CSS網格創建一個佈局，在打印時和不同的屏幕尺寸時看起來很棒。這樣，我們可以在線和離線使用簡歷，這可能會在新的一年中派上用場！

首先，我們將創建一個簡歷容器和簡歷部分。

 <article>
   
   
   
   
   
   
   
</article>

要開始使用網格，我們將顯示：網格添加到我們的外部簡曆元素。接下來，我們描述應該如何將事物放在網格上。在這種情況下，我們將指定兩列和四行。

我們正在使用CSS網格的FR單元來指定可用空間上有多少個分數。我們將為行等等（每個1FR）提供相等的空間，並使第一列比第二列寬兩倍（2FR）。

 。恢復 {
  顯示：網格；
  網格板柱：2FR 1FR;
  網格板行：1FR 1FR 1FR 1FR;
}

接下來，我們將通過使用網格 - 板塊區域屬性來描述如何將這些元素放在網格上。首先，我們需要為每個部分定義一個命名的網格區域。您可以使用任何名稱，但在這裡我們將使用與我們的各節相同的名稱：

 。姓名 {
  網格區域：名稱；
}

。照片 {
  網格區域：照片；
}

/ *為每個部分定義一個網格區域 */

現在是有趣的部分，使更改設計變得輕而易舉。將網格區域放置在網格板區域屬性中，您希望將它們放置。例如，在這裡，我們將在“網格”板區左上角添加名稱部分，以將我們的名字放在簡歷的左上方。我們的工作部分有很多內容，因此我們將其添加兩次，這意味著它將在兩個網格單元上延伸。

 。恢復 {
  網格 - 板序：
    “名稱照片”
    “工作”
    “工作教育”
    “社區技能”；
}

這是我們到目前為止所擁有的：

CSS網格規範提供了許多有用的屬性，用於在網格和某些速記屬性上進行尺寸和鋪設。在此示例中，我們通過顯示一種可能的方法來使事情變得簡單。請務必查看一些優質的資源，以了解如何最好地將CSS網格合併到您的項目中。

調整佈局

網格板區域使更改佈局非常容易。例如，如果您認為雇主對您的技能部分比您的教育更感興趣，那麼您可以在網格板序列中切換名稱，他們將在您的佈局中交換位置，而無需其他更改。

 。恢復 {
  網格 - 板序：
    “名稱照片”
    “工作”
    “工作技能” / *現在超越教育的技能 * /
    “社區教育”；
} 

我們可以實現一種流行的簡歷設計，其中薄柱在左側，CSS更改。這是關於網格的好處之一：我們可以重新排列命名的網格區域，以便在源訂單確切地將其留在原處的同時轉移一切！

 。恢復 {
  網格板柱：1FR 2FR;
  網格 - 板序：
    “照片教育”
    “名字工作”
    “關於工作”
    “技能社區”；
} 

劃分列

也許您想將個人參考添加到混音中。我們可以在網格模板中添加第三列，然後將它們滑入底部。請注意，我們還需要更改列單元以等於分​​數，然後更新模板區域，以使某些元素跨越兩個列以保持我們的佈局位置。

 。恢復 {
  網格板柱：1FR 1FR 1FR;
  網格 - 板序：
    “名稱照片”
    “工作”
    “工作教育”
    “社區參考技能”；
} 

可以用網格差距屬性來控制部分之間的差距。

使其響應迅速

對於小屏幕，例如移動設備，我們可以在單個全寬列中顯示簡歷部分。

網格板柱：1FR;
網格 - 板序：
  “照片”
  “姓名”
  “關於”
  “工作”
  “教育”
  “技能”
  “社區”
  “參考”
}

然後，我們可以使用媒體查詢來更改更寬的屏幕的佈局。

 @Media（最小寬度：1200px）{
  。恢復 {
    網格 - 板序：
      “名稱照片”
      “工作”
      “工作教育”
      “社區技能”；
  }
}

可以在兩者之間添加其他斷點。例如，在平板電腦這樣的中屏上，我們可能希望單列中的所有內容，但是個人和圖像部分可以並排放在頂部。

 @Media（最小寬度：900px）{
  。恢復 {
      網格板柱：2FR 1FR;
      網格 - 板序：
        “名稱照片”
        “關於”
        “工作”
        “教育教育”
        “技能技能”
        “社區社區”
        “參考參考”
  }
}

計劃單頁打印

如果您希望簡歷可以很好地打印到一張物理紙上，請記住一些事情。最困難的挑戰通常是減少單詞數量，以便它適合一頁。

避免降低字體尺寸以擠壓更多信息，因為它可能很難閱讀。一個技巧是在開發時，在您的簡曆元素中添加臨時尺寸約束。

 。恢復 {
  / *僅開發 */
  寬度：210mm；
  身高：297毫米；
  邊界：1px固體黑色；
}

通過使此A4紙尺寸的邊框清楚地看到尺寸是否太小，或者內容從邊界溢出，表明它將打印到第二頁上。

您可以提供打印CSS來隱藏瀏覽器可能插入的日期和頁碼之類的內容。

 @Media打印{
  / *僅刪除任何僅屏幕樣式，例如鍊接下劃線 */
}

@頁 {
  填充：0;
  保證金：0cm;
  尺寸：A4肖像；
}

要注意的一件事是，不同的瀏覽器可能會使您的簡歷使用不同的字體略有不同。如果您想要非常精確的印刷簡歷，另一個選擇是將其保存為PDF，並在您的網站上提供下載鏈接。

瀏覽器支持

CSS網格在現代瀏覽器中有很好的支持。

Internet Explorer（IE）使用前綴支持CSS網格規範的較舊版本。例如，網格板列將其寫為-ms-Grid-coltumns。通過AutoPrefixer運行代碼可以幫助添加這些前綴，但是需要手動更改和徹底測試，因為在舊規範中，某些屬性的行為方式有所不同，有些不存在。值得查看丹尼爾·托農（Daniel Tonon）的文章，介紹如何將自動改裝器配置為盡可能盡可能地發揮作用。

自動改裝器的另一種方法是提供後備，例如使用浮點佈局。無法識別CSS網格屬性的瀏覽器將使用此後備顯示。無論您是否需要支持IE，都可以確保不支持CSS網格的瀏覽器（可能未知的）瀏覽器仍然顯示您的內容。

即使您還沒有準備好託管在線簡歷，也可以與CSS網格一起玩，探索不同的佈局，產生漂亮的PDF並同時學習CSS的出色部分。

狩獵快樂！

以上是新年，新工作？讓我們做一個網格驅動的簡歷！的詳細內容。更多資訊請關注PHP中文網其他相關文章！