Responsief webontwerp - rasterweergave

Wat is een rasterweergave?

Vele webpagina's zijn gebaseerd op een rasterweergave (grid-view), wat betekent dat de pagina is verdeeld in enkele kolommen:

Het gebruik van een rasterweergave is zeer nuttig bij het ontwerpen van webpagina's. Dit maakt het gemakkelijker om elementen op de pagina te plaatsen.

Een responsieve rasterweergave heeft meestal 12 kolommen met een totale breedte van 100%, en deze schalen en rekken uit wanneer het browservenstergrootte wordt aangepast.

Bouwen van een responsieve rasterweergave

Laten we beginnen met het bouwen van een responsieve rasterweergave.

Zorg eerst ervoor dat alle HTML-elementen box-sizing de eigenschap is ingesteld op border-boxDit zorgt ervoor dat de totale breedte en hoogte van het element inclusief de inschuifranden (vulling) en randen zijn.

Voeg de volgende code toe in CSS:

* {
  box-sizing: border-box;
}

Bezoek onze CSS Box Sizing Lees meer over de eigenschap box-sizing in dit hoofdstuk.

Hier is een voorbeeld van een eenvoudige responsieve webpagina, waarin twee kolommen zijn opgenomen:

25%
75%

Voorbeeld

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

Probeer het zelf

Als de webpagina alleen twee kolommen bevat, is het voorbeeld hierboven nogal goed.

Maar we willen een responsive gridweergave met 12 kolommen gebruiken om de webpagina beter te controleren.

Eerst moeten we het percentage van een kolom berekenen: 100% / 12 kolommen = 8.33%.

Daarna maken we een klasse voor elk van de 12 kolommen, namelijk class="col-" en een getal, dat definieert hoeveel kolommen dit sectie moet overschrijden:

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

Probeer het zelf

Alle kolommen moeten links vloeien en een binnenafstand van 15px hebben:

CSS:

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

Elke rij moet omgeven zijn door <div> In. Het totaal van de kolommen binnen de lijn moet altijd 12 zijn:

HTML:

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

Alle kolommen binnen de lijn vloeien naar links en trekken zich uit het paginaström uit, waardoor andere elementen worden geplaatst, of alsof deze kolommen niet bestaan. Om dit te voorkomen, voegen we een stijl toe om de stroom te wassen:

CSS:

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

We willen nog wat stijlen en kleuren toevoegen om het er aantrekkelijker uit te laten zien:

Voorbeeld

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

Probeer het zelf

Let op, wanneer u het browservenster verkleint tot een zeer kleine breedte, ziet de voorbeeldwebpagina er niet ideaal uit. In het volgende hoofdstuk zult u leren hoe u dit probleem oplost.