Responsiv webbdesign - Rastervy

Vad är en rastervy?

Många webbsidor är baserade på rastervy (grid-view), vilket innebär att sidan är uppdelad i flera kolumner:

Det är mycket användbart att använda rastervy när du designar en webbsida. Det gör det lättare att placera element på sidan.

En responsiv rastervy har vanligtvis 12 kolumner, en total bredd på 100%, och sträcker och kontraherar när browserfönstret justeras.

Bygg en responsiv rastervy

Låt oss börja bygga en responsiv rastervy.

Först, se till att alla HTML-elementen box-sizing Attributet är satt till border-boxDetta säkerställer att elementets totala bredd och höjd inkluderar inre marginaler (fyllning) och kantlinjer.

Lägg till följande kod i CSS:

* {
  box-sizing: border-box;
}

Vänligen besök vår CSS Box Sizing Läs mer om box-sizing-attributet i detta kapitel.

Följande exempel visar en enkel responsiv webbsida med två kolumner:

25%
75%

exempel

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

Prova själv

Om webbsidan bara innehåller två kolumner är exemplet bra.

Men vi vill använda en responsiv rutmönster vy med 12 kolumner för att bättre kontrollera webbsidan.

Först måste vi beräkna procentandelen för en kolumn: 100% / 12 kolumner = 8.33%.

Därefter skapar vi en klass för varje av de 12 kolumnerna, dvs class="col-" och ett nummer som definierar hur många kolumner denna sektion ska sträcka sig över:

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

Prova själv

Alla dessa kolumner bör flyta till vänster och ha en inre marginal på 15px:

CSS:

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

Varje rad bör omges av <div> Inuti. Antalet inre kolumner bör alltid summera till 12:

HTML:

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

Alla inre kolumner flyter till vänster och kommer ut ur sidofloden, vilket placerar andra element som om dessa kolumner inte existerade. För att förhindra detta lägger vi till en stil för att rengöra floden:

CSS:

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

Vi vill också lägga till några stilar och färger för att göra det mer attraktivt:

exempel

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

Prova själv

Observera att när du justerar bredden på webbläsarfönstret till mycket små mått, ser webbsidan i exemplen inte idealiskt ut. I nästa kapitel kommer du att lära dig hur du löser detta problem.