Responsives Webdesign - Grid-Ansicht
Was ist eine Grid-Ansicht?
Viele Webseiten basieren auf einer Rasteransicht, was bedeutet, dass die Seite in Spalten unterteilt ist:
Die Verwendung einer Rasteransicht ist beim Entwerfen von Webseiten sehr hilfreich. Es erleichtert das Platzieren von Elementen auf der Seite.
Eine responsive Rasteransicht hat oft 12 Spalten und eine Gesamtbreite von 100 % und wird kleiner und größer, wenn Sie die Größe des Browserfensters ändern.
Beispiel: Responsive Grid-Ansicht
Erstellen einer responsiven Grid-Ansicht
Beginnen wir mit dem Aufbau einer responsiven Grid-Ansicht.
Stellen Sie zunächst sicher, dass für alle HTML-Elemente die box-sizingEigenschaft auf festgelegt ist
border-box. Dadurch wird sichergestellt, dass Polsterung und Umrandung in der Gesamtbreite und -höhe der Elemente enthalten sind.
Fügen Sie den folgenden Code in Ihr CSS ein:
* {
box-sizing: border-box;
}
Lesen Sie mehr über die box-sizingEigenschaft in unserem Kapitel CSS Box Sizing .
Das folgende Beispiel zeigt eine einfache responsive Webseite mit zwei Spalten:
Beispiel
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Das obige Beispiel ist in Ordnung, wenn die Webseite nur zwei Spalten enthält.
Wir möchten jedoch eine responsive Grid-Ansicht mit 12 Spalten verwenden, um mehr Kontrolle über die Webseite zu haben.
Zuerst müssen wir den Prozentsatz für eine Spalte berechnen: 100 % / 12 Spalten = 8,33 %.
Dann erstellen wir eine Klasse für jede der 12 Spalten class="col-"und eine Zahl, die definiert, wie viele Spalten der Abschnitt umfassen soll:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
Alle diese Spalten sollten nach links schweben und eine Auffüllung von 15 Pixel haben:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Jede Zeile sollte in eine eingeschlossen werden <div>. Die Anzahl der Spalten innerhalb einer Zeile sollte immer 12 ergeben:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Die Spalten innerhalb einer Zeile schweben alle nach links und werden daher aus dem Fluss der Seite herausgenommen, und andere Elemente werden so platziert, als ob die Spalten nicht vorhanden wären. Um dies zu verhindern, fügen wir einen Stil hinzu, der den Fluss löscht:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
Wir möchten auch einige Stile und Farben hinzufügen, damit es besser aussieht:
Beispiel
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
Beachten Sie , dass die Webseite im Beispiel nicht gut aussieht, wenn Sie die Größe des Browserfensters auf eine sehr kleine Breite ändern. Im nächsten Kapitel erfahren Sie, wie Sie das beheben können.