Kategorien
Stylesheets Webentwicklung

How to create an multi column layout

Um die Erstellung eines mehrspaltigen Seitenlayouts (column layout) ohne viel Code zu ermöglichen, sollen drei neue CSS-Eigenschaften eingeführt werden.

CSS Programming Image

column layout

Um die Erstellung eines mehrspaltigen Seitenlayouts (column layout) ohne viel Code zu ermöglichen, sollen drei neue CSS-Eigenschaften eingeführt werden.

Zum einen kann man mit column-count festlegen, wie viele Spalten erzeugt werden sollen, mit der Eigenschaft column-gap gibt man den Abstand zwischen den einzelnen Spalten an und mit column-width legt man die Breite der Spalte fest. Dabei sollen nur prozentuale Angaben möglich sein.

Beispiel:

body {
    display: grid;
		gap: 10px;
}

@media (min-width: 500px) { 

body {
 grid-template-columns: 1fr 3fr 1fr;	
 grid-template-rows: auto 1fr 100px;
}

header,footer {
  grid-column: 1 / -1;
}

Zusammenfassend kann gesagt werden: Das Holy-Grail-Layout ist ein Webseiten-Layout, das mehrere, trotz unterschiedlichen Inhalts gleich hohe Spalten hat.

Weiterführende Infomationen findet ihr auf: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert