learn-what-you-see.com - CSS - Seitenlayout 001

CSS - Seitenlayout

Beim Seitenlayout handelt es sich um ein sehr komplexes Thema. Dieser Themenblock soll frühzeitig grundlegende Techniken erläutern. Dazu widmen wir unsere Aufmerksamkeit den Sectioning Elementen und beginnen mit deren Platzierung innerhalb des Dokuments. Diverse Ansätze stehen zur Verfügung, u.a. das sog. Grid - System.

Folgen Sie an den entsprechenden Stellen den Links: Mehr dazu ...
(Dieser Themenblock bedient sich einer speziellen Methode des Grid - Systems, vertiefen Sie Ihr Wissen und beschäftigen Sie sich mit der CSS Eigenschaft display: grid;)

Grid - System

Mit einem Grid - System (kurz: Grid oder auch: Gestaltungsraster) lassen sich Spalten und Zeilen definieren, um HTML Elemente zu platzieren.

Vertikal ...

Ein Grid kann nur aus Zeilen bestehen und somit ein vertikales Layout zur Verfügung zu stellen:

Horizontale Bereiche ...

Horizontale Bereiche lassen sich mit dem Einsatz von Spalten erzeugen:

Skizze Grid 002 — Ansicht: Grid (... mit Spalten)

CSS: `display: grid;`

CSS bietet uns mit der Eigenschaft display: grid; ein starkes Werkzeug um ein Grid zu erzeugen.

body {
  /* Darstellung: Grid Container */
  display: grid;
}

Listing 001: CSS Datei

Durch display: grid; wird das entsprechende Element zu einem sog. Grid - Container. Die Kindelemente werden automatisch zu dessen sog. Grid - Areas.

Mit Hilfe der Eigenschaften grid-template-columns und grid-template-rows werden die sog. Rasterlinien gezeichnet.

body {
  /* Darstellung: Grid Container */
  display: grid;

  /* Spalten - Zeilen ... */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
}

Listing 002: CSS Datei

In Listing 002 wird ein Grid mit zwei Spalten (1fr 1fr) und drei Zeilen (1fr 2fr 1fr) erzeugt. Die Angaben beziehen sich auf das <body> Element, die Kindelemente werden dadurch automatisch zu Grid Areas.

Grid Areas platzieren

Um die Grid Areas innerhalb der gewünschten Rasterzellen platzieren zu können, bedienen wir uns einer speziellen Methode, den sog. grid-template-areas.

Mehr dazu ...

Mit Hilfe dieser Eigenschaft, lässt sich das Gestaltungsraster als Block notieren, in dem sich die gesetzten Spalten und Zeilen wiederspiegeln.

body {
  /* Darstellung: Grid Container */
  display: grid;

  /* Spalten - Zeilen ... */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;

  /* Aufteilung ... */
    grid-template-areas:
      "area_name; area_name;"
      "area_name; area_name;"
      "area_name; area_name;"
    ;
}

Listing 003: CSS Datei

Der Block besteht aus den Namen für die zu platzierenden Bereiche und bestimmt deren Position und Ausdehnung.

Den Kindelementen wird mit grid-area der jeweils entsprechende Name zugewiesen und somit eine Verknüpfung hergestellt.

selektor {
  grid-area: area_name;
}

Listing 004: CSS Datei

Abstände

Dem Grid Container können Abstände mitgeteilt werden, die die Grid Areas untereinander einhalten müssen.

body {
  /* Darstellung: Grid Container */
  display: grid;

  /* Abstände zwischen den GRID Areas */
    grid-column-gap: 1.6rem;
    grid-row-gap: 1.6rem;
}

Listing 005: CSS Datei

Durch die Angabe von grid-column-gap: 1.6rem; werden Abstände zwischen die vertikal angeordneten Grid Areas gesetzt.

Skizze Grid Gap 001 — Ansicht: Grid (###)

Durch die Angabe von grid-row-gap: 1.6rem; werden Abstände zwischen die horizontal angeordneten Grid Areas gesetzt.

Skizze Grid Gap 002 — Ansicht: Grid (###)

Mit Hilfe der gap Eingenschaften lassen sich margin Angaben vermeiden. Nutzen Sie diesen Vorteil!

In der Praxis

Öffnen Sie die Datei index.html und passen Sie das Seitenlayout an!

Bei den Sectioning Elementen <header>, <main>, <aside> und <footer> handelt es sich um Kindelemente des <body> Tags, sowie um Blockelemente mit automatischem Zeilenumbruch. Die Darstellung erfolgt daher bereits vertikal. Dennoch passen wir bereits an dieser Stelle den CSS Code an und erstellen ein Grid.

<head>

  ... unverändert ...

</head>


<body>


  <header>

    <p>
      <header>
    </p>

  </header>


  <main>

    <p>
      <main>
    </p>


    <section>

      <p>
        <section>
      </p>

    </section>


    <section>

      <p>
        <section>
      </p>

    </section>


  </main>


  <aside>

    <p>
      <aside>
    </p>

  </aside>


  <footer>

    <p>
      <footer>
    </p>

  </footer>


</body>

Listing der Datei index.html

Die CSS Datei wird folgendermaßen angepasst:

body {
  /* Darstellung: Grid Container */
  display: grid;
  height: 100vh;

  /* Spalten - Zeilen ... */
    grid-template-columns: auto;
    grid-template-rows: auto;

  /* Aufteilung ... */
    grid-template-areas:
      "header-grid-area"
      "main-grid-area"
      "aside-grid-area"
      "footer-grid-area"
    ;

  /* Abstände zwischen den GRID Areas */
    grid-column-gap: 1.6rem;
    grid-row-gap: 1.6rem;
}
 
header, aside, main, footer {
  display: block;
  overflow: hidden;
 
  height: auto;
  width: 100%;

  /* border: 1px dashed pink; */
  padding: 0.4rem 0.6rem;
}
 
header, footer {
  background-color: #1c1c1c;
  }
 
header {
  grid-area: header-grid-area;
}

aside {
  grid-area: aside-grid-area;
  background-color: #e95420;
}
 
main {
  grid-area: main-grid-area;
  background-color: grey;
}
 
footer {
  grid-area: footer-grid-area;
}

header p,
footer p {
  font-weight: bold;
  color: #ffffff;

  padding: 2rem 1rem;
 
  text-align: center;
}
 
/* -------- */
/* ## ## ## */
/* ---------*/
section {
  display: block;
  background-color: #ffffff;

  overflow: hidden;
 
  height: auto;
  width: 84%;
 
  margin: 1.2rem auto;
    border: 1px dashed green;
    padding: 0.6rem;
}

Listing der Datei main.css

1. ...

2. ...

3. ...

4. ...

Optisch ist kaum ein Unterschied erkennbar, allerdings dient jetzt ein Grid als Basis und ist damit wesentlich dynamischer. Um einen horizontalen Bereich zu schaffen, bedarf es nur einer winzigen Änderung am CSS Code.

body {
  /* Darstellung: Grid Container */
  display: grid;
  height: 100vh;

  /* Spalten - Zeilen ... */
    grid-template-columns: auto;
    grid-template-rows: auto;

  /* Aufteilung ... */
    grid-template-areas:
      "header-grid-area header-grid-area"
      "main-grid-area aside-grid-area"
      "footer-grid-area footer-grid-area"
    ;

  /* Abstände zwischen den GRID Areas */
    grid-column-gap: 1.6rem;
    grid-row-gap: 1.6rem;
}