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

首先，我們將創(chuàng)建一個簡歷容器和簡歷部分。

 <article>
   
   
   
   
   
   
   
</article>

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

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

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

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

 。姓名 {
  網格區(qū)域：名稱；
}

。照片 {
  網格區(qū)域：照片；
}

/ *為每個部分定義一個網格區(qū)域 */

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

 ?；謴?{
  網格 - 板序：
    “名稱照片”
    “工作”
    “工作教育”
    “社區(qū)技能”；
}

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

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

調整布局

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

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

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

 ?；謴?{
  網格板柱：1FR 2FR;
  網格 - 板序：
    “照片教育”
    “名字工作”
    “關于工作”
    “技能社區(qū)”；
} 

劃分列

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

 ?；謴?{
  網格板柱：1FR 1FR 1FR;
  網格 - 板序：
    “名稱照片”
    “工作”
    “工作教育”
    “社區(qū)參考技能”；
} 

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

使其響應迅速

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

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

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

 @Media（最小寬度：1200px）{
  ?；謴?{
    網格 - 板序：
      “名稱照片”
      “工作”
      “工作教育”
      “社區(qū)技能”；
  }
}

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

 @Media（最小寬度：900px）{
  ?；謴?{
      網格板柱：2FR 1FR;
      網格 - 板序：
        “名稱照片”
        “關于”
        “工作”
        “教育教育”
        “技能技能”
        “社區(qū)社區(qū)”
        “參考參考”
  }
}

計劃單頁打印

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

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

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

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

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

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

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

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

瀏覽器支持

CSS網格在現(xiàn)代瀏覽器中有很好的支持。

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

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

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

狩獵快樂！

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