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

首先，我們将創建一個簡曆容器和我們的簡曆部分。

<article class="resume"> <section class="name"></section> <section class="photo"></section> <section class="about"></section> <section class="work"></section> <section class="education"></section> <section class="community"></section> <section class="skills"></section> </article>

要開始使用 Grid，我們添加 display: grid 到外部 resume 元素。接下來，我們描述應該如何将事物放置在網格上。在這種情況下，我們将指定兩列和四行。

我們使用 CSS Grid 的fr單位來指定在可用空間上給出多少分數。我們将給行相等的空間（1fr每個），并使第一列比第二列寬兩倍（2fr）。

.resume { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; }

grid-template-area接下來我們将描述如何使用屬性将這些元素放置在網格上。首先，我們需要 grid-area為每個部分定義一個命名。您可以使用任何名稱，但在這裡我們将使用與我們的部分相同的名稱：

.name { grid-area : name; } .photo { grid-area : photo; } /* define a grid-area for every section */

現在是有趣的部分，它使更改設計變得輕而易舉。将網格區域放置在grid-template-areas您希望它們布置的屬性中。例如，在這裡我們将name在左上角添加部分，grid-template-area 以将我們的名字放在簡曆的左上角。我們的work部分有很多内容，所以我們添加了兩次，這意味着它将延伸到兩個網格單元格上。

.resume { grid-template-areas: "name photo" "work about" "work education" "community skills"; }

以下是我們目前所擁有的：

CSS Grid 規範提供了許多有用的屬性，用于在網格上調整大小和布局，以及一些速記屬性。在這個例子中，我們通過展示一種可能的方法來保持簡單。請務必查看一些很棒的資源，以了解如何最好地将 CSS Grid 合并到您的項目中。

grid-template-areas使更改布局變得非常容易。例如，如果您認為雇主對您的skills 部門比對您的部門更感興趣，您education可以切換名稱grid-template-areas，他們将在您的布局中交換位置，而無需進行其他更改。

.resume { grid-template-areas: "name photo" "work about" "work skills" /* skills now moved above education */ "community education"; }

我們可以實現一個流行的簡曆設計，其中細列位于左側，CSS 更改最少。這是關于網格的好處之一：我們可以重新排列命名的網格區域以移動事物，同時将源順序完全保留在原處！

.resume { grid-template-columns: 1fr 2fr; grid-template-areas: "photo education" "name work" "about work" "skills community"; }

也許您想在組合中添加個人參考。我們可以在網格模闆中添加第三列并将它們滑入底行。請注意，我們還需要将列單位更改為相等的分數，然後更新模闆區域，以便某些元素跨越兩列，以保持我們的布局到位。

.resume { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "name name photo" "work work about" "work work education" "community references skills"; }

部分之間的間隙可以通過grid-gap屬性來控制。

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

grid-template-columns: 1fr; grid-template-areas: "photo" "name" "about" "work" "education" "skills" "community" "references" }

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

@media (min-width: 1200px) { .resume { grid-template-areas: "name photo" "work about" "work education" "community skills"; } }

可以在其間添加額外的斷點。例如，在平闆電腦等中等屏幕上，我們可能希望所有内容都在一個列中，但personal和image部分并排位于頂部。

@media (min-width: 900px) { .resume { grid-template-columns: 2fr 1fr; grid-template-areas: "name photo" "about about" "work work" "education education" "skills skills" "community community" "references references" } }

如果你想讓你的簡曆很好地打印在一張紙上，有幾件事要記住。最困難的挑戰通常是減少字數以使其适合一頁。

避免減小字體大小以壓縮更多信息，因為它可能會變得難以閱讀。一個技巧是在你開發的時候給你的簡曆元素添加一個臨時的大小限制。

.resume { /* for development only */ width : 210mm; height: 297mm; border: 1px solid black; }

通過制作此 A4 紙大小的邊框，可以更清楚地查看尺寸是否太小，或者内容是否溢出邊框，表明它将打印到第二頁上。

您可以提供打印 CSS 來隐藏浏覽器可能插入的内容，例如日期和頁碼。

@media print { /* remove any screen only styles, for example link underline */ } @page { padding: 0; margin: 0cm; size: A4 portrait; }

需要注意的一件事是，不同的浏覽器可能會使用不同的字體呈現您的簡曆，這些字體的大小可能會略有不同。如果您想要一份非常精确的打印簡曆，另一種選擇是将其保存為 PDF 并在您的網站上提供下載鍊接。

CSS Grid 在現代浏覽器中有很好的支持。

Internet Explorer (IE) 支持使用前綴的舊版 CSS 網格規範。例如grid-template-columns寫為-ms-grid-columns。通過Autoprefixer運行代碼可以幫助添加這些前綴，但需要手動更改和徹底測試，因為在舊規範中，某些屬性的行為不同，而有些則不存在。

autoprefixer 的另一種方法是提供 fallback，例如使用浮動布局。無法識别 CSS Grid 屬性的浏覽器将使用此後備顯示。不管您是否需要支持 IE，後備是明智的，以确保（可能未知）不支持 CSS Grid 的浏覽器仍然顯示您的内容。

即使您還沒有準備好托管在線簡曆，使用 CSS Grid、探索不同的布局、生成精美的 PDF 并同時學習 CSS 的精彩部分仍然很有趣。

祝求職愉快！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!