Responsiivinen Web Design Grid

Sisällysluettelo

    Näytä sisällysluettelo

Mikä on ruudukkonäkymä?

Monet verkkosivut perustuvat ruudukkonäkymään, mikä tarkoittaa, että sivu on jaettu sarakkeisiin:


Ruudukkonäkymän käyttäminen on erittäin hyödyllistä web-sivujen suunnittelussa. Se helpottaa elementtien sijoittamista sivulle.


Responsiivisessa ruudukkonäkymässä on usein 12 saraketta, ja sen kokonaisleveys on 100 %, ja se kutistuu ja laajenee, kun muutat selainikkunan kokoa.

Esimerkki: Responsiivinen ruudukkonäkymä:

Responsiivisen ruudukkonäkymän luominen

Aloitetaan reagoivan ruudukkonäkymän rakentaminen.

Varmista ensin, että kaikkien HTML-elementtien box-sizing-ominaisuuden arvo on border-box. Tämä varmistaa, että pehmusteet ja reunat sisältyvät kokonaisleveyteen ja -korkeuteen elementit.

Lisää seuraava koodi CSS:ään:

* {
  box-sizing: border-box;
}

Lue lisää box-sizing-ominaisuudesta CSS-laatikon koko -luvusta.

Seuraava esimerkki näyttää yksinkertaisen responsiivisen verkkosivun, jossa on kaksi saraketta:

25%
75%

Esimerkki

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

Kokeile itse →

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

Yllä oleva esimerkki on hyvä, jos verkkosivu sisältää vain kaksi saraketta.

Haluamme kuitenkin käyttää responsiivista ruudukkonäkymää, jossa on 12 saraketta, jotta meillä olisi enemmän hallita verkkosivua.

Ensin meidän on laskettava yhden sarakkeen prosenttiosuus: 100%/12 saraketta = 8,33 %.

Sitten me tee yksi luokka kullekin 12 sarakkeesta, class="col-" ja numero määrittää kuinka monta saraketta osion tulee kattaa:

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

Kokeile itse →

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

Kaikkien näiden sarakkeiden tulee kellua vasemmalle, ja niiden täyte on 15 kuvapistettä:

CSS:

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

Jokainen rivi tulee kääriä <div>-merkillä. Sarakkeiden määrä rivin sisällä tulee aina lisätä enintään 12:

HTML :

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

Kaikki rivin sisällä olevat sarakkeet kelluvat vasemmalle ja ovat siksi poistetaan sivun virtauksesta ja muut elementit sijoitetaan ikään kuin sarakkeita ei olisi olemassa. Tämän estämiseksi teemme lisää tyyli, joka tyhjentää kulkua:

CSS:

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

Haluamme myös lisätä joitakin tyylejä ja värejä, jotta se näyttää paremmalta:

Esimerkki

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

Kokeile itse →

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

Huomaa, että esimerkin verkkosivu ei näytä hyvältä, kun muutat selainikkunan koon hyvin pieneksi. Seuraavassa luvussa opit korjaamaan sen.