許多流行的簡(jiǎn)歷設(shè)計(jì)通過(guò)以網(wǎng)格形狀鋪設(shè)部分來(lái)充分利用可用的頁(yè)面空間。讓我們使用CSS網(wǎng)格創(chuàng)建一個(gè)佈局，在打印時(shí)和不同的屏幕尺寸時(shí)看起來(lái)很棒。這樣，我們可以在線和離線使用簡(jiǎn)歷，這可能會(huì)在新的一年中派上用場(chǎng)！

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

 <article>
   
   
   
   
   
   
   
</article>

要開(kāi)始使用網(wǎng)格，我們將顯示：網(wǎng)格添加到我們的外部簡(jiǎn)曆元素。接下來(lái)，我們描述應(yīng)該如何將事物放在網(wǎng)格上。在這種情況下，我們將指定兩列和四行。

我們正在使用CSS網(wǎng)格的FR單元來(lái)指定可用空間上有多少個(gè)分?jǐn)?shù)。我們將為行等等（每個(gè)1FR）提供相等的空間，並使第一列比第二列寬兩倍（2FR）。

 ?；謴?fù) {
  顯示：網(wǎng)格；
  網(wǎng)格板柱：2FR 1FR;
  網(wǎng)格板行：1FR 1FR 1FR 1FR;
}

接下來(lái)，我們將通過(guò)使用網(wǎng)格 - 板塊區(qū)域?qū)傩詠?lái)描述如何將這些元素放在網(wǎng)格上。首先，我們需要為每個(gè)部分定義一個(gè)命名的網(wǎng)格區(qū)域。您可以使用任何名稱，但在這裡我們將使用與我們的各節(jié)相同的名稱：

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

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

/ *為每個(gè)部分定義一個(gè)網(wǎng)格區(qū)域 */

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

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

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

CSS網(wǎng)格規(guī)範(fàn)提供了許多有用的屬性，用於在網(wǎng)格和某些速記屬性上進(jìn)行尺寸和鋪設(shè)。在此示例中，我們通過(guò)顯示一種可能的方法來(lái)使事情變得簡(jiǎn)單。請(qǐng)務(wù)必查看一些優(yōu)質(zhì)的資源，以了解如何最好地將CSS網(wǎng)格合併到您的項(xiàng)目中。

調(diào)整佈局

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

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

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

 ?；謴?fù) {
  網(wǎng)格板柱：1FR 2FR;
  網(wǎng)格 - 板序：
    “照片教育”
    “名字工作”
    “關(guān)於工作”
    “技能社區(qū)”；
} 

劃分列

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

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

可以用網(wǎng)格差距屬性來(lái)控制部分之間的差距。

使其響應(yīng)迅速

對(duì)於小屏幕，例如移動(dòng)設(shè)備，我們可以在單個(gè)全寬列中顯示簡(jiǎn)歷部分。

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

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

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

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

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

計(jì)劃單頁(yè)打印

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

避免降低字體尺寸以擠壓更多信息，因?yàn)樗赡芎茈y閱讀。一個(gè)技巧是在開(kāi)發(fā)時(shí)，在您的簡(jiǎn)曆元素中添加臨時(shí)尺寸約束。

 ?；謴?fù) {
  / *僅開(kāi)發(fā) */
  寬度：210mm；
  身高：297毫米；
  邊界：1px固體黑色；
}

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

您可以提供打印CSS來(lái)隱藏瀏覽器可能插入的日期和頁(yè)碼之類的內(nèi)容。

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

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

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

瀏覽器支持

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

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

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

即使您還沒(méi)有準(zhǔn)備好託管在線簡(jiǎn)歷，也可以與CSS網(wǎng)格一起玩，探索不同的佈局，產(chǎn)生漂亮的PDF並同時(shí)學(xué)習(xí)CSS的出色部分。

狩獵快樂(lè)！

以上是新年，新工作？讓我們做一個(gè)網(wǎng)格驅(qū)動(dòng)的簡(jiǎn)歷！的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！