Neues Jahr, neuer Job? Lass uns einen Grid-gestützten Lebenslauf erstellen!

Viele beliebte Lebenslaufdesigns nutzen den verfügbaren Platz auf der Seite optimal aus, indem sie Abschnitte in einem Raster anordnen. Lass uns CSS Grid verwenden, um ein Layout zu erstellen, das sowohl beim Drucken als auch auf verschiedenen Bildschirmgrößen gut aussieht. So können wir den Lebenslauf online und offline nutzen, was im neuen Jahr nützlich sein könnte!

Zuerst erstellen wir einen Container für den Lebenslauf und seine Abschnitte.

<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>

Um Grid zu verwenden, fügen wir display: grid zu unserem äußeren Lebenslaufelement hinzu. Als Nächstes beschreiben wir, wie die Elemente im Grid platziert werden sollen. In diesem Fall geben wir zwei Spalten und vier Zeilen an.

Wir verwenden die fr-Einheit von CSS Grid, um anzugeben, wie viel Bruchteil des verfügbaren Platzes zugewiesen werden soll. Wir geben den Zeilen jeweils gleich viel Platz (je 1fr) und machen die erste Spalte doppelt so breit wie die zweite (2fr).

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

Als Nächstes beschreiben wir, wie diese Elemente im Grid platziert werden sollen, indem wir die Eigenschaft grid-template-area verwenden. Zuerst müssen wir für jeden unserer Abschnitte einen benannten grid-area definieren. Du kannst jeden beliebigen Namen verwenden, aber hier verwenden wir denselben Namen wie unsere Abschnitte.

.name {
  grid-area : name;
}

.photo {
  grid-area : photo;
}

/* define a grid-area for every section */

Jetzt kommt der spaßige Teil, der die Änderung des Designs zum Kinderspiel macht. Platziere die Grid-Bereiche in der Eigenschaft grid-template-areas so, wie du sie anordnen möchtest. Zum Beispiel fügen wir hier den Abschnitt name oben links in der grid-template-area hinzu, um unseren Namen oben links im Lebenslauf zu platzieren. Unser work-Abschnitt hat viel Inhalt, also fügen wir ihn zweimal hinzu, was bedeutet, dass er sich über zwei Grid-Zellen erstreckt.

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

Hier ist, was wir bisher haben:

Sieh dir den Pen
grid resume lines von Ali C (@alichur) an
auf CodePen.

Die CSS Grid-Spezifikation bietet viele nützliche Eigenschaften zum Skalieren und Anordnen von Elementen im Grid sowie einige Kurzschrifteigenschaften. Wir halten die Dinge in diesem Beispiel einfach, indem wir eine mögliche Methode zeigen. Schau dir unbedingt einige der großartigen Ressourcen an, um zu lernen, wie du CSS Grid am besten in dein Projekt integrieren kannst.

Layout anpassen

grid-template-areas macht es sehr einfach, dein Layout zu ändern. Wenn du zum Beispiel denkst, dass ein Arbeitgeber mehr an deinem Abschnitt skills als an deiner education interessiert sein wird, kannst du die Namen in grid-template-areas vertauschen, und sie werden ihre Plätze in deinem Layout tauschen, ohne dass weitere Änderungen erforderlich sind.

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

Sieh dir den Pen
grid resume swapping sections von Ali C (@alichur) an
auf CodePen.

Wir können ein beliebtes Lebenslaufdesign erreichen, bei dem die schmale Spalte links ist, mit minimalen CSS-Änderungen. Das ist eine der schönen Seiten von Grid: Wir können die benannten Grid-Bereiche neu anordnen, um Dinge zu verschieben, während die Quellreihenfolge genau dort bleibt, wo sie ist!

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

Sieh dir den Pen
grid resume left design von Ali C (@alichur) an
auf CodePen.

Spalten teilen

Vielleicht möchtest du persönliche Referenzen hinzufügen. Wir können eine dritte Spalte zur Grid-Vorlage hinzufügen und diese in die unterste Zeile einfügen. Beachte, dass wir auch die Spalteneinheiten in gleiche Brüche ändern müssen, dann die Vorlagenbereiche aktualisieren müssen, damit bestimmte Elemente zwei Spalten überspannen, um unser Layout beizubehalten.

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

Sieh dir den Pen
grid resume split columns von Ali C (@alichur) an
auf CodePen.

Der Abstand zwischen den Abschnitten kann mit der Eigenschaft grid-gap gesteuert werden.

Responsivität

Für kleine Bildschirme, wie ein Mobilgerät, können wir die Lebenslaufabschnitte in einer einzigen Vollbildspalte anzeigen.

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

Dann können wir eine Medienabfrage verwenden, um das Layout für breitere Bildschirme zu ändern.

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

Zusätzliche Haltepunkte können dazwischen eingefügt werden. Zum Beispiel könnten wir auf mittleren Bildschirmen, wie einem Tablet, alles in einer einzigen Spalte haben, aber die Abschnitte personal und image sollten oben nebeneinander stehen.

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

Planung für einseitigen Druck

Wenn dein Lebenslauf schön auf eine einzelne physische Seite gedruckt werden soll, gibt es ein paar Dinge zu beachten. Die schwierigste Herausforderung ist oft, die Wortanzahl zu reduzieren, damit er auf eine Seite passt.

Vermeide es, die Schriftgröße zu reduzieren, um mehr Informationen unterzubringen, da sie sonst schwer zu lesen sein kann. Ein Trick ist, dem Lebenslaufelement eine vorübergehende Größenbeschränkung hinzuzufügen, während du entwickelst.

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

Durch die Erstellung dieses Rahmens in A4-Größe wird deutlicher, ob die Größen zu klein sind oder ob der Inhalt aus dem Rahmen herausfällt, was darauf hindeutet, dass er auf eine zweite Seite gedruckt wird.

Du kannst Druck-CSS bereitstellen, um Dinge wie das Datum und Seitenzahlen auszublenden, die der Browser möglicherweise einfügt.

@media print {
  /* remove any screen only styles, for example link underline */
}

@page {
  padding: 0;
  margin: 0cm;
  size: A4 portrait;
}

Eine Sache zu beachten ist, dass verschiedene Browser deinen Lebenslauf mit unterschiedlichen Schriftarten rendern können, die in der Größe leicht variieren können. Wenn du einen sehr präzisen gedruckten Lebenslauf möchtest, ist eine weitere Option, ihn als PDF zu speichern und einen Download-Link auf deiner Website bereitzustellen.

Browser-Unterstützung

CSS Grid wird in modernen Browsern gut unterstützt.

Internet Explorer (IE) unterstützt eine ältere Version der CSS Grid-Spezifikation mit Präfixen. Zum Beispiel wird grid-template-columns als -ms-grid-columns geschrieben. Das Durchlaufen des Codes mit einem Autoprefixer kann beim Hinzufügen dieser Präfixe helfen, aber manuelle Änderungen und gründliches Testen sind erforderlich, da in der alten Spezifikation einige Eigenschaften anders funktionieren und einige nicht existieren. Es lohnt sich, den Artikel von Daniel Tonon darüber zu lesen, wie Autoprefixer konfiguriert werden kann, um die Dinge so gut wie möglich zu gestalten.

Ein alternativer Ansatz zum Autoprefixer ist, ein Fallback bereitzustellen, zum Beispiel durch die Verwendung eines Float-Layouts. Browser, die CSS Grid-Eigenschaften nicht erkennen, werden mit diesem Fallback angezeigt. Unabhängig davon, ob du IE unterstützen musst, ist ein Fallback sinnvoll, um sicherzustellen, dass (potenziell unbekannte) Browser, die CSS Grid nicht unterstützen, deine Inhalte trotzdem anzeigen.

---

Auch wenn du noch nicht bereit bist, einen Online-Lebenslauf zu hosten, macht es trotzdem Spaß, mit CSS Grid zu experimentieren, verschiedene Layouts zu erkunden, eine großartig aussehende PDF-Datei zu erstellen und gleichzeitig einen beeindruckenden Teil von CSS zu lernen.

Viel Erfolg bei der Jobsuche!