响应式网页设计 - 网格视图

什么是网格视图？

许多网页都基于网格视图（grid-view），这意味着页面被分割为几列：

在设计网页时，使用网格视图非常有帮助。这样可以更轻松地在页面上放置元素。

响应式网格视图通常有 12 列，总宽度为 100%，并且在调整浏览器窗口大小时会收缩和伸展。

构建响应式网格视图

让我们开始构建响应式网格视图。

首先，确保所有 HTML 元素的 box-sizing 属性设置为 border-box这样就可以确保元素的总宽度和高度包括内边距（填充）和边框。

请在 CSS 中添加以下代码：

* {
  box-sizing: border-box;
}

请在我们的 CSS Box Sizing 在章节中阅读有关 box-sizing 属性的更多内容。

下面的例子展示了一个简单的响应式网页，其中包含两列：

25%
75%

eksempel

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

Prøv det selv

Hvis websiden kun indeholder to kolonner, er det gode eksempel her.

Men vi ønsker at bruge en responsiv rutenetvisning med 12 kolonner for bedre at kontrollere websiden.

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

Dernæst opretter vi en klasse for hvert af de 12 kolonner, nemlig class="col-" og et nummer, der definerer antallet af kolonner, dette afsnit skal krydse:

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

Alle disse kolonner skal flyde til venstre og have en indre margin på 15px:

CSS:

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

Hver række skal omgives af <div> I alt skal antallet af kolonner inden i teksten være 12:

HTML:

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

Alle kolonner inden i teksten flyder til venstre, og de kommer ud af sidestreamen, og andre elementer placeres, som om disse kolonner ikke eksisterer. For at undgå dette tilføjer vi en stil til at fjerne strømmen:

CSS:

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

Vi vil også tilføje nogle stilarter og farver, så det ser pænere 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

Bemærk, at websiden i eksemplerne ser ikke optimal ud, når browserens vindue justeres til meget lille bredde. I det næste kapitel vil du lære, hvordan du løser dette problem.