Responsives Webdesign-Raster


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


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 die Platzierung 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 Responsive Grid-Ansicht

Beginnen wir mit dem Aufbau einer responsiven Rasteransicht.

Stellen Sie zunächst sicher, dass für alle HTML-Elemente die Eigenschaft box-sizing festgelegt ist Grenzfeld. Dadurch wird sichergestellt, dass die Polsterung und der Rand in die Gesamtbreite und -höhe einbezogen werden die Elemente.

Fügen Sie den folgenden Code in Ihr CSS ein:

* {
  box-sizing: border-box;
}

Lesen Sie mehr über die Eigenschaft box-sizing in unserem Kapitel zur CSS-Boxgröße.

Das folgende Beispiel zeigt eine einfache responsive Webseite mit zwei Spalten:

25%
75%

Beispiel

.menu {
  width: 25%;
  
float: left;
}
.main {
  width: 75%;
  
float: left;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid red;
  padding: 15px;
}

.menu {
  width: 25%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.main {
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="main">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>


Das obige Beispiel ist in Ordnung, wenn die Webseite nur zwei Spalten enthält.

Wir möchten jedoch eine responsive Rasteransicht mit 12 Spalten verwenden, um mehr zu haben Kontrolle über die Webseite.

Zuerst müssen wir den Prozentsatz für eine Spalte berechnen: 100 %/12 Spalten = 8,33 %.

Dann wir Erstellen Sie eine Klasse für jede der 12 Spalten, class="col-" und eine Zahl Definieren, 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%;}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid red;
  padding: 15px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.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%;}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">

<div class="col-3">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="col-9">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</div>

</body>
</html>


Alle diese Spalten sollten nach links schweben und einen Abstand von 15 Pixeln haben:

CSS:

[class*="col-"] {
  float: left;
  
padding: 15px;
  border: 1px solid red;
}

Jede Zeile sollte in einen <div> eingeschlossen sein. Die Anzahl der Spalten innerhalb einer Zeile sollte sich 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 sind daher werden aus dem Fluss der Seite genommen und andere Elemente werden so platziert, als ob die Spalten nicht vorhanden wären. Um dies zu verhindern, werden wir Fügen Sie einen Stil hinzu, der den Fluss klärt:

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;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

.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%;}

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;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>Resize the browser window to see how the content respond to the resizing.</p>
  </div>
</div>

</body>
</html>


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.