Responsive Web Design Grid

Indholdsfortegnelse

    Vis indholdsfortegnelse

Hvad er en Grid-View?

Mange websider er baseret på en grid-view, hvilket betyder, at siden er opdelt i kolonner:


Brug af en gittervisning er meget nyttig, når du designer websider. Det gør det nemmere at placere elementer på siden.


En responsiv gittervisning har ofte 12 kolonner og har en samlet bredde på 100 %, og den vil krympe og udvide, når du ændrer størrelsen på browservinduet.

Eksempel: Responsiv gittervisning:

Opbygning af en responsiv gittervisning

Lad os begynde at opbygge en responsiv grid-view.

Sørg først for, at alle HTML-elementer har egenskaben box-sizing indstillet til border-box. Dette sikrer, at polstring og kant er inkluderet i den samlede bredde og højde af elementerne.

Tilføj følgende kode i din CSS:

* {
  box-sizing: border-box;
}

Læs mere om egenskaben box-sizing i vores CSS Box Sizing-kapitel.

Følgende eksempel viser en simpel responsiv webside med to kolonner:

25%
75%

Eksempel

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

Prøv det selv →

<!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>

Eksemplet ovenfor er fint, hvis websiden kun indeholder to kolonner.

Vi ønsker dog at bruge en responsiv grid-view med 12 kolonner for at have flere kontrol over websiden.

Først skal vi beregne procentdelen for en kolonne: 100%/12 kolonner = 8,33 %.

Så vi lav en klasse for hver af de 12 kolonner, class="col-" og et tal definere hvor mange kolonner sektionen skal strække sig over:

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

Prøv det selv →

<!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 disse kolonner skal være svævende til venstre og have en polstring på 15px:

CSS:

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

Hver række skal pakkes ind i en

. Antallet af kolonner inde i en række bør altid lægge op til 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Kolonnerne inde i en række er alle svævende til venstre og er derfor taget ud af sidens flow, og andre elementer vil blive placeret, som om kolonnerne ikke eksisterer. For at forhindre dette vil vi tilføj en stil, der rydder flowet:

CSS:

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

Vi vil også tilføje nogle stilarter og farver for at få det til at se bedre ud:

Eksempel

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

Prøv det selv →

<!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>

Bemærk, at websiden i eksemplet ikke ser godt ud, når du ændrer størrelsen på browservinduet til en meget lille bredde. I det næste kapitel lærer du, hvordan du løser det.