CSS-Dokumente

Mehrspaltiges CSS-Layout

16/03/2023

Um Spalten in einer HTML-Seite zu erstellen, können Sie die Seite mithilfe der CSS-Eigenschaft column-count in Spalten aufteilen.

Verwenden von Spaltenzählungen mit Auflistungs-Tags

<style>
  #elements-list {
    column-count: 4; 
    padding-left: 0;
  }
</style>

<ul id="elements-list">
    <li>1 Hydrogen</li> 
    <li>2 Helium/li> 
    <li>3 Lithium</li> 
    <li>4 Beryllium</li> 
    <li>5 Boron</li> 
    <li>6 Carbon</li> 
    <li>7 Nitrogen</li> 
    <li>8 Oxygen</li> 
    <li>9 Fluorine</li> 
    <li>10 Neon</li>
    <li>11 Sodium</li>
</ul>

Liste aufgeteilt in Spalten:

1 Hydrogen
2 Helium
3 Lithium
4 Beryllium
5 Boron
6 Carbon
7 Nitrogen
8 Oxygen
9 Fluorine
10 Neon
11 Sodium

Verwenden von Spaltenzahlen in Absätzen

<style>
   .p-columns {
      column-count: 3;
   }
   p:first-child {
      margin: 0;
   }
</style>

<div class="p-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Absätze in Spalten unterteilt

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS-Eigenschaften, die mit der Spaltenanzahl funktionieren

Die folgenden CSS-Eigenschaften werden mit der Eigenschaft column-count verwendet, sie können nicht alleine verwendet werden.

column-rule: Gibt die Grenzen zwischen Spalten an.
column-gap: Gibt den Abstand zwischen den Spalten an.
column-width: Gibt die Breite der Spalten an.

column-rule

<style>
   .p-columns {
      column-count: 3;
      column-rule: solid;
   }
   p:first-child {
      margin: 0;
   }
</style>

<div class="p-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Absätze in Spalten aufgeteilt mit column-rule:

column-rule Sub-CSS-Eigenschaften

column-rule-color: Gibt die Farbe des Trennzeichens an.
column-rule-style: Gibt den Stil des Trennzeichens an.
column-rule-width: Gibt die Breite des Trennzeichens an.
column-rule: dashed
column-rule: dotted
column-rule: double
column-rule: groove
column-rule: hidden
column-rule: medium
column-rule: ridge
column-rule: solid

Indem nur die Eigenschaft column-rule angegeben wird, können die Werte column-rule-color, colum-rule-style und column-rule-width mit einem Stück Code zugewiesen werden.

CSS Column Rule

column-gap

<style>
   .p-columns {
      column-count: 3;
      column-rule: solid;
      column-gap: 4rem;
   }
   p:first-child {
      margin: 0;
   }
</style>

<div class="p-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Absätze werden mit column-rule und column-gap in Spalten aufgeteilt:

column-width

Mit der CSS-Eigenschaft column-width wird die Breite jeder Spalte angegeben, wenn die Breite zu groß angegeben wird, kann sich die Anzahl der Spalten je nach Viewport-Bereich ändern. column-count: 3; und column-width: 250px; Wenn angegeben, können 3 Spalten in einem 1000 Pixel breiten Bereich erscheinen. Wenn jedoch ein Element mit den gleichen CSS-Eigenschaften auf eine 700 Pixel breite Fläche reduziert wird, reduziert sich die Anzahl der Spalten auf 2.

CSS-Dokumente

CSS-Elemente

CSS-Dokumente

Mehrspaltiges CSS-Layout

Verwenden von Spaltenzählungen mit Auflistungs-Tags

Verwenden von Spaltenzahlen in Absätzen

CSS-Eigenschaften, die mit der Spaltenanzahl funktionieren

column-rule

column-rule Sub-CSS-Eigenschaften

column-gap

column-width

CSS-Medienabfrage und Responsive Design

Shorthand CSS und Longhand CSS

Mehrspaltiges CSS-Layout

CSS-Kommentare

CSS Cursor

CSS-Hierarchie

Welche Arten von CSS-Strukturen gibt es?