Gewusst wie: Gemischtes Spaltenlayout
Erfahren Sie, wie Sie mit CSS ein gemischtes Spaltenlayoutraster erstellen.
Erfahren Sie, wie Sie ein responsives Spaltenlayout erstellen, das je nach Bildschirmbreite zwischen 4 Spalten, 2 Spalten und Spalten voller Breite variiert.
Ändern Sie die Größe des Browserfensters, um den Responsive-Effekt zu sehen:
So erstellen Sie ein gemischtes Spaltenlayout
Schritt 1) HTML hinzufügen:
Beispiel
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
Schritt 2) CSS hinzufügen:
In diesem Beispiel erstellen wir ein vierspaltiges Layout, das auf Bildschirmen mit einer Breite von weniger als 900 Pixeln in zwei Spalten umgewandelt wird. Auf Bildschirmen mit einer Breite von weniger als 600 Pixel werden die Spalten jedoch übereinander gestapelt, anstatt nebeneinander zu schweben.
Beispiel
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout
instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns
stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Tipp: Gehen Sie zu unserem CSS-Website-Layout -Tutorial, um mehr über Website-Layouts zu erfahren.
Tipp: Gehen Sie zu unserem CSS Responsive Webdesign Tutorial, um mehr über responsives Webdesign und Grids zu erfahren.