Seuraavat ohjeet kuvaavat pyhän graalin asettelun toteuttamista CSS-ruudukon kanssa.
Perusasetukset
Luo minimaalinen HTML-dokumentti. Lisää seuraava koodi teksti- tai html-editoriin.
Minimaalinen HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
Hello, world
</body>
</html>
Tallenna tiedosto nimellä index.html.
Avaa index.html verkkoselaimessa. Avaa tiedosto uudella verkkoselaimen välilehdellä painamalla Ctrl+O (Komento+O macOS:ssä), valitse index.html. Voit myös vetää ja pudottaa index.html:n selainikkunaan.
Minimaalinen CSS
Luo uusi tekstitiedosto. Lisää tyhjään tiedostoon seuraava koodi.
html {
width: 100%; /* 100% width of parent (root) element */
height: 100vh; /* 100% height of viewport */
background: rgb(0, 0, 0, 0.1); /* 10% opacity black (very light gray) */
font-size: 1.0em; /* root font size */
}
body {
margin: 0; /* no margin at edge of content */
height: 100%; /* 100% height of parent (html) element */
}
Tallenna tämä tyylitaulukko nimellä index.css samaan paikkaan kuin index.html.
Html-elementin leveydeksi määritetään 100 % (käytettävissä olevasta vaakatilasta), jotta voidaan ottaa huomioon pystysuoran vierityspalkin mahdollisuus. Jos html-elementti on 100vw (100 % näkymän leveydestä), sivun sisältö voi ulottua pystysuoran vierityspalkin alle ja piiloutua sen alle.
Lisää index.html:ssä seuraava rivi
-elementtiin.<link rel="stylesheet" href="https://www.computerhope.com/issues/ch002064.htm/index.css">
Esimerkiksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="https://www.computerhope.com/issues/ch002064.htm/index.css">
</head>
<body>
Hello, world
</body>
</html>
Lataa index.html uudelleen selaimeen. Huomaa, että tausta on vaaleanharmaa ja sisältö "Hei, maailma" koskettaa näkymän vasenta yläreunaa.
Määritä ruudukko
Lisää seuraavat rivit index.css-tiedostoon.
Grid kontti CSS
div.container {
display: grid;
width: 100%;
height: 100%;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 3fr 1fr;
grid-template-areas:
"head head head"
"panleft mainbody panright"
"foot foot foot";
}
Ruudukon säiliö on ruudukon pääelementti. Sen attribuutit koskevat koko ruudukkoa.
Seuraavassa on kuvaus tässä käytetyistä ruudukkosäiliötyyleistä.
| CSS | Kuvaus |
|---|---|
| div.container { tyyli...} |
Käytä suluissa lueteltuja tyylejä kaikkiin HTML-koodin -elementteihin, joilla on säilöluokka, esimerkiksi:
<div class="container ..."> Luokan nimen säilö on mielivaltainen. |
| näyttö: ruudukko; |
Aseta tämä elementti uuden ruudukon ylätasoksi. Kaikki ruudukon kohteet näkyvät tämän elementin laatikon reunassa. |
| leveys: 100 %; korkeus: 100%; |
Aseta elementin laatikon rajaksi 100 % pääelementin ( ) leveydestä ja korkeudesta. |
| grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 3fr 1fr; |
Määritä ruudukon kolme oletussarakkeen leveyttä vasemmalta oikealle ja kolme oletusrivin korkeutta ylhäältä alas. Yksikkö fr ("fraktioyksikkö") on erityinen CSS Grid -elementeille. F:n arvo lasketaan ruudukon leveydeksi (sarakkeille) tai korkeudeksi (riveille) jaettuna pyydettyjen fr-yksiköiden kokonaismäärällä. Esimerkiksi 300 pikseliä leveässä ruudukossa, jossa on kolme saraketta, jotka on määritelty 1fr, 2fr ja 3fr, sarakkeiden leveydet ovat 50, 100 ja 150 pikseliä. Nfr:n sarake on aina n kertaa leveämpi kuin 1fr sarake. Tässä asettelussa keskielementti (päärunko) on kaksinkertainen kunkin paneelin leveys (2fr) ja kolminkertainen ylä- ja alatunnisteen korkeus (3fr). Paneelit ovat 1/(1+2+1)=1/4 ruudukon leveydestä. Ylä- ja alatunniste ovat 1/(1+3+1)=1/5 ruudukon korkeudesta. |
| grid-template-alueet: "pää pää pää" "panleft mainbody panright" "jalka jalka jalka"; |
Grid-template-areas-määrite koostuu joukosta lainausmerkkejä, yksi jokaiselle ruudukon riville. Jokainen merkkijono sisältää yhden sanan ruudukon saraketta kohden. Jokainen sana on sen ruudukon alueen nimi, joka sijaitsee ruudukon solussa. Jos nimi toistetaan, nimetty alue kattaa nämä ruudukon solut. Hajautettujen solujen tulee muodostaa suorakulmio. CSS-koodimme sanoo: "Kaikki kolme ensimmäisen rivin solua muodostavat pääruudukon alueen. Seuraavalla rivillä on alue nimeltä panleft vasemmassa sarakkeessa, mainbody keskisarakkeessa ja panright oikeassa sarakkeessa. Kaikki kolme solua alarivi muodostaa alueen nimeltä jalka." Huomaa, että merkkijonot erotetaan välilyönnillä tai rivinvaihdolla, ei pilkulla. |
Ruudukkokohde CSS
Jokaisella ruudukkokohdalla on nimetty ruudukkoalue. Ruudukkoalue on yksi tai useampi vierekkäinen solu, joka muodostaa suorakulmion, kuten ruudukon säilömallissa on nimetty.
Graalin asettelussa on viisi ruudukkoaluetta: otsikko (aluepää), vasen paneeli (aluepaneeli vasemmalla), päärunko (alue päärunko), oikea paneeli (alue panright) ja alatunniste (aluejalka). Lisää seuraavat rivit tiedoston loppuun index.css-tiedostoon.
div.header {
background: rgb(0, 0, 0, 0.2); /* 20% black */
grid-area: head; /* head corresponds to name in template */
}
div.footer {
background: rgb(0, 0, 0, 0.2);
grid-area: foot;
}
div.panel { /* div elements with "panel" class */
background: rgb(0, 0, 0, 0.1); /* 10% black */
}
div.panel.left { /* with both "panel" and "left" class */
grid-area: panleft;
}
div.panel.right {
grid-area: panright;
}
div.mainbody {
grid-area: mainbody;
}
Tallenna index.css.
Grid HTML -elementtejä
Lisää viisi
<body>
<div class="container">
<div class="header">Header</div>
<div class="panel left">Left panel</div>
<div class="mainbody">Main body</div>
<div class="panel right">Right panel</div>
<div class="footer">Footer</div>
</div>
</body>
Tallenna index.html. Testaa ruudukko lataamalla index.html uudelleen selaimeen.
Muuta selainikkunan kokoa ja ruudukon mittasuhteet mukautuvat ikkunan kokoon.
Aseta ruudukkoalueiden koko
Määritä ylä- ja alatunnisteen korkeus ja paneeleille leveys.
Avaa index.css ja etsi nämä kaksi riviä.
grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 3fr 1fr;
Korvaa ne seuraavilla riveillä:
grid-template-columns: 10rem auto 10rem; grid-template-rows: 5rem auto 5rem;
Tallenna index.css.
Sivupaneelien oletusleveys on nyt 10 rem, ja ylä- ja alatunnisteen oletuskorkeus on 5 rem. Päärunko (keskiruudukkoalue) on asetettu automaattiseksi, mikä tarkoittaa, että mitat vievät kaiken käytettävissä olevan tilan.
Rem-yksikkö ("root em") perustuu asiakirjan juurifontin kokoon. Tässä esimerkissä se määritellään index.css:ssä html-elementtityylillä:
html {
...
font-size: 1.0em;
Rem-yksikkö on yhtä suuri kuin tämä em-arvo. Esimerkiksi html { font-size: 1.2em; } skaalaa kaikki rem-koot 120 %:lla niiden oletusarvosta.
Em-yksikön tarkka koko riippuu fontista. Yleisenä nyrkkisääntönä 1em vastaa 16 pikseliä.
Lataa index.html uudelleen selaimeen ja muuta ikkunan kokoa. Ylä- ja alatunnisteen korkeus pysyy kiinteänä ja paneelit kiinteänä leveänä.
Aseta mobiiliskaalaus
Nykyaikaiset verkkosivut tulee suunnitella ensisijaisesti mobiililaitteille, eli suunnittelussa tulee priorisoida miltä ne näyttävät mobiililaitteilla.
Selaimen kehittäjätyökalujen avulla dokumenttia voi katsella kuin mobiililaitteella.
Paina Chromessa Ctrl+Shift+I ja napsauta Vaihda laite -työkalurivin painiketta.
Paina Firefoxissa Ctrl+Shift+O ja napsauta Responsive Design Mode -painiketta.
Oletuksena skaalaus on erittäin pieni mobiilissa.
Jos haluat tekstin luettavan mobiililaitteissa, lisää tämä rivi index.html-tiedoston
-elementtiin.<meta name="viewport" content="width=device-width, initial-scale=1">
Tämä rivi kertoo selaimen säätämään asteikkoa sivua katselevan laitteen mukaan.
Lataa mobiiliesikatselu uudelleen.
Skaalattu teksti on luettavampaa ja vastaa työpöytäselainta.
On kuitenkin uusi ongelma. Kiinteäleveät paneelit "puristavat" päärunkoa. Mobiililaitteen muotokuvatilassa ei ole tilaa paneeleille. Seuraavien osien vaiheet ratkaisevat tämän ongelman.
Tee siitä reagoiva
Kun määritetään ruudukkomallia, ruudukon riveille voidaan antaa nimiä.
Ruudukkoviivat muodostavat jokaisen rivin ja sarakkeen rajat, mukaan lukien ruudukon reunat. Ruudukkossa, jossa on x saraketta ja y riviä, on x+1 sarakeriviä, y+1 riviriviä ja x+y+2 yhteensä ruudukon riviä.
Tällä hetkellä ruudukkomme näyttää seuraavalta kaaviolta.
Ruudukko sisältää kolme saraketta, jotka määritellään sarakkeiden koon mukaan.
grid-template-columns: 10rem auto 10rem;
Valinnaisesti tämä määritelmä voi sisältää myös rivien nimiä.
Anna ruudukon rivien nimet
Mallin määrittelyssä rivien nimet on suljettu suluissa. Ne voidaan määrittää kokoarvon eteen, väliin tai jälkeen.
Muuta index.css-tiedostossa grid-template-columns-arvot seuraavaksi.
grid-template-columns: [left] 10rem auto 10rem [right];
Nimet vasemmalla ja oikealla viittaavat nyt ruudukon pystysuuntaisiin rajaviivoihin.
Nämä nimet voivat määrittää uudelleen ruudukkoalueen reunan seuraavassa osassa kuvatulla tavalla.
Ehdollinen CSS mediakyselyllä
Mediakysely on ehdollinen CSS-lohko, joka on luotu @media CSS -avainsanalla. @media-lohkon tyylejä käytetään vain, kun katselulaitetta koskevat määritellyt ehdot ovat tosia.
Mediakyselyt voivat käyttää tyylejä näkymän koon perusteella, joten jos käyttäjä muuttaa selainikkunansa kokoa tai kääntää puhelintaan, CSS vastaa vastaavasti.
Mediakyselyn yleinen muoto on:
@media media-type and (media-feature-rule) {
style ...
}
Lisää seuraava mediakysely index.css-tiedoston loppuun.
@media screen and (max-width: 50rem) { /* if viewport width < 50rem */
div.panel.left {
grid-column-end: left; /* left panel stops at left edge */
}
div.panel.right {
grid-column-start: right; /* right panel starts at right edge */
}
div.panel {
display: none; /* neither panel is displayed */
}
div.mainbody {
grid-column-start: left; /* mainbody starts at left edge */
grid-column-end: right; /* mainbody ends at right edge */
}
}
Tallenna index.css. Lataa index.html uudelleen selaimeen ja muuta ikkunan kokoa. Kun ikkunasta tulee kapeampi kuin 50 rem (noin 800 pikseliä), paneelit katoavat ja päärunko laajenee kattamaan kaikki kolme saraketta.
Mobiililaitteissa paneelit näytetään vain vaakatilassa.
Kun mobiililaite käännetään pystytilaan, paneelit piilotetaan ja päärunko kattaa laitteen leveyden.
Lopullinen CSS ja HTML
Lopullinen CSS lisää kolme lisäominaisuutta.
- Ristikkosäiliöllä on vähimmäiskorkeus, mikä estää alatunnistetta ja ylätunnistetta kokonaan romahtamasta.
- Päärunkoelementin leveys on kiinteä, mikä estää kehon sisältöä virtaamasta uudelleen.
- Päärunkoelementti on tasattu keskelle ruudukkoalueellaan.
Lopullinen index.css
html {
width: 100%; /* 100% width of parent (root) element */
height: 100vh; /* 100% height of viewport */
background: rgb(0, 0, 0, 0.1); /* 10% opacity black (very light gray) */
font-size: 1.0em; /* our root font size */
}
body {
margin: 0; /* content goes to edge of viewport */
height: 100vh; /* and spans height of viewport */
}
div.container {
min-height: 25rem; /* mainbody height never squishes < 25rem */
display: grid;
width: 100%;
height: 100%;
grid-template-columns:
[left] 10rem auto 10rem [right];
grid-template-rows:
[top] 5rem auto 5rem [bottom];
grid-template-areas:
"head head head"
"panleft mainbody panright"
"foot foot foot";
}
div.header {
background: rgb(0, 0, 0, 0.2); /* 20% black */
grid-area: head; /* head corresponds to name in template */
}
div.footer {
background: rgb(0, 0, 0, 0.2);
grid-area: foot;
}
div.panel { /* div elements with "panel" class */
background: rgb(0, 0, 0, 0.1); /* 10% black */
}
div.panel.left { /* with both "panel" and "left" class */
grid-area: panleft;
}
div.panel.right {
grid-area: panright;
}
div.mainbody {
grid-area: mainbody;
width: 30rem; /* mainbody width is fixed */ justify-self: center; /* and always centered in grid area */
}
@media screen and (max-width: 50rem) { /* if viewport width < 50rem */
div.panel.left {
grid-column-end: left; /* left panel stops at left edge */
}
div.panel.right {
grid-column-start: right; /* right panel starts at right edge */
}
div.panel {
display: none; /* neither panel is displayed */
}
div.mainbody {
grid-column-start: left; /* mainbody starts at left edge */
grid-column-end: right; /* mainbody ends at right edge */
}
}
Lopullinen index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="panel left">Left panel</div>
<div class="mainbody">Main Body</div>
<div class="panel right content">Right panel</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
