Einfaches 3-Spalten-Layout mit 3 verschiedenen CSS-Techniken
von Oliver Richter (Kommentare: 0)
Wie lässt sich ein 3-Spalten-Layout mit CSS umsetzen. Hier möchte ich 3 einfache Techniken vorstellen.
In den Beispielen verwende ich zur besseren Darstellung und Erkennbarkeit etwas zusätzlichen CSS-Code (Hinzufügen von Innenabständen und Hintergrundfarben). Zudem gibt es bei 820 Pixel Anzeigebreite einen Layout-Breaking-Point, bis zu dem die 3 Spalten untereinander dargestellt werden.
Hier sehen Sie die 3 (4) Beispiele in Aktion.
Mithilfe von CSS-Grids
Dies ist eine sehr einfache und übersichtliche Variante, ein 3-Spalten-Raster zu erzeugen. Durch Definition des grid-template lässt sich die Anordnung der 3 Spalten jederzeit beliebig anpassen. Die Angabe der grid-gap ermöglicht einen Abstand zwischen den Grid-Blöcken zu definieren. Mehr Infos dazu finden Sie z.B. unter https://www.w3schools.com/css/css_grid.asp.
<html>
<head>
<style type="text/css">
#wrapper { display: grid; grid-template-columns: 30% 40% 30%; grid-gap: 0px; grid-template-areas: 'left main right'; }
#wrapper #main { grid-area: main; }
#wrapper #left { grid-area: left; }
#wrapper #right { grid-area: right; }
@media screen and (max-width: 819px) {
#wrapper { grid-template-columns: 100%; grid-template-areas: 'main' 'left' 'right'; }
}
/* Nur zur besseren Darstellung - nicht relevant fuer das Layout */
#wrapper #left, #wrapper #right, #wrapper #main { box-sizing: border-box; padding: 5px; background: lightblue; }
#wrapper #main { background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<main id="main">MAIN</main>
<aside id="left">LEFT</aside>
<aside id="right">RIGHT</aside>
</div>
</body>
</html>Mithilfe von CSS-Flex
Auch CSS-Flex / Flexboxen erlauben sehr viele Möglichkeiten der Darstellung. Mithilfe von order lässt sich auch hier die Reihenfolge genau festlegen. Die hier aufgezeigte Lösung ist nur eine sehr einfache Variante, denn CSS-Flex ist sehr umfangreich, weitere Informationen finden Sie z.B. auf https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
<html>
<head>
<style type="text/css">
#wrapper { display: flex; flex-direction: row; }
#wrapper #main { order: 2; width: 40%; }
#wrapper #left { order: 1; width: 30%; }
#wrapper #right { order: 3; width: 30%; }
@media screen and (max-width: 819px) {
#wrapper { flex-direction: column; }
#wrapper #left, #wrapper #right, #wrapper #main { width: 100%; }
#wrapper #main { order: 0; }
}
/* Nur zur besseren Darstellung - nicht relevant fuer das Layout */
#wrapper #left, #wrapper #right, #wrapper #main { box-sizing: border-box; padding: 5px; background: lightblue; }
#wrapper #main { background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<main id="main">MAIN</main>
<aside id="left">LEFT</aside>
<aside id="right">RIGHT</aside>
</div>
</body>
</html>Mithilfe von CSS-Float (und Positionierung)
Die folgenden beiden Varianten sind schon etwas in die Jahre gekommen und würde ich heute - mit Blick auf die anderen beiden, oben genannten Möglichkeiten - nicht mehr empfehlen. Der Vollständigkeit halber möchte ich sie hier aber auch noch aufführen.
In diesen Beispielen ist die Reihenfolge der Blöcke im HTML-Code relevant. Beim ersten Beispiel müssen sich die linke und rechte Spalte vor dem der Main-Spalte befinden. Handelt es sich der bei der linken und rechten Spalte jeweils um Sidebars mit weniger relevantem Content, ist diese Variante ungeeignet für die Darstellung (z.B. auf kleinen Bildschirmen).
Das zweite Beispiel (ganz unten) platziert dagegen die Hauptspalte (main) an oberster Position.
Variante 1
<html>
<head>
<style type="text/css">
#wrapper:after { display: block; content: " "; clear: both; }
#wrapper #left { float: left; width: 30%; }
#wrapper #right { float: right; width: 30%; }
#wrapper #main { margin: 0% 30%; }
@media screen and (max-width: 819px) {
#wrapper #left, #wrapper #right { float: none; width: 100%; }
#wrapper #main { margin: 0; }
}
/* Nur zur besseren Darstellung - nicht relevant fuer das Layout */
#wrapper #left, #wrapper #right, #wrapper #main { box-sizing: border-box; padding: 5px; background: lightblue; }
#wrapper #main { background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<aside id="left">LEFT</aside>
<aside id="right">RIGHT</aside>
<main id="main">MAIN</main>
</div>
</body>
</html>Variante 2
<html>
<head>
<style type="text/css">
#wrapper { position: relative; z-index: 1; }
#wrapper:after { display: block; content: " "; clear: both; }
#wrapper #left { position: absolute; left: 0; width: 30%; float: left; }
#wrapper #right { width: 30%; float: left; }
#wrapper #main { float: left; width: 40%; margin: 0 0 0 30%; }
@media screen and (max-width: 819px) {
#wrapper #left, #wrapper #right, #wrapper #main { position: relative; float: none; margin: 0; right: 0; width: 100%; }
}
/* Nur zur besseren Darstellung - nicht relevant fuer das Layout */
#wrapper #left, #wrapper #right, #wrapper #main { box-sizing: border-box; padding: 5px; background: lightblue; }
#wrapper #main { background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<main id="main">MAIN</main>
<aside id="left">LEFT</aside>
<aside id="right">RIGHT</aside>
</div>
</body>
</html>Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
Einen Kommentar schreiben