Webmasterens værktøjskasse
{..} @ [..] |
Velkommen til koderne.dk
Responsive Grid system
Full (100%)
<div class="section group">
<div class="col grid_full">1 of 1</div>
</div>
Grid med 2 bokse (50%)
<div class="section group">
<div class="col grid_half">1 of 2</div>
<div class="col grid_half">1 of 2</div>
</div>
Grid med 3 bokse (33%)
<div class="section group">
<div class="col 1_of_3">1 of 3</div>
<div class="col 1_of_3">1 of 3</div>
<div class="col 1_of_3">1 of 3</div>
</div>
Grid med 4 bokse (25%)
<div class="section group">
<div class="col 1_of_4">1 of 4</div>
<div class="col 1_of_4">1 of 4</div>
<div class="col 1_of_4">1 of 4</div>
<div class="col 1_of_4">1 of 4</div>
</div>
Grid med 5 bokse (20%)
<div class="section group">
<div class="col 1_of_5">1 of 5</div>
<div class="col 1_of_5">1 of 5</div>
<div class="col 1_of_5">1 of 5</div>
<div class="col 1_of_5">1 of 5</div>
<div class="col 1_of_5">1 of 5</div>
</div>
Grid med 6 bokse
<div class="section group">
<div class="col 1_of_6">1 of 6</div>
<div class="col 1_of_6">1 of 6</div>
<div class="col 1_of_6">1 of 6</div>
<div class="col 1_of_6">1 of 6</div>
<div class="col 1_of_6">1 of 6</div>
<div class="col 1_of_6">1 of 6</div>
</div>CSS style for grid
Dette stykke kode skal indsættes i dit stylesheet eller som style i header. Benytter du vores Bootstrap er dette allerede en del af koden.
Det anbefales at der ikke pilles ved padding & margin i style koden
.section {clear: both; padding: 0px; margin: 0px;}
.col {display: block; float:left; margin: 1% 0 1% 1.6%;}
.col:first-child {margin-left: 0;}
.group:before, .group:after {content:""; display:table; }
.group:after {clear:both;}
/* GRIDS */
.grid_full {width: 100%;}
.4_of_5 {width: 79.68%;}
.3_of_4 {width: 74.6%;}
.2_of_3 {width: 66.13%;}
.3_of_5 {width: 59.36%;}
.grid_half {width: 49.2%;}
.2_of_5 {width: 39.04%;}
.1_of_3 {width: 32.26%;}
.1_of_4 {width: 23.8%;}
.1_of_5 {width: 18.72%;}
/* RESPONSIVE UNDER 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.1_of_4, grid_half, .3_of_4, .grid_full {width: 100%;}
}
Udlign kolloner
Dette stykke kode skal indsættes i dit stylesheet eller som style i header. Benytter du vores Bootstrap er dette allerede en del af koden.
Mobilvenlig hjemmeside
Responsive grid systems er en teknik, der gør det muligt for hjemmesider at tilpasse sig forskellige skærmstørrelser og orienteringer. Det gøres ved hjælp af et raster eller grid layout, der er opdelt i rækker og kolonner. Hver kolonne er defineret ved en bestemt bredde og kan indeholde forskellige elementer, såsom tekst, billeder. Fordelene ved responsive grid systems er mange. For det første gør det det nemmere at designe og opbygge hjemmesider, der kan tilpasses forskellige enheder og skærmstørrelser. Det betyder, at dit websted vil se godt ud på både store skærme og mobile enheder. Det kan også hjælpe med at forbedre brugeroplevelsen, da indholdet vil være mere tilgængeligt og let at læse på forskellige enheder. Det er også nemmere at vedligeholde og fremtidssikre hjemmesiden da responsive grid systems kan tilpasses til nye enheder og skærmstørrelser, som kommer på markedet. responsive grid systems er en praktisk og effektiv måde at designe og opbygge hjemmesider, der kan tilpasses forskellige enheder og skærmstørrelser, hvilket kan forbedre både brugeroplevelsen og søgemaskineoptimeringen.