新年，新工作？让我们做一个网格驱动的简历！

许多流行的简历设计通过以网格形状铺设部分来充分利用可用的页面空间。让我们使用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中文网其他相关文章！