新年新工作？让我们用网格制作简历！

许多流行的简历设计都充分利用了可用页面空间，通过网格形状来布局各个部分。让我们使用 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添加到我们的外部简历元素中。接下来，我们描述如何在网格上放置这些内容。在本例中，我们将指定两列和四行。

我们使用 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";
}

到目前为止，我们有以下内容

查看 CodePen 上 Ali C (@alichur) 的作品
grid resume lines。
在 CodePen 上。

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";
}

查看 CodePen 上 Ali C (@alichur) 的作品
grid resume swapping sections。
在 CodePen 上。

我们可以实现一种流行的简历设计，其中细列位于左侧，只需进行最少的 CSS 更改即可。这是网格的一个优点：我们可以重新排列命名的网格区域以改变内容的位置，同时保持源顺序不变！

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

查看 CodePen 上 Ali C (@alichur) 的作品
grid resume left design。
在 CodePen 上。

分隔列

也许您想添加个人参考。我们可以向网格模板添加第三列，并将它们滑入底行。请注意，我们还需要将列单位更改为相等分数，然后更新模板区域，以便某些元素跨越两列以保持布局不变。

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

查看 CodePen 上 Ali C (@alichur) 的作品
grid resume split columns。
在 CodePen 上。

部分之间的间隙可以通过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 规范。例如，grid-template-columns写成-ms-grid-columns。通过 Autoprefixer 运行代码可以帮助添加这些前缀，但由于在旧规范中某些属性的行为不同，而某些属性不存在，因此需要进行手动更改和彻底测试。值得查看 Daniel Tonon 关于 如何配置 Autoprefixer 以使事情尽可能顺利运行的文章。

除了 Autoprefixer 之外，还可以 提供回退，例如使用浮动布局。不识别 CSS Grid 属性的浏览器将使用此回退进行显示。无论您是否需要支持 IE，回退都是明智之举，以确保（可能未知的）不支持 CSS Grid 的浏览器仍然可以显示您的内容。

---

即使您还没有准备好托管在线简历，玩转 CSS Grid、探索不同的布局、生成外观漂亮的 PDF 以及同时学习 CSS 的精彩部分仍然很有趣。

祝您求职顺利！