{"id":406,"date":"2020-03-10T23:00:13","date_gmt":"2020-03-10T23:00:13","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=406"},"modified":"2020-03-11T14:29:55","modified_gmt":"2020-03-11T14:29:55","slug":"kohanduv-disain","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/kohanduv-disain\/","title":{"rendered":"Kohanduv disain"},"content":{"raw":"Erinevate ekraanisuuruste aga ka erinevate seadmetega kohandumiseks pakub CSS mitmeid erinevaid vahendeid.\r\n\r\nKohandumist v\u00f5ib jagada kahte kategooriasse:\r\n<ul>\r\n \t<li><em>adaptive<\/em> \u2013 adaptiivne ehk kohanev. Sellisel juhul muutub veebilehe elementide suurus ja paigutus astmeliselt, sammude kaupa. M\u00e4\u00e4ratakse justkui murdepunktid (<em>breakpoints<\/em>), mis m\u00e4\u00e4ravad l\u00e4vendid, mille puhul rakendub teistsugune kujundus. Sellise kohandamise peamine t\u00f6\u00f6riist on meediap\u00e4ringud (<em>media queries<\/em>). Samuti sobib siia kategooriasse HTML <code>&lt;picture&gt;<\/code> element, mis muudab pildi kohanduvateks.<\/li>\r\n \t<li><em>responsive<\/em> \u2013 kiirelt reageeriv, operatiivne. Sellisel juhul on kujundus sujuvalt muutuv (<em>fluid<\/em>). Kiirelt reageeriva (<em>responsive<\/em>) disaini elementide paigutamise jaoks pakub CSS kaht erinevat vahendite komplekti, millega veebilehe elemente paigutada: <em>flexbox<\/em> ja <em>grid<\/em>. <em>Flexbox<\/em> paigutab elemente \u00fchesuunaliselt (horisontaalselt v\u00f5i vertikaalselt), <em>grid<\/em> aga kahesuunaliselt. T\u00f5eliselt kohanduva kujunduse loomiseks kasutatakse neid koos.<\/li>\r\n<\/ul>\r\nOluline vahend kohanduva disaini jaoks on ka vaateava (<em>viewport<\/em>), mida kasutatakse lehe elementide suuruse m\u00e4\u00e4ramiseks.\r\n<h1>Meediap\u00e4ringud<\/h1>\r\nSamuti nagu HTML v\u00f5imaldab m\u00e4\u00e4rata erinevaid stiililehti (CSS faile) erinevate seadmete jaoks, saab ka CSS vahenditega defineerida erinevaid kujundusi erinevatel v\u00e4ljundseadmetel kasutamiseks.\r\n\r\nSelleks saab kasutada <em>@media<\/em> reeglit (<em>rule<\/em>), mis keskendub erinevate meediaseadmete erinevatele v\u00f5imalustele.\r\n\r\nS\u00fcntaks n\u00e4eb ette meediat\u00fc\u00fcbi ja\/v\u00f5i \u00fche v\u00f5i mitme avaldise (loogika) kirjutamise:\r\n<p style=\"padding-left: 40px;\"><em>@media not|only mediatype and|not|only (meedia omadused) {<\/em>\r\n<em>\u00a0 CSS-kood;<\/em>\r\n<em>}<\/em><\/p>\r\nCSS3 toetab j\u00e4rgmiseid meediat\u00fc\u00fcpe:\r\n<ul>\r\n \t<li><em> all<\/em> \u2013 k\u00f5ik seadmed;<\/li>\r\n \t<li><em>print<\/em> \u2013 printerid;<\/li>\r\n \t<li><em>screen<\/em> \u2013 arvutiekraani, tahvelarvutid, nutitelefond jne;<\/li>\r\n \t<li><em>speech<\/em> \u2013 k\u00f5nes\u00fcntees (n\u00e4gemispuudega inimeste ekraanilugerid).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@media print {\r\n  body {\r\n    background-color: white;\r\n  }\r\n}\r\n<\/pre>\r\nMeedia omadustena (<em>media features<\/em>) on kasutatavad j\u00e4rgmised omadused:\r\n<ul>\r\n \t<li><em>aspect-ratio<\/em> \u2013 v\u00e4ljundi laiuse\/k\u00f5rguse suhe (n\u00e4iteks 16\/9, kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\r\n \t<li><em>color<\/em> \u2013 v\u00e4ljundseadme ekraani v\u00e4rvuss\u00fcgavus (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\r\n \t<li><em>color-index<\/em> \u2013 v\u00e4rvide arv, mida v\u00e4ljundseadme ekraan suudab n\u00e4idata (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\r\n \t<li><em>device-aspect-ratio<\/em> \u2013 v\u00e4ljundseadme\/paberi laiuse\/k\u00f5rguse suhe (n\u00e4iteks 16\/9, kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\r\n \t<li><em>device-width<\/em> \u2013 v\u00e4ljundseadme\/paberi laius (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\r\n \t<li><em>device-height<\/em> \u2013 v\u00e4ljundseadme\/paberi k\u00f5rgus (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\r\n \t<li><em>grid<\/em> \u2013 kas v\u00e4ljundseade on v\u00f5rgustikuga (<em>grid,<\/em> kindel arv ridu ja s\u00fcmboleid) v\u00f5i rastergraafika (<em>bitmap<\/em>) seade (\u201e1\u201c \u2013 <em>grid<\/em>, \u201e0\u201c \u2013 muu variant).<\/li>\r\n \t<li><em>height<\/em> \u2013 n\u00e4htava ala k\u00f5rgus (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\r\n \t<li><em>width<\/em> \u2013 n\u00e4htava ala laius (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\r\n \t<li><em>resolution<\/em> \u2013 v\u00e4ljundi punktitihedus dpi v\u00f5i dpcm (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\r\n \t<li><em>orientation<\/em> \u2013 v\u00e4ljundi orientatsioon (\u201e<em>portrait<\/em>\u201c v\u00f5i \u201e<em>landscape<\/em>\u201c);<\/li>\r\n \t<li><em>monochrome<\/em> \u2013 bittide arv piksli kohta monokroomse v\u00e4ljundi puhul (<em>bits per pixel in a monochrome frame buffer<\/em>) (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\r\n \t<li><em>scan<\/em> \u2013 kasutatava TV-ekraani realaotusmeetod <em>(\u201eprogressive\u201c<\/em> v\u00f5i \u201e<em>interlace<\/em>\u201c);<\/li>\r\n \t<li><em>update-frequency<\/em> \u2013 kui kiiresti meediaseade sisu muuta suudab, v\u00e4\u00e4rtused <em>none<\/em> (ei muudeta, n\u00e4iteks paberil), <em>slow<\/em> (ei toeta sujuvaid animatsioone jms, n\u00e4iteks e-ink ekraanid), <em>normal<\/em> (tavaline, kiiruspiiranguid pole, tavalised ekraanid jms).<\/li>\r\n<\/ul>\r\nN\u00e4iteks pealkirjade ette v\u00e4ike logo:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@media screen and (min-width: 900px) {\r\n  h1:before h2:before h3:before {\r\n    content: url(\u201epildid\/logo_bullet.png\u201c);\r\n  }\r\n}<\/pre>\r\n<h1>Viewport<\/h1>\r\nVaateava ehk <em>viewport<\/em> on veebilehe vaatajale n\u00e4htav ala. Selle suurus s\u00f5ltub seadmest, mida veebilehe vaatamiseks kasutatakse.\r\n\r\nVaateava kasutamiseks tuleb veebilehe p\u00e4ises kirja panna vastav <em>meta<\/em> element.\r\n\r\nVaateavaga on seotud m\u00f5\u00f5t\u00fchikud, mis viitavad sajandikule (1%) vaateava m\u00f5\u00f5tudest ning mida kasutatakse kohanduva kujunduse puhul erinevate suuruste m\u00e4\u00e4ramiseks veebilehel.\r\n\r\nVaateava suurusega seotud m\u00f5\u00f5t\u00fchikud (<em>viewport-relative units<\/em>) on:\r\n<ul>\r\n \t<li><em>vw<\/em> \u2013 1% vaateava laiusest (<em>viewport width<\/em>);<\/li>\r\n \t<li><em>vh<\/em> \u2013 1% vaateava k\u00f5rgusest (<em>viewport height<\/em>);<\/li>\r\n \t<li><em>vmin<\/em> \u2013 1% vaateava l\u00fchemast servast (<em>viewport minimum<\/em>), kas laiusest v\u00f5i k\u00f5rgusest olenevalt kumb on l\u00fchem;<\/li>\r\n \t<li><em>vmax<\/em> \u2013 1% vaateava pikemast servast (<em>viewport maximum<\/em>), kas laiusest v\u00f5i k\u00f5rgusest olenevalt kumb on pikem.<\/li>\r\n<\/ul>\r\n<h1>Flexbox<\/h1>\r\nFlexbox v\u00f5imaldab mingi ploki piires elemente automaatselt paigutada, jaotada, nende suurust muuta jne.\r\n\r\nFlexbox-i puhul m\u00e4\u00e4ratakse omadusi elemendile, mille sees t\u00fctarelemente paigutama hakatakse ehk flex-konteinerile (<em>flex-container<\/em>) ja elementidele, mida paigutatakse ehk flexelementidele (<em>flex-item<\/em>).\r\n\r\nSelleks, et mingi element (n\u00e4iteks <code>&lt;div&gt;<\/code>) muuta flex-konteineriks, tuleb tema <em>display<\/em> omaduse v\u00e4\u00e4rtuseks m\u00e4\u00e4rata <em>flex<\/em> v\u00f5i <em>inline-flex.<\/em>\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.suursisu {\r\n  display: flex;\r\n}<\/pre>\r\nJ\u00e4rgnevatel joonistel on leht, mille sisu on \u00fche <code>&lt;div&gt;<\/code> elemendi sees, alguses tavap\u00e4raselt ja siis on sama <code>&lt;div&gt;<\/code> flex-konteinerina.\r\n\r\n[caption id=\"attachment_414\" align=\"aligncenter\" width=\"375\"]<img class=\"wp-image-414\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_1-1.png\" alt=\"Veebi sisu tavap\u00e4raselt\" width=\"375\" height=\"268\" \/> Veebi sisu tavap\u00e4raselt[\/caption]\r\n\r\n[caption id=\"attachment_418\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-418\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_2-2.png\" alt=\"Sama veebilehe sisu flex-konteineris\" width=\"450\" height=\"116\" \/> Sama veebilehe sisu flex-konteineris[\/caption]\r\n\r\nJ\u00e4rgnevalt anname \u00fclevaate omadustest, millega m\u00e4\u00e4ratakse flex-konteineri omadused ja konteineri sisse paigutatud flex-elementide omadused.\r\n<h2>Flex-konteineri omadused<\/h2>\r\nFlex-konteineri omadused m\u00e4\u00e4ravad flex-elementide paigutuse ridadesse\/veergudesse ja nende ridade\/veergude omadused.\r\n<h3>Flex konteineri sisu paigutamise suund<\/h3>\r\nKogu sellise flex-konteineri sisu paigutatakse vastavalt m\u00e4\u00e4ratud reeglitele. Vaikimisi kasutatakse horisontaalset paigutust vasakult paremale.\r\n\r\nSuunda saab muuta n\u00e4iteks kogu veebilehele direction omadust m\u00e4\u00e4rates (n\u00e4iteks <em>rtl \u2013 right to left<\/em>)\r\n\r\nFlex-konteneri sees m\u00e4\u00e4rab elementide j\u00e4rjestuse suuna omadus <em>flex-direction<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>row<\/em> \u2013 vaikev\u00e4\u00e4rtus, elemendid paigutatakse vasakult paremale, \u00fclevalt alla.<\/li>\r\n \t<li><em>row<\/em>-<em>reverse<\/em> \u2013 elemendid paigutatakse paremalt vasakule.<\/li>\r\n \t<li><em>column<\/em> \u2013 elemendid paigutatakse vertikaalselt.<\/li>\r\n \t<li><em>column<\/em>-reverse \u2013 elemendid paigutatakse vertikaalselt, alt \u00fclespoole.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.suursisu {\r\n  display: flex;\r\n  flex-direction: row-reverse;\r\n}<\/pre>\r\n[caption id=\"attachment_419\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-419\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_3-1.png\" alt=\"Flex-konteiner elemendid reas vastupidi (row-reverse)\" width=\"450\" height=\"115\" \/> Flex-konteiner elemendid reas vastupidi (<em>row-reverse<\/em>)[\/caption]\r\n<h3>Flex elementide joondamine<\/h3>\r\nKui elemendid flex-konteineris ei kata real\/veerus v\u00f5imalikku ruumi, siis saab neid joondada kasutades omadust <em>justify-content<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>flex-start<\/em> \u2013 elemendid paigutatakse konteineri algusesse (vaikev\u00e4\u00e4rtus).<\/li>\r\n \t<li><em>flex-end<\/em> \u2013 elemendid paigutatakse konteineri l\u00f5ppu.<\/li>\r\n \t<li><em>center<\/em> \u2013 elemendid paigutatakse konteineri keskele.<\/li>\r\n \t<li><em>space-between<\/em> \u2013 elementide vahele paigutatakse t\u00fchja ruumi (nagu teksti r\u00f6\u00f6pselt joondamine).<\/li>\r\n \t<li><em>space-around<\/em> \u2013 elementide vahele, ette ja j\u00e4rele paigutatakse t\u00fchja ruumi.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">.suursisu {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}<\/pre>\r\n[caption id=\"attachment_420\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-420\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_4.png\" alt=\"Flex-konteiner, elemendid \u00fchtlaselt jaotatud (space-between)\" width=\"450\" height=\"115\" \/> Flex-konteiner, elemendid \u00fchtlaselt jaotatud (<em>space-between<\/em>)[\/caption]\r\n\r\nRisti sisu paigutamise suunaga (<em>flex-direction<\/em>) saab elemente flex-konteineris joondada omadusega <em>align-items<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>stretch<\/em> \u2013 elemendid venitatakse k\u00f5rgemaks, et t\u00e4ita kogu flex-konteineri k\u00f5rgus (vaikev\u00e4\u00e4rtus).<\/li>\r\n \t<li><em>flex-start<\/em> \u2013 elemendid paigutatakse konteineri \u00fclaserva.<\/li>\r\n \t<li><em>flex-end<\/em> \u2013 elemendid paigutatakse konteineri alumisele servale.<\/li>\r\n \t<li><em>center<\/em> \u2013 elemendid paigutatakse konteinerisse vertikaalselt keskele.<\/li>\r\n \t<li><em>baseline<\/em> \u2013 elemendid paigutatakse konteineri baasjoonele (<em>baseline<\/em>).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.suursisu {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_421\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-421\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_5.png\" alt=\"Flex elemendid vertikaalselt venitatud (stretch)\" width=\"450\" height=\"196\" \/> Flex elemendid vertikaalselt venitatud (<em>stretch<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_422\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-422\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_6.png\" alt=\"Flex elemendid paigutatud konteineri \u00fclaserva (flex-start)\" width=\"450\" height=\"198\" \/> Flex elemendid paigutatud konteineri \u00fclaserva (<em>flex-start<\/em>)[\/caption]\r\n<h3>Flex ridade\/veergude murdmine<\/h3>\r\nJuhuks, kui flex-konteiner pole piisavalt suur, et k\u00f5ik elemendid mahuksid \u00fchele reale v\u00f5i \u00fchte veergu, saab m\u00e4\u00e4rata rea murdmist (<em>wrap<\/em>). Selleks on omadus <em>flex-wrap<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>nowrap<\/em> \u2013 ridade\/veergude murdmist ei toimu (vaikev\u00e4\u00e4rtus).<\/li>\r\n \t<li><em>wrap<\/em> \u2013 ridade veergude murdmine toimub vastavalt vajadusele.<\/li>\r\n \t<li><em>wrap reverse<\/em> \u2013 ridade murdmine vastupidises j\u00e4rjestuses (hoopis alt \u00fcles vms).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">suursisu {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n}<\/pre>\r\n[caption id=\"attachment_423\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-423\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_7.png\" alt=\" Flex elemendid ei mahu reale, toimub ridade murdmine (wrap)\" width=\"450\" height=\"250\" \/> Flex elemendid ei mahu reale, toimub ridade murdmine (<em>wrap<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_424\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-424\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_8.png\" alt=\"Flex elemendid ei mahu reale, toimub ridade murdmine tagurpidi j\u00e4rjestuses (wrap-reverse)\" width=\"450\" height=\"251\" \/> Flex elemendid ei mahu reale, toimub ridade murdmine tagurpidi j\u00e4rjestuses (<em>wrap-reverse<\/em>)[\/caption]\r\n<h3>Flex ridade joondus<\/h3>\r\nSarnaselt \u00fcksikutele elementidele flex-konteineri reas\/veerus, saab joondada ka terveid elementide ridu\/veergusid. Selleks on omadus <em>align-content<\/em> j\u00e4rgmiste v\u00f5imalike v\u00e4\u00e4rtustega:\r\n<ul>\r\n \t<li><em>stretch<\/em> \u2013 ridu venitatakse nii, et nad t\u00e4idavad kogu olemasoleva ruumi (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t<li><em>flex-start<\/em> \u2013 read paigutatakse flex-konteineri algusesse.<\/li>\r\n \t<li><em>flex-end<\/em> \u2013 read paigutatakse flex-konteineri l\u00f5ppu.<\/li>\r\n \t<li><em>center<\/em> \u2013 read paigutatakse flex-konteineri keskele,<\/li>\r\n \t<li><em>space-between<\/em> \u2013 ridade vahele paigutatakse lisaruumi, et katta kogu flex-konteiner.<\/li>\r\n \t<li><em>space-around<\/em> \u2013 read paigutatakse \u00fchtlaselt, ruumi lisatakse enne ja p\u00e4rast ridu ning ridade vahele<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.suursisu {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  align-content: space-between;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_426\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-426\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_9.png\" alt=\"flex-ridade joondus stretch\" width=\"450\" height=\"269\" \/> flex-ridade joondus <em>stretch<\/em>[\/caption]\r\n\r\n[caption id=\"attachment_427\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-427\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_10.png\" alt=\"flex-ridade joondus space-between\" width=\"450\" height=\"268\" \/> flex-ridade joondus space-between[\/caption]\r\n<h3>Flex-konteineri sisu paigutamise suund ja ridade\/veergude murdmine koos<\/h3>\r\nAjalooliselt on flex-konteineri jaoks v\u00e4lja m\u00f5eldud ka elementide paigutamisega seotud omaduse <em>flex-direction<\/em> ja ridade\/veergude murdmise omaduse <em>flex-wrap<\/em> kombinatsioon \u2013 <em>flex-flow<\/em>.\r\n\r\nOmadus pannakse kirja j\u00e4rgmiselt:\r\n<p style=\"padding-left: 40px;\"><em>flex-flow: flex-direction flex-wrap;<\/em><\/p>\r\n\r\n<h2>Flex-elementide omadused<\/h2>\r\nLisaks flex-kontainerile saab omadusi m\u00e4\u00e4rata ka flex-elementidele \u00fchekaupa.\r\n<h3>Flex-elemendi j\u00e4rjestuse muutmine<\/h3>\r\nKui on tarvis m\u00f5nd flex-elementi teiste suhtes ette v\u00f5i tahapoole nihutada, siis kasutatakse omadust <em>order<\/em>, mille v\u00e4\u00e4rtuseks on positiivne v\u00f5i negatiivne arv. Negatiivsed t\u00f5stavad elemendi ettepoole, positiivsed tahapoole.\r\n\r\nV\u00e4\u00e4rtus 0 j\u00e4tab elemendi omale kohale.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">ettepoole {\r\n  order: -1;\r\n}<\/pre>\r\n[caption id=\"attachment_428\" align=\"aligncenter\" width=\"450\"]<img class=\"wp-image-428\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_11.png\" alt=\"Teine sisuplokk t\u00f5stetud \u00fche koha v\u00f5rra ettepoole (order: -1)\" width=\"450\" height=\"272\" \/> Teine sisuplokk t\u00f5stetud \u00fche koha v\u00f5rra ettepoole (<em>order: -1<\/em>)[\/caption]\r\n<h3>Flex-elemendi joondamine<\/h3>\r\nKui on vaja m\u00f5nd elementi flex-konteineris eriliselt joondada, siis saab kasutada omadust <em>align-self<\/em>, millel on samad v\u00f5imalikud v\u00e4\u00e4rtused, nagu <em>align-items<\/em> omadusel.\r\n\r\nSelle omaduse kasutamisel eiratakse flex-konteineri <em>align-items<\/em> v\u00e4\u00e4rtust.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.ettepoole {\r\n  order: -1;\r\n  align-self: flex-start;\r\n}<\/pre>\r\n<h3>Flex-elemendi suhteline suurus<\/h3>\r\nFlex konteineris saab k\u00f5igile elementidele m\u00e4\u00e4rata ka nende suurust. Selleks kasutatakse omadust <em>flex-basis<\/em>, mille v\u00e4\u00e4rtuseks v\u00f5ib olla:\r\n<ul>\r\n \t<li><em>auto<\/em> \u2013 flex-elemendi suurus m\u00e4\u00e4ratakse tema sisu j\u00e4rgi (vaikev\u00e4\u00e4rtus).<\/li>\r\n \t<li><em>t\u00e4isarv<\/em> \u2013 kasutada v\u00f5ib k\u00f5iki t\u00fc\u00fcpilisi m\u00f5\u00f5t\u00fchikuid (px, pt, cm, em, %).<\/li>\r\n \t<li><em>initial<\/em> \u2013 seab v\u00e4\u00e4rtuse vaikev\u00e4\u00e4rtusele.<\/li>\r\n \t<li><em>inherit<\/em> \u2013 v\u00e4\u00e4rtus p\u00e4ritakse vanem-elemendilt.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.pisike {\r\n  flex-basis: 200px;\r\n}<\/pre>\r\nKuna flex-konteineris elementide m\u00f5\u00f5dud vastavalt konteineri m\u00f5\u00f5tudele d\u00fcnaamiliselt muutuvad, siis pakutakse ka v\u00f5imalust m\u00e4\u00e4rata, kui palju elementide m\u00f5\u00f5dud teiste suhtes kasvavad v\u00f5i kahanevad.\r\n\r\nElemendi suurenemist reguleerib omadus <em>flex-grow<\/em>, mille v\u00e4\u00e4rtuseks on positiivne t\u00e4isarv (vaikev\u00e4\u00e4rtuseks on 0).\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.veerand {\r\n  flex-grow: 1;\r\n}\r\n.pool {\r\n  flex-grow: 2;\r\n}<\/pre>\r\nSarnaselt reguleerib elementide kahanemist omadus<em> flex-shrink<\/em>. Erinevuseks aga, et vaikev\u00e4\u00e4rtuseks on 1.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.tava {\r\n  flex-shrink: 2;\r\n}\r\n.kahanev {\r\n  flex-grow: 4;\r\n}<\/pre>\r\nSiin kirjeldatud kolm omadust saab kirja panna l\u00fchemalt \u00fche omadusena <em>flex<\/em>. Selle puhul pannakse v\u00e4\u00e4rtused kirja j\u00e4rgmiselt:\r\n<p style=\"padding-left: 40px;\"><em>flex: flex-grow flex-shrink flex-basis;<\/em><\/p>\r\nVaikev\u00e4\u00e4rtuseks on:\r\n<p style=\"padding-left: 40px;\"><em>flex: 0 1 auto;<\/em><\/p>\r\nVajadusel saab elementide suurust piirata tavap\u00e4raste <em>max-width<\/em> ja <em>min-width<\/em> (ka <em>max-height<\/em> ja <em>min-height<\/em>) abil.\r\n<h1>Grid<\/h1>\r\n<em>Grid<\/em> ehk v\u00f5restik on vahend veebilehe \u00fclesehituse m\u00e4\u00e4ramiseks, mis jagab lehe veergudeks ning ridadeks.\r\n\r\nElementi, mille sees v\u00f5restik on, nimetatakse grid-konteineriks (<em>grid-container<\/em>). K\u00f5ik gridkonteineri otsesed t\u00fctarelemendid on grid-elemendid (<em>grid-item<\/em>).\r\n\r\nTulemuse saavutamiseks m\u00e4\u00e4ratakse omadusi grid-konteinerile ja selle t\u00fctarelementidele \u2013 grid-elementidele.\r\n\r\nSelleks, et mingi element (n\u00e4iteks <code>&lt;div&gt;<\/code>) muuta grid-konteineriks, tuleb tema kujunduses <em>display<\/em> omaduse v\u00e4\u00e4rtuseks m\u00e4\u00e4rata <em>grid<\/em> v\u00f5i <em>inline-grid<\/em>. Kui element on ise suurema gridkonteineri t\u00fctarelemendiks, siis v\u00f5ib kasutada ka v\u00e4\u00e4rtus <em>subgrid<\/em>, et tema ridade ja veergude\r\nm\u00f5\u00f5dud v\u00f5etakse vanemelemendi j\u00e4rgi.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n}<\/pre>\r\n&nbsp;\r\n\r\nNB! Grid\u2019i kasutamiseks soovitatakse veebilehe elementide suuruse m\u00e4\u00e4ramiseks kasutada l\u00e4henemist, kus elemendi raamjoone paksus ning polster sisalduvad elemendi m\u00f5\u00f5tmetes (<em>box-sizing: border-box<\/em>).\r\n\r\nNB! Omadused <em>column, float, clear<\/em> ja <em>vertical-align<\/em> grid-konteineri puhul ei toimi!\r\n<h2>Grid-konteineri omadused<\/h2>\r\nGrid-konteineri omadused m\u00e4\u00e4ravad, kuidas jaotatakse ruum konteineri sees. K\u00f5ige olulisem on v\u00f5restiku (<em>grid<\/em>) defineerimine.\r\n<h3>V\u00f5restiku defineerimine<\/h3>\r\nV\u00f5restik defineeritakse ridade ja veergude m\u00e4\u00e4ramisega.\r\n<h4>Veergude ja ridade defineerimine<\/h4>\r\nGrid-konteineri sees ridade ja veergude defineerimiseks kasutatakse omadusi <em>grid-template-columns<\/em> ja <em>grid-template-rows<\/em>. Loodavad veerud ja read j\u00e4\u00e4vad justkui n\u00e4htamatute joonte vahele, mida nimetatakse rea-joonteks (<em>row-line<\/em>) ja veeru-joonteks (<em>column-line<\/em>).\r\n\r\nNende joonte abil saab m\u00e4\u00e4rata grid-elementide paigutust (millisest joonest millise jooneni element ulatub). Selleks on grid-elementidel vastavad omadused.\r\n\r\nVeergude ja ridade loomisel omadustega <em>grid-template-columns<\/em> ja <em>grid-template-rows<\/em> antakse v\u00e4\u00e4rtusteks t\u00fchikutega eraldatud loend veergude\/ridade laiusest\/k\u00f5rgusest (<em>track values<\/em>). Lisada v\u00f5ib ka rea-joonte ja\/v\u00f5i veeru-joonte nimed, mis kirjutatakse kandiliste sulgude vahele.\r\n\r\nVeergude\/ridade m\u00f5\u00f5tude m\u00e4\u00e4ramiseks on j\u00e4rgmised v\u00f5imalused:\r\n<ul>\r\n \t<li>v\u00e4\u00e4rtus puudub \u2013 veerud v\u00f5i read luuakse vajadusel automaatselt;<\/li>\r\n \t<li><em>auto<\/em> \u2013 veeru v\u00f5i rea m\u00f5\u00f5dud m\u00e4\u00e4ratakse grid-konteineri m\u00f5\u00f5tude ja grid-elementide sisu j\u00e4rgi (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t<li><em>max-content<\/em> \u2013 veeru v\u00f5i rea suurus m\u00e4\u00e4ratakse sellele paigutatud elementidest suurima j\u00e4rgi;<\/li>\r\n \t<li><em>min-content<\/em> - veeru v\u00f5i rea suurus m\u00e4\u00e4ratakse sellele paigutatud elementidest v\u00e4ikseima j\u00e4rgi;<\/li>\r\n \t<li>v\u00e4\u00e4rtus \u2013 erinevate m\u00f5\u00f5t\u00fchikutega (px, cm, jne) v\u00e4ljendatud t\u00e4pne suurus;<\/li>\r\n<\/ul>\r\n<span class=\"nb\">NB! Kui veergudele\/ridadele nimesid ei m\u00e4\u00e4rata, siis antakse neile automaatselt numbrilised nimed.<\/span>\r\n\r\nN\u00e4iteks m\u00e4\u00e4rame grid-konteinerile 4 veergu ja kolm rida:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n  grid-template-columns: 150px auto 200px 100px;\r\n  grid-template-rows: 25% auto 100px;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_452\" align=\"aligncenter\" width=\"550\"]<img class=\"wp-image-452\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_1.png\" alt=\"Defineeritud grid, 4 veergu ja 3 rida, rea- ja veeru-jooned nimedeta\" width=\"550\" height=\"243\" \/> Defineeritud grid, 4 veergu ja 3 rida, rea- ja veeru-jooned nimedeta[\/caption]\r\n\r\nN\u00e4iteks m\u00e4\u00e4rame grid-konteinerile 4 veergu ja 3 rida nagu eespool aga anname k\u00f5igile nimed rea-joontele (<em>row-lines<\/em>) ja veeru-joontele (<em>column-lines<\/em>) nimed:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">main-container {\r\n  display: grid;\r\n  grid-template-columns: [col1-start] 150px [col1-end] auto [col2-end] 200px [col3-end] 100px [col4-end];\r\n  grid-template-rows: [begin] 25% [row1-end] auto [row2_end] 100px [end];\r\n}<\/pre>\r\n[caption id=\"attachment_453\" align=\"aligncenter\" width=\"600\"]<img class=\"wp-image-453\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_2.png\" alt=\"Defineeritud grid, 4 veergu ja 3 rida koos rea- ja veeru-joonte nimedega\" width=\"600\" height=\"246\" \/> Defineeritud grid, 4 veergu ja 3 rida koos rea- ja veeru-joonte nimedega[\/caption]\r\n\r\n<span class=\"nb\">NB! Ridadel v\u00f5ib olla ka mitu nime! Need pannakse kirja t\u00fchikutega eraldatult.<\/span>\r\n\r\nN\u00e4iteks:\r\n<p style=\"padding-left: 40px;\"><em>grid-template-rows: [toprow headerarea] 25% [contentrow] auto [bottomrow] 100px [end];<\/em><\/p>\r\n<span class=\"nb\">NB! Ridade v\u00f5i veergude m\u00e4\u00e4ramisel saab kasutada kordust, <em>repeat()<\/em>!<\/span>\r\n\r\nN\u00e4iteks m\u00e4\u00e4rame neli veergu, milledest 3 esimest on \u00fchesugused:\r\n<p style=\"padding-left: 40px;\"><em>grid-template-columns: repeat(3, 150px) [contentcolumn] auto;<\/em><\/p>\r\nSee on samav\u00e4\u00e4rne j\u00e4rgmise n\u00e4itega:\r\n<p style=\"padding-left: 40px;\"><em>grid-template-columns: 150px 150px 150px [contentcolumn] auto;<\/em><\/p>\r\nVeergude ja ridade m\u00f5\u00f5duks v\u00f5ib m\u00e4\u00e4rata ka murdosa vabast ruumist. Selleks kasutatakse m\u00f5\u00f5t\u00fchikut fr (<em>fraction<\/em>).\r\n\r\nSee murdosa arvutatakse ruumist, mis j\u00e4\u00e4b \u00fcle k\u00f5igist t\u00e4pselt m\u00e4\u00e4ratud osadest. N\u00e4iteks m\u00e4\u00e4rame neli veergu, \u00fche laiuseks 200 pikslit ja k\u00f5igi \u00fclej\u00e4\u00e4nute laiuseks on kolmandik j\u00e4relej\u00e4\u00e4nud ruumist:\r\n<p style=\"padding-left: 40px;\"><em>grid-template-columns: 200px 1fr 1fr 1fr;<\/em><\/p>\r\n\r\n<h4>V\u00f5restiku defineerimine l\u00fchikesel kujul<\/h4>\r\nV\u00f5restiku ridu, veergusid ja piirkondi saab defineerida ka \u00fche omadusega <em>grid-template.<\/em>\r\n<h4>T\u00fchi ruum ridade ja\/v\u00f5i veergude vahel<\/h4>\r\nVajadusel saab ridade ja veergude vahele lisada t\u00fchja ruumi. Selleks on kasutusel omadused <em>grid-column-gap<\/em> ja <em>grid-row-gap<\/em>, millede v\u00e4\u00e4rtuseks on soovitud vahe suurus (<em>length<\/em>) mingites \u00fchikutes (px, cm vms).\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n  grid-template-columns: 200px auto 50px 200px;\r\n  grid-template-rows: 150px auto 50px;\r\n  grid-column-gap: 15px;\r\n  grid-row-gap: 20px;\r\n}<\/pre>\r\n[caption id=\"attachment_454\" align=\"aligncenter\" width=\"550\"]<img class=\"wp-image-454\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_3.png\" alt=\"Grid veergude ja ridade vahel on lisatud t\u00fchi ruum\" width=\"550\" height=\"200\" \/> Grid veergude ja ridade vahel on lisatud t\u00fchi ruum[\/caption]\r\n\r\n<span class=\"nb\">NB! T\u00fchi ruum lisatakse vaid ridade ja veergude vahele, mitte v\u00e4ljapoole!<\/span>\r\n\r\nT\u00fchja ruumi v\u00f5ib lisada ka \u00fche omadusega <em>grid-gap<\/em> korraga nii veergude kui ridade jaoks. V\u00e4\u00e4rtustena pannakse kirja t\u00fchikutega eraldatuna vahe veergude vahel (<em>column-gap<\/em>) ja ridade vahel (<em>row-gap<\/em>).\r\n\r\nN\u00e4iteks:\r\n<p style=\"padding-left: 40px;\"><em>grid-gap: 15px 20px;<\/em><\/p>\r\n<span class=\"nb\">NB! Kasutada v\u00f5ib ka vaid \u00fcht v\u00e4\u00e4rtust, siis kasutatakse seda nii veergude kui ka ridade vahe m\u00e4\u00e4ramisel.<\/span>\r\n\r\nN\u00e4iteks:\r\n<p style=\"padding-left: 40px;\"><em>grid-gap: 20px;<\/em><\/p>\r\n\r\n<h4>Piirkondade defineerimine grid-elementide sidumiseks v\u00f5restikuga<\/h4>\r\nVeergude ja ridadega defineeritud v\u00f5restikku saab jagada ka nimelisteks piirkondadeks (<em>area<\/em>). Selleks tuleb eelnevalt defineerida nimed grid-elementidele, kasutades grid-elemendi omadust <em>grid-area<\/em>.\r\n\r\nN\u00e4iteks defineerime grid-elementide nimed: \u201e<em>page_header<\/em>\u201c, \u201e<em>page_menu<\/em>\u201c, \u201e<em>page_content<\/em>\u201c, \u201e<em>page_side<\/em>\u201c ja \u201e<em>page_footer<\/em>\u201c.\r\n\r\nNimetuse saanud piirkonnad seotakse loodud v\u00f5restikuga (<em>grid<\/em>) omadusega grid-templateareas. Iga v\u00f5restiku rea (<em>row<\/em>) jaoks pannakse jutum\u00e4rkides kirja mis piirkond (<em>area<\/em>) on seotud iga veeruga (<em>column<\/em>).\r\n\r\nIga veeru kohta pannakse kirja \u00fcks kolmest:\r\n<ul>\r\n \t<li>piirkonna nimi \u2013 selle veeruga on seotud vastav piirkond, kui sama piirkond kordub mitmes veerus, siis ulatub (<em>span<\/em>) see piirkond \u00fcle k\u00f5igi nende veergude;<\/li>\r\n \t<li>. \u2013 (punkt) t\u00e4hendab, et v\u00f5restiku lahter j\u00e4\u00e4b t\u00fchjaks;<\/li>\r\n \t<li><em>none<\/em> \u2013 v\u00f5restiku piirkonda pole defineeritud.<\/li>\r\n<\/ul>\r\n<span class=\"nb\">NB! Iga rea kohta tuleb kirja panna t\u00e4pselt sama palju veergusid!\r\nNB! Ridadele nimesid ei kirjutata kuid nad saavad nimed automaatselt (n\u00e4iteks rida, millel algab piirkond \u201e<em>content<\/em>\u201c saab nimeks \u201e<em>content-start<\/em>\u201c ja rida, kus see piirkond l\u00f5ppeb, saab nimeks \u201e<em>content-end<\/em>\u201c.<\/span>\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n  grid-template-columns: 200px auto 50px 200px;\r\n  grid-template-rows: 150px auto 50px;\r\n  grid-template-areas:\r\n    \"page_header page_header page_header page_header\"\r\n    \"page_menu page_content . page_side\"\r\n    \"page_footer page_footer page_footer page_footer\";\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_455\" align=\"aligncenter\" width=\"550\"]<img class=\"wp-image-455\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_4.png\" alt=\"Grid v\u00f5restikuga on seotud defineeritud piirkonnad\" width=\"550\" height=\"200\" \/> Grid v\u00f5restikuga on seotud defineeritud piirkonnad[\/caption]\r\n<h3>V\u00f5restiku joondamine<\/h3>\r\nVahel v\u00f5ivad grid-elemendid katta v\u00e4iksema ala, kui v\u00f5restik. See juhtub tavaliselt, kui nende suuruse m\u00e4\u00e4ramiseks kasutatakse absoluutseid \u00fchikuid nagu n\u00e4iteks px.\r\n\r\n[caption id=\"attachment_456\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-456\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_5.png\" alt=\"Grid-elementide laius on v\u00e4iksem, kui v\u00f5restiku veergudel\" width=\"500\" height=\"165\" \/> Grid-elementide laius on v\u00e4iksem, kui v\u00f5restiku veergudel[\/caption]\r\n\r\n[caption id=\"attachment_457\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-457\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_6.png\" alt=\"Grid-elementide k\u00f5rgus on v\u00e4iksem, kui v\u00f5restiku ridadel\" width=\"500\" height=\"163\" \/> Grid-elementide k\u00f5rgus on v\u00e4iksem, kui v\u00f5restiku ridadel[\/caption]\r\n\r\nSellisel juhul saab tervet v\u00f5restikku grid-konteineris joondada.\r\n<h4>V\u00f5restiku joondamine horisontaalselt<\/h4>\r\nTerve v\u00f5restiku joondamiseks rea telje (<em>row axis<\/em>) j\u00e4rgi ehk horisontaalselt on omadus <em>justifycontent<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>start<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri vasakusse serva;<\/li>\r\n \t<li><em>end<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri paremasse serva;<\/li>\r\n \t<li><em>center<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri keskele;<\/li>\r\n \t<li><em>stretch<\/em> \u2013 grid-elemente venitatakse laiemaks, et v\u00f5restik t\u00e4idaks kogu grid-konteineri laiuse;<\/li>\r\n \t<li><em>space-around<\/em> \u2013 lisab k\u00f5igi grid-elementide vahele v\u00f5rdselt t\u00fchja ruumi ning rea algusesse ja l\u00f5ppu pool sellest laiusest, et t\u00e4ita terve grid-konteiner;<\/li>\r\n \t<li><em>space-between<\/em> \u2013 t\u00e4idab kogu grid-konteineri laiuse lisades vaid grid elementide vahele v\u00f5rdselt t\u00fchja ruumi;<\/li>\r\n \t<li><em>space-evenly<\/em> \u2013 lisab terve grid-konteineri laiuse t\u00e4itmiseks v\u00f5rdselt t\u00fchja ruumi k\u00f5igi grid-elementide vahele ning ka rea algusesse ja l\u00f5ppu.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  justify-content: start;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_458\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-458\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_7.png\" alt=\"V\u00f5restik joondatud vasakule (justify-content: start)\" width=\"500\" height=\"163\" \/> V\u00f5restik joondatud vasakule (<em>justify-content: start<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_459\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-459\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_8.png\" alt=\"V\u00f5restik joondatud keskele (justify-content: center)\" width=\"500\" height=\"164\" \/> V\u00f5restik joondatud keskele (<em>justify-content: center<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_460\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-460\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_9.png\" alt=\"V\u00f5restik joondatud \u00fchtlaselt (justify-content: space-evenly)\" width=\"500\" height=\"166\" \/> V\u00f5restik joondatud \u00fchtlaselt (<em>justify-content: space-evenly<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_461\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-461\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_10.png\" alt=\"V\u00f5restik joondatud \u00fchtlaselt \u00e4\u00e4rest \u00e4\u00e4reni (justify-content: space-between)\" width=\"500\" height=\"161\" \/> V\u00f5restik joondatud \u00fchtlaselt \u00e4\u00e4rest \u00e4\u00e4reni (<em>justify-content: space-between<\/em>)[\/caption]\r\n<h4>V\u00f5restiku joondamine vertikaalselt<\/h4>\r\nTerve v\u00f5restiku joondamiseks veeru telje (<em>column axis<\/em>) j\u00e4rgi ehk vertikaalselt on omadus <em>align-content<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>start<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri \u00fclemisse serva;<\/li>\r\n \t<li><em>end<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri alumisse serva;<\/li>\r\n \t<li><em>center<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri keskele;<\/li>\r\n \t<li><em>stretch<\/em> \u2013 grid-elemente venitatakse k\u00f5rgemaks, et v\u00f5restik t\u00e4idaks kogu gridkonteineri k\u00f5rguse;<\/li>\r\n \t<li><em>space-around<\/em> \u2013 lisab k\u00f5igi grid-elementide vahele v\u00f5rdselt t\u00fchja ruumi ning veeru algusesse ja l\u00f5ppu pool sellest k\u00f5rgusest, et t\u00e4ita terve grid-konteiner;<\/li>\r\n \t<li><em>space-between<\/em> \u2013 t\u00e4idab kogu grid-konteineri k\u00f5rguse lisades vaid grid elementide vahele v\u00f5rdselt t\u00fchja ruumi;<\/li>\r\n \t<li><em>space-evenly<\/em> \u2013 lisab terve grid-konteineri k\u00f5rguse t\u00e4itmiseks v\u00f5rdselt t\u00fchja ruumi k\u00f5igi grid-elementide vahele ning ka veeru algusesse ja l\u00f5ppu.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  align-items: space-between;\r\n}<\/pre>\r\n[caption id=\"attachment_462\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-462\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_11.png\" alt=\"V\u00f5restik joondatud \u00fchtlaselt \u00fcle kogu k\u00f5rguse (align-content: space-between)\" width=\"500\" height=\"149\" \/> V\u00f5restik joondatud \u00fchtlaselt \u00fcle kogu k\u00f5rguse (<em>align-content: space-between<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_463\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-463\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_12.png\" alt=\"V\u00f5restik joondatud vertikaalselt keskele (align-content: center)\" width=\"500\" height=\"149\" \/> V\u00f5restik joondatud vertikaalselt keskele (<em>align-content: center<\/em>)[\/caption]\r\n<h3>Grid-elementide sisu joondamine<\/h3>\r\nTervele v\u00f5restikule (grid-konteiner) saab m\u00e4\u00e4rata ka omadusi, kuidas k\u00f5ikide sisuelementide (grid-elemendid) sisu joondatakse.\r\n<h4>Elementide sisu joondamine horisontaalselt<\/h4>\r\nM\u00f6\u00f6da ridade telgesid (<em>row axis<\/em>) ehk horisontaalselt joondamiseks on omadus <em>justify-items<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>start<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse vasakusse serva;<\/li>\r\n \t<li><em>end<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse paremasse serva;<\/li>\r\n \t<li><em>center<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse keskele;<\/li>\r\n \t<li><em>stretch<\/em> \u2013 k\u00f5ikide grid-elementide sisu t\u00e4idab terve v\u00f5imaliku ala (vaikev\u00e4\u00e4rtus).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  justify-items: end;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_464\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-464\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_13.png\" alt=\"V\u00f5restiku k\u00f5ik grid-elemendid on joondatud \u00fcle terve v\u00f5imaliku ala (justify-items: stretch)\" width=\"500\" height=\"134\" \/> V\u00f5restiku k\u00f5ik grid-elemendid on joondatud \u00fcle terve v\u00f5imaliku ala (<em>justify-items: stretch<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_465\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-465\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_14.png\" alt=\"V\u00f5restiku k\u00f5ik grid-elemendid on joondatud vasakule (justify-items: start)\" width=\"500\" height=\"132\" \/> V\u00f5restiku k\u00f5ik grid-elemendid on joondatud vasakule (<em>justify-items: start<\/em>)[\/caption]\r\n<h4>Elementide sisu joondamine vertikaalselt<\/h4>\r\nM\u00f6\u00f6da veergude telgesid (<em>column axis<\/em>) ehk vertikaalselt joondamiseks on omadus alignitems, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>start<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse \u00fclemisse serva;<\/li>\r\n \t<li><em>end<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse alumisse serva;<\/li>\r\n \t<li><em>center<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse vertikaalselt keskele;<\/li>\r\n \t<li><em>stretch<\/em> \u2013 k\u00f5ikide grid-elementide sisu t\u00e4idab terve v\u00f5imaliku k\u00f5rguse (vaikev\u00e4\u00e4rtus).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">main-container {\r\n  align-items: start;\r\n}<\/pre>\r\n[caption id=\"attachment_466\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-466\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_15.png\" alt=\"V\u00f5restiku k\u00f5ik grid-elemendid on joondatud \u00fcles (justify-items: start)\" width=\"500\" height=\"190\" \/> V\u00f5restiku k\u00f5ik grid-elemendid on joondatud \u00fcles (<em>justify-items: start<\/em>)[\/caption]\r\n<h3>Veergude ja ridade automaatne suurus<\/h3>\r\nV\u00f5restiku veergudele ja ridadele, millele pole m\u00f5\u00f5tu m\u00e4\u00e4ratud, saab seda teha omadustega <em>grid-auto-columns<\/em> ja <em>grid-auto-rows<\/em>. M\u00f5lemal saab kasutada j\u00e4rgmiseid v\u00f5imalikke v\u00e4\u00e4rtuseid\r\n<ul>\r\n \t<li>auto \u2013 veeru v\u00f5i rea m\u00f5\u00f5dud m\u00e4\u00e4ratakse grid-konteineri m\u00f5\u00f5tude ja grid-elementide sisu j\u00e4rgi (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t<li>max-content \u2013 veeru v\u00f5i rea suurus m\u00e4\u00e4ratakse sellele paigutatud elementidest suurima j\u00e4rgi;<\/li>\r\n \t<li>min-content - veeru v\u00f5i rea suurus m\u00e4\u00e4ratakse sellele paigutatud elementidest v\u00e4ikseima j\u00e4rgi;<\/li>\r\n \t<li>v\u00e4\u00e4rtus \u2013 erinevate m\u00f5\u00f5t\u00fchikutega (px, cm, % jne) v\u00e4ljendatud t\u00e4pne suurus;<\/li>\r\n<\/ul>\r\nNeid omadusi kasutatakse peamiselt siis, kui osa veergusid v\u00f5i ridasid tekitatakse automaatselt.\r\n\r\nN\u00e4iteks loome v\u00f5restiku kahe veeru ja kahe reaga ning m\u00e4\u00e4rame automaatselt loodavatele veergudele laiuse:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n  grid-template-columns: 100px 100px;\r\n  grid-template-rows: 100px 100px;\r\n  grid-auto-columns: 100px;\r\n}<\/pre>\r\nSellele v\u00f5restikule paigutame kaks grid-elementi, \u00fche selliselt, et n\u00f5utud veeru-jooni pole olemas (viies veerg), mis ise ja sellele eelnevad kaks lisatud t\u00fchja veergu saavad k\u00f5ik laiuseks 100px:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.item2 {\r\n  grid-column: 5 \/ 6;\r\n  grid-row: 2 \/ 3;\r\n}<\/pre>\r\n[caption id=\"attachment_467\" align=\"aligncenter\" width=\"400\"]<img class=\"wp-image-467\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_16.png\" alt=\"Automaatselt lisatud veerud laiusega 100px\" width=\"400\" height=\"170\" \/> Automaatselt lisatud veerud laiusega 100px[\/caption]\r\n\r\n[caption id=\"attachment_468\" align=\"aligncenter\" width=\"696\"]<img class=\"wp-image-468\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_17.png\" alt=\"Automaatselt lisatud veerud automaatselt valitud laiusega\" width=\"696\" height=\"170\" \/> Automaatselt lisatud veerud automaatselt valitud laiusega[\/caption]\r\n\r\nSama moodi saab vajadusel automaatselt ridu lisada, n\u00e4iteks m\u00e4\u00e4rame automaatselt lisatavate ridade k\u00f5rguseks 100px, lisame grid-konteineri kujundusse rea:\r\n<p style=\"padding-left: 40px;\">grid-auto-rows: 100px<\/p>\r\npaigutame \u00fche grid-elemendi kolmandasse ritta, mida pole olemas:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">item2 {\r\n  grid-column: 5 \/ 6;\r\n  grid-row: 3 \/ 4;\r\n}<\/pre>\r\n[caption id=\"attachment_469\" align=\"aligncenter\" width=\"350\"]<img class=\"wp-image-469\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_18.png\" alt=\"Automaatselt lisatud 1 rida k\u00f5rgusega 100px ja 3 veergu laisega 100px\" width=\"350\" height=\"215\" \/> Automaatselt lisatud 1 rida k\u00f5rgusega 100px ja 3 veergu laisega 100px[\/caption]\r\n<h3>Elementide automaatne paigutus v\u00f5restikul<\/h3>\r\nNende elementide jaoks v\u00f5restikul, mille jaoks pole asukohta m\u00e4\u00e4ratud, saab kasutada automaatset paigutamist.\r\n\r\nKasutada saab <em>grid-auto-flow<\/em> omadust, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li>row \u2013 algoritm \u00fcritab j\u00e4rjest \u00e4ra t\u00e4ita k\u00f5ik v\u00f5restiku read (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t<li>column \u2013 algoritm \u00fcritab j\u00e4rjest t\u00e4ita v\u00f5restiku veerud;<\/li>\r\n \t<li>row dense \u2013 algoritm \u00fcritab ridu t\u00e4ita paigutades j\u00e4rgnevaid v\u00e4iksemaid elemente eespool olevatele t\u00fchjadele kohtadele;<\/li>\r\n \t<li>column dense \u2013 algoritm \u00fcritab veergusid t\u00e4ita paigutades j\u00e4rgnevaid v\u00e4iksemaid elemente eespool olevatele t\u00fchjadele kohtadele.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n  grid-template-columns: auto auto auto auto;\r\n  grid-template-rows: auto auto;\r\n  grid-auto-flow: row dense;\r\n}<\/pre>\r\n<h3>V\u00f5restiku defineerimine ja kujundamine l\u00fchidalt<\/h3>\r\nOmadusi <em>grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns<\/em> ja <em>grid-auto-flow<\/em> saab l\u00fchidalt kirja panna omaduse <em>grid<\/em> abil.\r\n<h2>Grid-elementide omadused<\/h2>\r\nGrid-elementide omadused m\u00e4\u00e4ravad, kuidas need elemendid v\u00f5restikul paiknevad.\r\n<h3>Grid-elementide paigutamine ridadele ja veergudele<\/h3>\r\nKui grid-elementidele ei m\u00e4\u00e4rata, kuidas nad paiknevad, siis paigutatakse nad automaatselt j\u00e4rjest v\u00f5restiku ridade ja veergude ristumisel moodustuvatesse \u201elahtritesse\u201c.\r\n\r\nN\u00e4iteks on j\u00e4rgmises n\u00e4ites defineeritud s\u00f5restik 4 veeru ja 3 reaga aga HTML koodis vaid 5 grid-elementi.\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  background-color: #AAAAFF;\r\n  display: grid;\r\n  grid-template-columns: 200px auto 50px 200px;\r\n  grid-template-rows: 150px auto 50px;\r\n  grid-column-gap: 15px;\r\n  grid-row-gap: 20px;\r\n}\r\n.grid-item{\r\n  background-color: rgba(255,255,255,.6);\r\n  border: 1px solid white; text-align: center;\r\n  font-family: verdana;\r\n  font-size: 1em;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_470\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-470\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_19.png\" alt=\"Grid-elemendid on paigutatud automaatselt\" width=\"500\" height=\"155\" \/> Grid-elemendid on paigutatud automaatselt[\/caption]\r\n<h4>Grid-elemendi m\u00e4\u00e4ramine veeru-joonte j\u00e4rgi<\/h4>\r\nM\u00e4\u00e4ramaks grid-elemendi asukohta ja suurust veeru-joonte (<em>column-line<\/em>) j\u00e4rgi, saab kasutada omadusi <em>grid-column-start<\/em> ja <em>grid-column-end<\/em>. Neil m\u00f5lemal saab kasutada j\u00e4rgmiseid v\u00e4\u00e4rtuseid:\r\n<ul>\r\n \t<li>joon \u2013 veeru-joone number v\u00f5i nimi, millest grid-element algab v\u00f5i millel l\u00f5ppeb;<\/li>\r\n \t<li><em>auto<\/em> \u2013 m\u00e4\u00e4rab automaatse paigutuse ja ulatuse veergude suhtes (vaikev\u00e4\u00e4rtus).<\/li>\r\n<\/ul>\r\nN\u00e4iteks on esimesele, teisele ja kolmandale grid-elemendile m\u00e4\u00e4ratud alustamine esimeselt veeru-joonelt:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.item1, .item2, .item5 {\r\n  grid-column-start: 1;\r\n}\r\n<\/pre>\r\n[caption id=\"attachment_472\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-472\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_20.png\" alt=\"Esimene, teine ja kolmas grid-element algavad esimesest veeru-joonest\" width=\"500\" height=\"154\" \/> Esimene, teine ja kolmas grid-element algavad esimesest veeru-joonest[\/caption]\r\n\r\nN\u00e4iteks on esimesele ja viiendale elemendile m\u00e4\u00e4ratud ulatumine \u00fcle k\u00f5igi veergude:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.item1, .item5 {\r\n  grid-column-start: 1;\r\n  grid-column-end: 5;\r\n}<\/pre>\r\n[caption id=\"attachment_473\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-473\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_21.png\" alt=\"Esimesele ja viiendale grid-elemendile on m\u00e4\u00e4ratud ulatumine (span) \u00fcle nelja veeru\" width=\"500\" height=\"154\" \/> Esimesele ja viiendale grid-elemendile on m\u00e4\u00e4ratud ulatumine (<em>span<\/em>) \u00fcle nelja veeru[\/caption]\r\n<h4>Grid-elemendi m\u00e4\u00e4ramine rea-joonte j\u00e4rgi<\/h4>\r\nM\u00e4\u00e4ramaks grid-elemendi asukohta ja suurust rea-joonte (<em>row-line<\/em>) j\u00e4rgi, saab kasutada omadusi <em>grid-row-start<\/em> ja <em>grid-row-end<\/em>. Neil m\u00f5lemal saab kasutada j\u00e4rgmiseid v\u00e4\u00e4rtuseid:\r\n<ul>\r\n \t<li>joon \u2013 rea-joone number v\u00f5i nimi, millest grid-element algab v\u00f5i millel l\u00f5ppeb;<\/li>\r\n \t<li><em>auto<\/em> \u2013 m\u00e4\u00e4rab automaatse paigutuse ja ulatuse ridade suhtes (vaikev\u00e4\u00e4rtus).<\/li>\r\n<\/ul>\r\nN\u00e4iteks on viiendale elemendile m\u00e4\u00e4ratud alustamine kolmandalt realt ehk neljandalt reajoonelt.\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.item5 {\r\n  grid-row-start: 4;\r\n}<\/pre>\r\n[caption id=\"attachment_474\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-474\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_22.png\" alt=\"Viies grid-element algab neljandalt rea-joonelt\" width=\"500\" height=\"158\" \/> Viies grid-element algab neljandalt rea-joonelt[\/caption]\r\n<h4>Kompaktsemad omadused elementide rea-joonte ning veeru-joonte j\u00e4rgi paigutamiseks<\/h4>\r\nGrid-elementide paigutamiseks veeru-joonte ja rea-joonte j\u00e4rgi saab kasutada ka kombineeritud omadusi <em>grid-column<\/em> ja <em>grid-row<\/em>, mille v\u00e4\u00e4rtustena antakse korraga nii jooned, millelt element algab kui ka jooned, millel element l\u00f5ppeb. Alguse ja l\u00f5pu joone eraldajaks on kaldkriips \u201e\/\u201c.\r\n\r\nN\u00e4iteks elemendid 1 ja 5 paigutuvad \u00fcleeelmisel joonisel ka j\u00e4rgmise stiiliga:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.item1, .item5 {\r\n  grid-column: 1 \/ 5;\r\n}<\/pre>\r\n<h3>Grid-elementide nimetamine sidumiseks piirkondadega<\/h3>\r\nVeebilehe sisuelemente, mis on grid-elementideks, saab loodud v\u00f5restikuga siduda ka nimede kaudu jagades v\u00f5restiku piirkondades.\r\n\r\nGrid-elementidele nimede defineerimiseks kasutatakse omadust <em>grid-area<\/em>. Selle omaduse v\u00e4\u00e4rtuseks on reeglina tekst.\r\n\r\nN\u00e4iteks defineerime CSS klassid piirkondade jaoks:\r\n<p style=\"padding-left: 40px;\"><em>.area-header {grid-area: page_header;}<\/em>\r\n<em>.area-menu {grid-area: page_menu;}<\/em>\r\n<em>.area-content {grid-area: page_content;}<\/em>\r\n<em>.area-side {grid-area: page_side;}<\/em>\r\n<em>.area-footer {grid-area: page_footer;}<\/em><\/p>\r\nNeid nimetusi kasutatakse v\u00f5restiku enda omadustes ridade kaupa piirkondade m\u00e4\u00e4ramisel.\r\n\r\nAlternatiivselt v\u00f5ib omadust <em>grid-area<\/em> kasutada grid-elemendi paigutuse m\u00e4\u00e4ramiseks veerujoonte ja rea-joonte j\u00e4rgi l\u00fchemal kujul. Sellisel juhul pannakse kaldkriipsudena eraldatult kirja omaduste <em>grid-row-start, grid-column-start, grid-row-end<\/em> ja <em>grid-column-end<\/em> v\u00e4\u00e4rtused.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.area-content {\r\n  grid-area:2 \/ 2 \/3 \/3;\r\n}<\/pre>\r\n<h3>Grid-elemendi sisu joondamine<\/h3>\r\nGrid-elemendi sisu saab joondada nii rea (row axis) telge m\u00f6\u00f6da ehk horisontaalselt kui ka veeru (<em>column axis<\/em>) telge m\u00f6\u00f6da ehk vertikaalselt.\r\n\r\n<span class=\"nb\">NB! K\u00f5igi v\u00f5restikule paigutatud grid-elementide sisu korraga joondamiseks v\u00f5ib kasutada ka grid-konteineri omadusi <em>justify-items<\/em> (horisontaalselt joondamiseks) ning <em>align-items<\/em> (vertikaalseks joondamiseks).<\/span>\r\n<h4 style=\"margin-top: 2.14286em; margin-bottom: 1.42857em; word-spacing: 0px;\">Grid-elemendi sisu joondamine horisontaalselt<\/h4>\r\nGrid-elemendi joondamiseks horisontaalselt kasutatakse omadust <em>justify-self<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li>start \u2013 sisu joondatakse elemendi vasakusse serva;<\/li>\r\n \t<li>end \u2013 sisu joondatakse elemendi paremasse serva;<\/li>\r\n \t<li>center \u2013 sisu joondatakse elemendi keskele;<\/li>\r\n \t<li>stretch \u2013 sisu t\u00e4idab terve elemendi sisu (vaikev\u00e4\u00e4rtus).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.area-content {\r\n  grid-area: page_content;\r\n  justify-self: end;\r\n}<\/pre>\r\n[caption id=\"attachment_475\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-475\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_23.png\" alt=\"Grid-elemendi page_content sisu t\u00e4idab terve v\u00f5imaliku laiuse (justify-self: stretch)\" width=\"500\" height=\"200\" \/> Grid-elemendi <em>page_content<\/em> sisu t\u00e4idab terve v\u00f5imaliku laiuse (<em>justify-self: stretch<\/em>)[\/caption]\r\n\r\n[caption id=\"attachment_476\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-476\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_24.png\" alt=\"Grid-elemendi sisu on joondatud paremasse serva (justify-self: end)\" width=\"500\" height=\"197\" \/> Grid-elemendi sisu on joondatud paremasse serva (<em>justify-self: end<\/em>)[\/caption]\r\n<h4>Grid-elemendi sisu joondamine vertikaalselt<\/h4>\r\nGrid-elemendi joondamiseks horisontaalselt kasutatakse omadust<em> justify-self<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li>start \u2013 sisu joondatakse elemendi \u00fclemisse serva;<\/li>\r\n \t<li>end \u2013 sisu joondatakse elemendi alumisse serva;<\/li>\r\n \t<li>center \u2013 sisu joondatakse vertikaalselt elemendi keskele;<\/li>\r\n \t<li>stretch \u2013 sisu t\u00e4idab terve elemendi sisu (vaikev\u00e4\u00e4rtus).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.area-content {\r\n  grid-area: page_content;\r\n  align-self: center;\r\n}<\/pre>\r\n[caption id=\"attachment_477\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-477\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_25.png\" alt=\"Grid-elemendi sisu on joondatud vertikaalselt keskele (align-self: center)\" width=\"500\" height=\"200\" \/> Grid-elemendi sisu on joondatud vertikaalselt keskele (<em>align-self: center<\/em>)[\/caption]","rendered":"<p>Erinevate ekraanisuuruste aga ka erinevate seadmetega kohandumiseks pakub CSS mitmeid erinevaid vahendeid.<\/p>\n<p>Kohandumist v\u00f5ib jagada kahte kategooriasse:<\/p>\n<ul>\n<li><em>adaptive<\/em> \u2013 adaptiivne ehk kohanev. Sellisel juhul muutub veebilehe elementide suurus ja paigutus astmeliselt, sammude kaupa. M\u00e4\u00e4ratakse justkui murdepunktid (<em>breakpoints<\/em>), mis m\u00e4\u00e4ravad l\u00e4vendid, mille puhul rakendub teistsugune kujundus. Sellise kohandamise peamine t\u00f6\u00f6riist on meediap\u00e4ringud (<em>media queries<\/em>). Samuti sobib siia kategooriasse HTML <code>&lt;picture&gt;<\/code> element, mis muudab pildi kohanduvateks.<\/li>\n<li><em>responsive<\/em> \u2013 kiirelt reageeriv, operatiivne. Sellisel juhul on kujundus sujuvalt muutuv (<em>fluid<\/em>). Kiirelt reageeriva (<em>responsive<\/em>) disaini elementide paigutamise jaoks pakub CSS kaht erinevat vahendite komplekti, millega veebilehe elemente paigutada: <em>flexbox<\/em> ja <em>grid<\/em>. <em>Flexbox<\/em> paigutab elemente \u00fchesuunaliselt (horisontaalselt v\u00f5i vertikaalselt), <em>grid<\/em> aga kahesuunaliselt. T\u00f5eliselt kohanduva kujunduse loomiseks kasutatakse neid koos.<\/li>\n<\/ul>\n<p>Oluline vahend kohanduva disaini jaoks on ka vaateava (<em>viewport<\/em>), mida kasutatakse lehe elementide suuruse m\u00e4\u00e4ramiseks.<\/p>\n<h1>Meediap\u00e4ringud<\/h1>\n<p>Samuti nagu HTML v\u00f5imaldab m\u00e4\u00e4rata erinevaid stiililehti (CSS faile) erinevate seadmete jaoks, saab ka CSS vahenditega defineerida erinevaid kujundusi erinevatel v\u00e4ljundseadmetel kasutamiseks.<\/p>\n<p>Selleks saab kasutada <em>@media<\/em> reeglit (<em>rule<\/em>), mis keskendub erinevate meediaseadmete erinevatele v\u00f5imalustele.<\/p>\n<p>S\u00fcntaks n\u00e4eb ette meediat\u00fc\u00fcbi ja\/v\u00f5i \u00fche v\u00f5i mitme avaldise (loogika) kirjutamise:<\/p>\n<p style=\"padding-left: 40px;\"><em>@media not|only mediatype and|not|only (meedia omadused) {<\/em><br \/>\n<em>\u00a0 CSS-kood;<\/em><br \/>\n<em>}<\/em><\/p>\n<p>CSS3 toetab j\u00e4rgmiseid meediat\u00fc\u00fcpe:<\/p>\n<ul>\n<li><em> all<\/em> \u2013 k\u00f5ik seadmed;<\/li>\n<li><em>print<\/em> \u2013 printerid;<\/li>\n<li><em>screen<\/em> \u2013 arvutiekraani, tahvelarvutid, nutitelefond jne;<\/li>\n<li><em>speech<\/em> \u2013 k\u00f5nes\u00fcntees (n\u00e4gemispuudega inimeste ekraanilugerid).<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@media print {\r\n  body {\r\n    background-color: white;\r\n  }\r\n}\r\n<\/pre>\n<p>Meedia omadustena (<em>media features<\/em>) on kasutatavad j\u00e4rgmised omadused:<\/p>\n<ul>\n<li><em>aspect-ratio<\/em> \u2013 v\u00e4ljundi laiuse\/k\u00f5rguse suhe (n\u00e4iteks 16\/9, kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\n<li><em>color<\/em> \u2013 v\u00e4ljundseadme ekraani v\u00e4rvuss\u00fcgavus (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\n<li><em>color-index<\/em> \u2013 v\u00e4rvide arv, mida v\u00e4ljundseadme ekraan suudab n\u00e4idata (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\n<li><em>device-aspect-ratio<\/em> \u2013 v\u00e4ljundseadme\/paberi laiuse\/k\u00f5rguse suhe (n\u00e4iteks 16\/9, kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\n<li><em>device-width<\/em> \u2013 v\u00e4ljundseadme\/paberi laius (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\n<li><em>device-height<\/em> \u2013 v\u00e4ljundseadme\/paberi k\u00f5rgus (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\n<li><em>grid<\/em> \u2013 kas v\u00e4ljundseade on v\u00f5rgustikuga (<em>grid,<\/em> kindel arv ridu ja s\u00fcmboleid) v\u00f5i rastergraafika (<em>bitmap<\/em>) seade (\u201e1\u201c \u2013 <em>grid<\/em>, \u201e0\u201c \u2013 muu variant).<\/li>\n<li><em>height<\/em> \u2013 n\u00e4htava ala k\u00f5rgus (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\n<li><em>width<\/em> \u2013 n\u00e4htava ala laius (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\n<li><em>resolution<\/em> \u2013 v\u00e4ljundi punktitihedus dpi v\u00f5i dpcm (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\n<li><em>orientation<\/em> \u2013 v\u00e4ljundi orientatsioon (\u201e<em>portrait<\/em>\u201c v\u00f5i \u201e<em>landscape<\/em>\u201c);<\/li>\n<li><em>monochrome<\/em> \u2013 bittide arv piksli kohta monokroomse v\u00e4ljundi puhul (<em>bits per pixel in a monochrome frame buffer<\/em>) (kasutada saab eesliiteid \u201e<em>min<\/em>-\u201c ja \u201e<em>max<\/em>-\u201c);<\/li>\n<li><em>scan<\/em> \u2013 kasutatava TV-ekraani realaotusmeetod <em>(\u201eprogressive\u201c<\/em> v\u00f5i \u201e<em>interlace<\/em>\u201c);<\/li>\n<li><em>update-frequency<\/em> \u2013 kui kiiresti meediaseade sisu muuta suudab, v\u00e4\u00e4rtused <em>none<\/em> (ei muudeta, n\u00e4iteks paberil), <em>slow<\/em> (ei toeta sujuvaid animatsioone jms, n\u00e4iteks e-ink ekraanid), <em>normal<\/em> (tavaline, kiiruspiiranguid pole, tavalised ekraanid jms).<\/li>\n<\/ul>\n<p>N\u00e4iteks pealkirjade ette v\u00e4ike logo:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@media screen and (min-width: 900px) {\r\n  h1:before h2:before h3:before {\r\n    content: url(\u201epildid\/logo_bullet.png\u201c);\r\n  }\r\n}<\/pre>\n<h1>Viewport<\/h1>\n<p>Vaateava ehk <em>viewport<\/em> on veebilehe vaatajale n\u00e4htav ala. Selle suurus s\u00f5ltub seadmest, mida veebilehe vaatamiseks kasutatakse.<\/p>\n<p>Vaateava kasutamiseks tuleb veebilehe p\u00e4ises kirja panna vastav <em>meta<\/em> element.<\/p>\n<p>Vaateavaga on seotud m\u00f5\u00f5t\u00fchikud, mis viitavad sajandikule (1%) vaateava m\u00f5\u00f5tudest ning mida kasutatakse kohanduva kujunduse puhul erinevate suuruste m\u00e4\u00e4ramiseks veebilehel.<\/p>\n<p>Vaateava suurusega seotud m\u00f5\u00f5t\u00fchikud (<em>viewport-relative units<\/em>) on:<\/p>\n<ul>\n<li><em>vw<\/em> \u2013 1% vaateava laiusest (<em>viewport width<\/em>);<\/li>\n<li><em>vh<\/em> \u2013 1% vaateava k\u00f5rgusest (<em>viewport height<\/em>);<\/li>\n<li><em>vmin<\/em> \u2013 1% vaateava l\u00fchemast servast (<em>viewport minimum<\/em>), kas laiusest v\u00f5i k\u00f5rgusest olenevalt kumb on l\u00fchem;<\/li>\n<li><em>vmax<\/em> \u2013 1% vaateava pikemast servast (<em>viewport maximum<\/em>), kas laiusest v\u00f5i k\u00f5rgusest olenevalt kumb on pikem.<\/li>\n<\/ul>\n<h1>Flexbox<\/h1>\n<p>Flexbox v\u00f5imaldab mingi ploki piires elemente automaatselt paigutada, jaotada, nende suurust muuta jne.<\/p>\n<p>Flexbox-i puhul m\u00e4\u00e4ratakse omadusi elemendile, mille sees t\u00fctarelemente paigutama hakatakse ehk flex-konteinerile (<em>flex-container<\/em>) ja elementidele, mida paigutatakse ehk flexelementidele (<em>flex-item<\/em>).<\/p>\n<p>Selleks, et mingi element (n\u00e4iteks <code>&lt;div&gt;<\/code>) muuta flex-konteineriks, tuleb tema <em>display<\/em> omaduse v\u00e4\u00e4rtuseks m\u00e4\u00e4rata <em>flex<\/em> v\u00f5i <em>inline-flex.<\/em><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.suursisu {\r\n  display: flex;\r\n}<\/pre>\n<p>J\u00e4rgnevatel joonistel on leht, mille sisu on \u00fche <code>&lt;div&gt;<\/code> elemendi sees, alguses tavap\u00e4raselt ja siis on sama <code>&lt;div&gt;<\/code> flex-konteinerina.<\/p>\n<figure id=\"attachment_414\" aria-describedby=\"caption-attachment-414\" style=\"width: 375px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-414\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_1-1.png\" alt=\"Veebi sisu tavap\u00e4raselt\" width=\"375\" height=\"268\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_1-1.png 710w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_1-1-300x214.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_1-1-65x46.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_1-1-225x161.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_1-1-350x250.png 350w\" \/><figcaption id=\"caption-attachment-414\" class=\"wp-caption-text\">Veebi sisu tavap\u00e4raselt<\/figcaption><\/figure>\n<figure id=\"attachment_418\" aria-describedby=\"caption-attachment-418\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-418\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_2-2.png\" alt=\"Sama veebilehe sisu flex-konteineris\" width=\"450\" height=\"116\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_2-2.png 897w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_2-2-300x78.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_2-2-768x199.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_2-2-65x17.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_2-2-225x58.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_2-2-350x91.png 350w\" \/><figcaption id=\"caption-attachment-418\" class=\"wp-caption-text\">Sama veebilehe sisu flex-konteineris<\/figcaption><\/figure>\n<p>J\u00e4rgnevalt anname \u00fclevaate omadustest, millega m\u00e4\u00e4ratakse flex-konteineri omadused ja konteineri sisse paigutatud flex-elementide omadused.<\/p>\n<h2>Flex-konteineri omadused<\/h2>\n<p>Flex-konteineri omadused m\u00e4\u00e4ravad flex-elementide paigutuse ridadesse\/veergudesse ja nende ridade\/veergude omadused.<\/p>\n<h3>Flex konteineri sisu paigutamise suund<\/h3>\n<p>Kogu sellise flex-konteineri sisu paigutatakse vastavalt m\u00e4\u00e4ratud reeglitele. Vaikimisi kasutatakse horisontaalset paigutust vasakult paremale.<\/p>\n<p>Suunda saab muuta n\u00e4iteks kogu veebilehele direction omadust m\u00e4\u00e4rates (n\u00e4iteks <em>rtl \u2013 right to left<\/em>)<\/p>\n<p>Flex-konteneri sees m\u00e4\u00e4rab elementide j\u00e4rjestuse suuna omadus <em>flex-direction<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>row<\/em> \u2013 vaikev\u00e4\u00e4rtus, elemendid paigutatakse vasakult paremale, \u00fclevalt alla.<\/li>\n<li><em>row<\/em>&#8211;<em>reverse<\/em> \u2013 elemendid paigutatakse paremalt vasakule.<\/li>\n<li><em>column<\/em> \u2013 elemendid paigutatakse vertikaalselt.<\/li>\n<li><em>column<\/em>-reverse \u2013 elemendid paigutatakse vertikaalselt, alt \u00fclespoole.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.suursisu {\r\n  display: flex;\r\n  flex-direction: row-reverse;\r\n}<\/pre>\n<figure id=\"attachment_419\" aria-describedby=\"caption-attachment-419\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-419\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_3-1.png\" alt=\"Flex-konteiner elemendid reas vastupidi (row-reverse)\" width=\"450\" height=\"115\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_3-1.png 890w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_3-1-300x77.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_3-1-768x196.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_3-1-65x17.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_3-1-225x57.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_3-1-350x89.png 350w\" \/><figcaption id=\"caption-attachment-419\" class=\"wp-caption-text\">Flex-konteiner elemendid reas vastupidi (<em>row-reverse<\/em>)<\/figcaption><\/figure>\n<h3>Flex elementide joondamine<\/h3>\n<p>Kui elemendid flex-konteineris ei kata real\/veerus v\u00f5imalikku ruumi, siis saab neid joondada kasutades omadust <em>justify-content<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>flex-start<\/em> \u2013 elemendid paigutatakse konteineri algusesse (vaikev\u00e4\u00e4rtus).<\/li>\n<li><em>flex-end<\/em> \u2013 elemendid paigutatakse konteineri l\u00f5ppu.<\/li>\n<li><em>center<\/em> \u2013 elemendid paigutatakse konteineri keskele.<\/li>\n<li><em>space-between<\/em> \u2013 elementide vahele paigutatakse t\u00fchja ruumi (nagu teksti r\u00f6\u00f6pselt joondamine).<\/li>\n<li><em>space-around<\/em> \u2013 elementide vahele, ette ja j\u00e4rele paigutatakse t\u00fchja ruumi.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">.suursisu {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}<\/pre>\n<figure id=\"attachment_420\" aria-describedby=\"caption-attachment-420\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-420\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_4.png\" alt=\"Flex-konteiner, elemendid \u00fchtlaselt jaotatud (space-between)\" width=\"450\" height=\"115\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_4.png 888w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_4-300x77.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_4-768x196.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_4-65x17.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_4-225x58.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_4-350x89.png 350w\" \/><figcaption id=\"caption-attachment-420\" class=\"wp-caption-text\">Flex-konteiner, elemendid \u00fchtlaselt jaotatud (<em>space-between<\/em>)<\/figcaption><\/figure>\n<p>Risti sisu paigutamise suunaga (<em>flex-direction<\/em>) saab elemente flex-konteineris joondada omadusega <em>align-items<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>stretch<\/em> \u2013 elemendid venitatakse k\u00f5rgemaks, et t\u00e4ita kogu flex-konteineri k\u00f5rgus (vaikev\u00e4\u00e4rtus).<\/li>\n<li><em>flex-start<\/em> \u2013 elemendid paigutatakse konteineri \u00fclaserva.<\/li>\n<li><em>flex-end<\/em> \u2013 elemendid paigutatakse konteineri alumisele servale.<\/li>\n<li><em>center<\/em> \u2013 elemendid paigutatakse konteinerisse vertikaalselt keskele.<\/li>\n<li><em>baseline<\/em> \u2013 elemendid paigutatakse konteineri baasjoonele (<em>baseline<\/em>).<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.suursisu {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n}\r\n<\/pre>\n<figure id=\"attachment_421\" aria-describedby=\"caption-attachment-421\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-421\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_5.png\" alt=\"Flex elemendid vertikaalselt venitatud (stretch)\" width=\"450\" height=\"196\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_5.png 883w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_5-300x131.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_5-768x335.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_5-65x28.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_5-225x98.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_5-350x153.png 350w\" \/><figcaption id=\"caption-attachment-421\" class=\"wp-caption-text\">Flex elemendid vertikaalselt venitatud (<em>stretch<\/em>)<\/figcaption><\/figure>\n<figure id=\"attachment_422\" aria-describedby=\"caption-attachment-422\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-422\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_6.png\" alt=\"Flex elemendid paigutatud konteineri \u00fclaserva (flex-start)\" width=\"450\" height=\"198\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_6.png 881w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_6-300x132.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_6-768x337.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_6-65x29.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_6-225x99.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_6-350x154.png 350w\" \/><figcaption id=\"caption-attachment-422\" class=\"wp-caption-text\">Flex elemendid paigutatud konteineri \u00fclaserva (<em>flex-start<\/em>)<\/figcaption><\/figure>\n<h3>Flex ridade\/veergude murdmine<\/h3>\n<p>Juhuks, kui flex-konteiner pole piisavalt suur, et k\u00f5ik elemendid mahuksid \u00fchele reale v\u00f5i \u00fchte veergu, saab m\u00e4\u00e4rata rea murdmist (<em>wrap<\/em>). Selleks on omadus <em>flex-wrap<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>nowrap<\/em> \u2013 ridade\/veergude murdmist ei toimu (vaikev\u00e4\u00e4rtus).<\/li>\n<li><em>wrap<\/em> \u2013 ridade veergude murdmine toimub vastavalt vajadusele.<\/li>\n<li><em>wrap reverse<\/em> \u2013 ridade murdmine vastupidises j\u00e4rjestuses (hoopis alt \u00fcles vms).<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">suursisu {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n}<\/pre>\n<figure id=\"attachment_423\" aria-describedby=\"caption-attachment-423\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-423\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_7.png\" alt=\"Flex elemendid ei mahu reale, toimub ridade murdmine (wrap)\" width=\"450\" height=\"250\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_7.png 703w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_7-300x167.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_7-65x36.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_7-225x125.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_7-350x195.png 350w\" \/><figcaption id=\"caption-attachment-423\" class=\"wp-caption-text\">Flex elemendid ei mahu reale, toimub ridade murdmine (<em>wrap<\/em>)<\/figcaption><\/figure>\n<figure id=\"attachment_424\" aria-describedby=\"caption-attachment-424\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-424\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_8.png\" alt=\"Flex elemendid ei mahu reale, toimub ridade murdmine tagurpidi j\u00e4rjestuses (wrap-reverse)\" width=\"450\" height=\"251\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_8.png 702w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_8-300x167.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_8-65x36.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_8-225x125.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_8-350x195.png 350w\" \/><figcaption id=\"caption-attachment-424\" class=\"wp-caption-text\">Flex elemendid ei mahu reale, toimub ridade murdmine tagurpidi j\u00e4rjestuses (<em>wrap-reverse<\/em>)<\/figcaption><\/figure>\n<h3>Flex ridade joondus<\/h3>\n<p>Sarnaselt \u00fcksikutele elementidele flex-konteineri reas\/veerus, saab joondada ka terveid elementide ridu\/veergusid. Selleks on omadus <em>align-content<\/em> j\u00e4rgmiste v\u00f5imalike v\u00e4\u00e4rtustega:<\/p>\n<ul>\n<li><em>stretch<\/em> \u2013 ridu venitatakse nii, et nad t\u00e4idavad kogu olemasoleva ruumi (vaikev\u00e4\u00e4rtus);<\/li>\n<li><em>flex-start<\/em> \u2013 read paigutatakse flex-konteineri algusesse.<\/li>\n<li><em>flex-end<\/em> \u2013 read paigutatakse flex-konteineri l\u00f5ppu.<\/li>\n<li><em>center<\/em> \u2013 read paigutatakse flex-konteineri keskele,<\/li>\n<li><em>space-between<\/em> \u2013 ridade vahele paigutatakse lisaruumi, et katta kogu flex-konteiner.<\/li>\n<li><em>space-around<\/em> \u2013 read paigutatakse \u00fchtlaselt, ruumi lisatakse enne ja p\u00e4rast ridu ning ridade vahele<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.suursisu {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  align-content: space-between;\r\n}\r\n<\/pre>\n<figure id=\"attachment_426\" aria-describedby=\"caption-attachment-426\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-426\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_9.png\" alt=\"flex-ridade joondus stretch\" width=\"450\" height=\"269\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_9.png 698w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_9-300x179.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_9-65x39.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_9-225x134.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_9-350x209.png 350w\" \/><figcaption id=\"caption-attachment-426\" class=\"wp-caption-text\">flex-ridade joondus <em>stretch<\/em><\/figcaption><\/figure>\n<figure id=\"attachment_427\" aria-describedby=\"caption-attachment-427\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-427\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_10.png\" alt=\"flex-ridade joondus space-between\" width=\"450\" height=\"268\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_10.png 697w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_10-300x179.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_10-65x39.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_10-225x134.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_10-350x208.png 350w\" \/><figcaption id=\"caption-attachment-427\" class=\"wp-caption-text\">flex-ridade joondus space-between<\/figcaption><\/figure>\n<h3>Flex-konteineri sisu paigutamise suund ja ridade\/veergude murdmine koos<\/h3>\n<p>Ajalooliselt on flex-konteineri jaoks v\u00e4lja m\u00f5eldud ka elementide paigutamisega seotud omaduse <em>flex-direction<\/em> ja ridade\/veergude murdmise omaduse <em>flex-wrap<\/em> kombinatsioon \u2013 <em>flex-flow<\/em>.<\/p>\n<p>Omadus pannakse kirja j\u00e4rgmiselt:<\/p>\n<p style=\"padding-left: 40px;\"><em>flex-flow: flex-direction flex-wrap;<\/em><\/p>\n<h2>Flex-elementide omadused<\/h2>\n<p>Lisaks flex-kontainerile saab omadusi m\u00e4\u00e4rata ka flex-elementidele \u00fchekaupa.<\/p>\n<h3>Flex-elemendi j\u00e4rjestuse muutmine<\/h3>\n<p>Kui on tarvis m\u00f5nd flex-elementi teiste suhtes ette v\u00f5i tahapoole nihutada, siis kasutatakse omadust <em>order<\/em>, mille v\u00e4\u00e4rtuseks on positiivne v\u00f5i negatiivne arv. Negatiivsed t\u00f5stavad elemendi ettepoole, positiivsed tahapoole.<\/p>\n<p>V\u00e4\u00e4rtus 0 j\u00e4tab elemendi omale kohale.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">ettepoole {\r\n  order: -1;\r\n}<\/pre>\n<figure id=\"attachment_428\" aria-describedby=\"caption-attachment-428\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-428\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_11.png\" alt=\"Teine sisuplokk t\u00f5stetud \u00fche koha v\u00f5rra ettepoole (order: -1)\" width=\"450\" height=\"272\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_11.png 681w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_11-300x181.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_11-65x39.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_11-225x136.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/flex_11-350x212.png 350w\" \/><figcaption id=\"caption-attachment-428\" class=\"wp-caption-text\">Teine sisuplokk t\u00f5stetud \u00fche koha v\u00f5rra ettepoole (<em>order: -1<\/em>)<\/figcaption><\/figure>\n<h3>Flex-elemendi joondamine<\/h3>\n<p>Kui on vaja m\u00f5nd elementi flex-konteineris eriliselt joondada, siis saab kasutada omadust <em>align-self<\/em>, millel on samad v\u00f5imalikud v\u00e4\u00e4rtused, nagu <em>align-items<\/em> omadusel.<\/p>\n<p>Selle omaduse kasutamisel eiratakse flex-konteineri <em>align-items<\/em> v\u00e4\u00e4rtust.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.ettepoole {\r\n  order: -1;\r\n  align-self: flex-start;\r\n}<\/pre>\n<h3>Flex-elemendi suhteline suurus<\/h3>\n<p>Flex konteineris saab k\u00f5igile elementidele m\u00e4\u00e4rata ka nende suurust. Selleks kasutatakse omadust <em>flex-basis<\/em>, mille v\u00e4\u00e4rtuseks v\u00f5ib olla:<\/p>\n<ul>\n<li><em>auto<\/em> \u2013 flex-elemendi suurus m\u00e4\u00e4ratakse tema sisu j\u00e4rgi (vaikev\u00e4\u00e4rtus).<\/li>\n<li><em>t\u00e4isarv<\/em> \u2013 kasutada v\u00f5ib k\u00f5iki t\u00fc\u00fcpilisi m\u00f5\u00f5t\u00fchikuid (px, pt, cm, em, %).<\/li>\n<li><em>initial<\/em> \u2013 seab v\u00e4\u00e4rtuse vaikev\u00e4\u00e4rtusele.<\/li>\n<li><em>inherit<\/em> \u2013 v\u00e4\u00e4rtus p\u00e4ritakse vanem-elemendilt.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.pisike {\r\n  flex-basis: 200px;\r\n}<\/pre>\n<p>Kuna flex-konteineris elementide m\u00f5\u00f5dud vastavalt konteineri m\u00f5\u00f5tudele d\u00fcnaamiliselt muutuvad, siis pakutakse ka v\u00f5imalust m\u00e4\u00e4rata, kui palju elementide m\u00f5\u00f5dud teiste suhtes kasvavad v\u00f5i kahanevad.<\/p>\n<p>Elemendi suurenemist reguleerib omadus <em>flex-grow<\/em>, mille v\u00e4\u00e4rtuseks on positiivne t\u00e4isarv (vaikev\u00e4\u00e4rtuseks on 0).<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.veerand {\r\n  flex-grow: 1;\r\n}\r\n.pool {\r\n  flex-grow: 2;\r\n}<\/pre>\n<p>Sarnaselt reguleerib elementide kahanemist omadus<em> flex-shrink<\/em>. Erinevuseks aga, et vaikev\u00e4\u00e4rtuseks on 1.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.tava {\r\n  flex-shrink: 2;\r\n}\r\n.kahanev {\r\n  flex-grow: 4;\r\n}<\/pre>\n<p>Siin kirjeldatud kolm omadust saab kirja panna l\u00fchemalt \u00fche omadusena <em>flex<\/em>. Selle puhul pannakse v\u00e4\u00e4rtused kirja j\u00e4rgmiselt:<\/p>\n<p style=\"padding-left: 40px;\"><em>flex: flex-grow flex-shrink flex-basis;<\/em><\/p>\n<p>Vaikev\u00e4\u00e4rtuseks on:<\/p>\n<p style=\"padding-left: 40px;\"><em>flex: 0 1 auto;<\/em><\/p>\n<p>Vajadusel saab elementide suurust piirata tavap\u00e4raste <em>max-width<\/em> ja <em>min-width<\/em> (ka <em>max-height<\/em> ja <em>min-height<\/em>) abil.<\/p>\n<h1>Grid<\/h1>\n<p><em>Grid<\/em> ehk v\u00f5restik on vahend veebilehe \u00fclesehituse m\u00e4\u00e4ramiseks, mis jagab lehe veergudeks ning ridadeks.<\/p>\n<p>Elementi, mille sees v\u00f5restik on, nimetatakse grid-konteineriks (<em>grid-container<\/em>). K\u00f5ik gridkonteineri otsesed t\u00fctarelemendid on grid-elemendid (<em>grid-item<\/em>).<\/p>\n<p>Tulemuse saavutamiseks m\u00e4\u00e4ratakse omadusi grid-konteinerile ja selle t\u00fctarelementidele \u2013 grid-elementidele.<\/p>\n<p>Selleks, et mingi element (n\u00e4iteks <code>&lt;div&gt;<\/code>) muuta grid-konteineriks, tuleb tema kujunduses <em>display<\/em> omaduse v\u00e4\u00e4rtuseks m\u00e4\u00e4rata <em>grid<\/em> v\u00f5i <em>inline-grid<\/em>. Kui element on ise suurema gridkonteineri t\u00fctarelemendiks, siis v\u00f5ib kasutada ka v\u00e4\u00e4rtus <em>subgrid<\/em>, et tema ridade ja veergude<br \/>\nm\u00f5\u00f5dud v\u00f5etakse vanemelemendi j\u00e4rgi.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>NB! Grid\u2019i kasutamiseks soovitatakse veebilehe elementide suuruse m\u00e4\u00e4ramiseks kasutada l\u00e4henemist, kus elemendi raamjoone paksus ning polster sisalduvad elemendi m\u00f5\u00f5tmetes (<em>box-sizing: border-box<\/em>).<\/p>\n<p>NB! Omadused <em>column, float, clear<\/em> ja <em>vertical-align<\/em> grid-konteineri puhul ei toimi!<\/p>\n<h2>Grid-konteineri omadused<\/h2>\n<p>Grid-konteineri omadused m\u00e4\u00e4ravad, kuidas jaotatakse ruum konteineri sees. K\u00f5ige olulisem on v\u00f5restiku (<em>grid<\/em>) defineerimine.<\/p>\n<h3>V\u00f5restiku defineerimine<\/h3>\n<p>V\u00f5restik defineeritakse ridade ja veergude m\u00e4\u00e4ramisega.<\/p>\n<h4>Veergude ja ridade defineerimine<\/h4>\n<p>Grid-konteineri sees ridade ja veergude defineerimiseks kasutatakse omadusi <em>grid-template-columns<\/em> ja <em>grid-template-rows<\/em>. Loodavad veerud ja read j\u00e4\u00e4vad justkui n\u00e4htamatute joonte vahele, mida nimetatakse rea-joonteks (<em>row-line<\/em>) ja veeru-joonteks (<em>column-line<\/em>).<\/p>\n<p>Nende joonte abil saab m\u00e4\u00e4rata grid-elementide paigutust (millisest joonest millise jooneni element ulatub). Selleks on grid-elementidel vastavad omadused.<\/p>\n<p>Veergude ja ridade loomisel omadustega <em>grid-template-columns<\/em> ja <em>grid-template-rows<\/em> antakse v\u00e4\u00e4rtusteks t\u00fchikutega eraldatud loend veergude\/ridade laiusest\/k\u00f5rgusest (<em>track values<\/em>). Lisada v\u00f5ib ka rea-joonte ja\/v\u00f5i veeru-joonte nimed, mis kirjutatakse kandiliste sulgude vahele.<\/p>\n<p>Veergude\/ridade m\u00f5\u00f5tude m\u00e4\u00e4ramiseks on j\u00e4rgmised v\u00f5imalused:<\/p>\n<ul>\n<li>v\u00e4\u00e4rtus puudub \u2013 veerud v\u00f5i read luuakse vajadusel automaatselt;<\/li>\n<li><em>auto<\/em> \u2013 veeru v\u00f5i rea m\u00f5\u00f5dud m\u00e4\u00e4ratakse grid-konteineri m\u00f5\u00f5tude ja grid-elementide sisu j\u00e4rgi (vaikev\u00e4\u00e4rtus);<\/li>\n<li><em>max-content<\/em> \u2013 veeru v\u00f5i rea suurus m\u00e4\u00e4ratakse sellele paigutatud elementidest suurima j\u00e4rgi;<\/li>\n<li><em>min-content<\/em> &#8211; veeru v\u00f5i rea suurus m\u00e4\u00e4ratakse sellele paigutatud elementidest v\u00e4ikseima j\u00e4rgi;<\/li>\n<li>v\u00e4\u00e4rtus \u2013 erinevate m\u00f5\u00f5t\u00fchikutega (px, cm, jne) v\u00e4ljendatud t\u00e4pne suurus;<\/li>\n<\/ul>\n<p><span class=\"nb\">NB! Kui veergudele\/ridadele nimesid ei m\u00e4\u00e4rata, siis antakse neile automaatselt numbrilised nimed.<\/span><\/p>\n<p>N\u00e4iteks m\u00e4\u00e4rame grid-konteinerile 4 veergu ja kolm rida:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n  grid-template-columns: 150px auto 200px 100px;\r\n  grid-template-rows: 25% auto 100px;\r\n}\r\n<\/pre>\n<figure id=\"attachment_452\" aria-describedby=\"caption-attachment-452\" style=\"width: 550px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-452\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_1.png\" alt=\"Defineeritud grid, 4 veergu ja 3 rida, rea- ja veeru-jooned nimedeta\" width=\"550\" height=\"243\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_1.png 951w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_1-300x133.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_1-768x340.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_1-65x29.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_1-225x100.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_1-350x155.png 350w\" \/><figcaption id=\"caption-attachment-452\" class=\"wp-caption-text\">Defineeritud grid, 4 veergu ja 3 rida, rea- ja veeru-jooned nimedeta<\/figcaption><\/figure>\n<p>N\u00e4iteks m\u00e4\u00e4rame grid-konteinerile 4 veergu ja 3 rida nagu eespool aga anname k\u00f5igile nimed rea-joontele (<em>row-lines<\/em>) ja veeru-joontele (<em>column-lines<\/em>) nimed:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">main-container {\r\n  display: grid;\r\n  grid-template-columns: [col1-start] 150px [col1-end] auto [col2-end] 200px [col3-end] 100px [col4-end];\r\n  grid-template-rows: [begin] 25% [row1-end] auto [row2_end] 100px [end];\r\n}<\/pre>\n<figure id=\"attachment_453\" aria-describedby=\"caption-attachment-453\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-453\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_2.png\" alt=\"Defineeritud grid, 4 veergu ja 3 rida koos rea- ja veeru-joonte nimedega\" width=\"600\" height=\"246\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_2.png 916w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_2-300x123.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_2-768x315.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_2-65x27.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_2-225x92.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_2-350x144.png 350w\" \/><figcaption id=\"caption-attachment-453\" class=\"wp-caption-text\">Defineeritud grid, 4 veergu ja 3 rida koos rea- ja veeru-joonte nimedega<\/figcaption><\/figure>\n<p><span class=\"nb\">NB! Ridadel v\u00f5ib olla ka mitu nime! Need pannakse kirja t\u00fchikutega eraldatult.<\/span><\/p>\n<p>N\u00e4iteks:<\/p>\n<p style=\"padding-left: 40px;\"><em>grid-template-rows: [toprow headerarea] 25% [contentrow] auto [bottomrow] 100px [end];<\/em><\/p>\n<p><span class=\"nb\">NB! Ridade v\u00f5i veergude m\u00e4\u00e4ramisel saab kasutada kordust, <em>repeat()<\/em>!<\/span><\/p>\n<p>N\u00e4iteks m\u00e4\u00e4rame neli veergu, milledest 3 esimest on \u00fchesugused:<\/p>\n<p style=\"padding-left: 40px;\"><em>grid-template-columns: repeat(3, 150px) [contentcolumn] auto;<\/em><\/p>\n<p>See on samav\u00e4\u00e4rne j\u00e4rgmise n\u00e4itega:<\/p>\n<p style=\"padding-left: 40px;\"><em>grid-template-columns: 150px 150px 150px [contentcolumn] auto;<\/em><\/p>\n<p>Veergude ja ridade m\u00f5\u00f5duks v\u00f5ib m\u00e4\u00e4rata ka murdosa vabast ruumist. Selleks kasutatakse m\u00f5\u00f5t\u00fchikut fr (<em>fraction<\/em>).<\/p>\n<p>See murdosa arvutatakse ruumist, mis j\u00e4\u00e4b \u00fcle k\u00f5igist t\u00e4pselt m\u00e4\u00e4ratud osadest. N\u00e4iteks m\u00e4\u00e4rame neli veergu, \u00fche laiuseks 200 pikslit ja k\u00f5igi \u00fclej\u00e4\u00e4nute laiuseks on kolmandik j\u00e4relej\u00e4\u00e4nud ruumist:<\/p>\n<p style=\"padding-left: 40px;\"><em>grid-template-columns: 200px 1fr 1fr 1fr;<\/em><\/p>\n<h4>V\u00f5restiku defineerimine l\u00fchikesel kujul<\/h4>\n<p>V\u00f5restiku ridu, veergusid ja piirkondi saab defineerida ka \u00fche omadusega <em>grid-template.<\/em><\/p>\n<h4>T\u00fchi ruum ridade ja\/v\u00f5i veergude vahel<\/h4>\n<p>Vajadusel saab ridade ja veergude vahele lisada t\u00fchja ruumi. Selleks on kasutusel omadused <em>grid-column-gap<\/em> ja <em>grid-row-gap<\/em>, millede v\u00e4\u00e4rtuseks on soovitud vahe suurus (<em>length<\/em>) mingites \u00fchikutes (px, cm vms).<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n  grid-template-columns: 200px auto 50px 200px;\r\n  grid-template-rows: 150px auto 50px;\r\n  grid-column-gap: 15px;\r\n  grid-row-gap: 20px;\r\n}<\/pre>\n<figure id=\"attachment_454\" aria-describedby=\"caption-attachment-454\" style=\"width: 550px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-454\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_3.png\" alt=\"Grid veergude ja ridade vahel on lisatud t\u00fchi ruum\" width=\"550\" height=\"200\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_3.png 952w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_3-300x109.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_3-768x280.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_3-65x24.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_3-225x82.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_3-350x128.png 350w\" \/><figcaption id=\"caption-attachment-454\" class=\"wp-caption-text\">Grid veergude ja ridade vahel on lisatud t\u00fchi ruum<\/figcaption><\/figure>\n<p><span class=\"nb\">NB! T\u00fchi ruum lisatakse vaid ridade ja veergude vahele, mitte v\u00e4ljapoole!<\/span><\/p>\n<p>T\u00fchja ruumi v\u00f5ib lisada ka \u00fche omadusega <em>grid-gap<\/em> korraga nii veergude kui ridade jaoks. V\u00e4\u00e4rtustena pannakse kirja t\u00fchikutega eraldatuna vahe veergude vahel (<em>column-gap<\/em>) ja ridade vahel (<em>row-gap<\/em>).<\/p>\n<p>N\u00e4iteks:<\/p>\n<p style=\"padding-left: 40px;\"><em>grid-gap: 15px 20px;<\/em><\/p>\n<p><span class=\"nb\">NB! Kasutada v\u00f5ib ka vaid \u00fcht v\u00e4\u00e4rtust, siis kasutatakse seda nii veergude kui ka ridade vahe m\u00e4\u00e4ramisel.<\/span><\/p>\n<p>N\u00e4iteks:<\/p>\n<p style=\"padding-left: 40px;\"><em>grid-gap: 20px;<\/em><\/p>\n<h4>Piirkondade defineerimine grid-elementide sidumiseks v\u00f5restikuga<\/h4>\n<p>Veergude ja ridadega defineeritud v\u00f5restikku saab jagada ka nimelisteks piirkondadeks (<em>area<\/em>). Selleks tuleb eelnevalt defineerida nimed grid-elementidele, kasutades grid-elemendi omadust <em>grid-area<\/em>.<\/p>\n<p>N\u00e4iteks defineerime grid-elementide nimed: \u201e<em>page_header<\/em>\u201c, \u201e<em>page_menu<\/em>\u201c, \u201e<em>page_content<\/em>\u201c, \u201e<em>page_side<\/em>\u201c ja \u201e<em>page_footer<\/em>\u201c.<\/p>\n<p>Nimetuse saanud piirkonnad seotakse loodud v\u00f5restikuga (<em>grid<\/em>) omadusega grid-templateareas. Iga v\u00f5restiku rea (<em>row<\/em>) jaoks pannakse jutum\u00e4rkides kirja mis piirkond (<em>area<\/em>) on seotud iga veeruga (<em>column<\/em>).<\/p>\n<p>Iga veeru kohta pannakse kirja \u00fcks kolmest:<\/p>\n<ul>\n<li>piirkonna nimi \u2013 selle veeruga on seotud vastav piirkond, kui sama piirkond kordub mitmes veerus, siis ulatub (<em>span<\/em>) see piirkond \u00fcle k\u00f5igi nende veergude;<\/li>\n<li>. \u2013 (punkt) t\u00e4hendab, et v\u00f5restiku lahter j\u00e4\u00e4b t\u00fchjaks;<\/li>\n<li><em>none<\/em> \u2013 v\u00f5restiku piirkonda pole defineeritud.<\/li>\n<\/ul>\n<p><span class=\"nb\">NB! Iga rea kohta tuleb kirja panna t\u00e4pselt sama palju veergusid!<br \/>\nNB! Ridadele nimesid ei kirjutata kuid nad saavad nimed automaatselt (n\u00e4iteks rida, millel algab piirkond \u201e<em>content<\/em>\u201c saab nimeks \u201e<em>content-start<\/em>\u201c ja rida, kus see piirkond l\u00f5ppeb, saab nimeks \u201e<em>content-end<\/em>\u201c.<\/span><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n  grid-template-columns: 200px auto 50px 200px;\r\n  grid-template-rows: 150px auto 50px;\r\n  grid-template-areas:\r\n    \"page_header page_header page_header page_header\"\r\n    \"page_menu page_content . page_side\"\r\n    \"page_footer page_footer page_footer page_footer\";\r\n}\r\n<\/pre>\n<figure id=\"attachment_455\" aria-describedby=\"caption-attachment-455\" style=\"width: 550px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-455\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_4.png\" alt=\"Grid v\u00f5restikuga on seotud defineeritud piirkonnad\" width=\"550\" height=\"200\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_4.png 857w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_4-300x109.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_4-768x279.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_4-65x24.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_4-225x82.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_4-350x127.png 350w\" \/><figcaption id=\"caption-attachment-455\" class=\"wp-caption-text\">Grid v\u00f5restikuga on seotud defineeritud piirkonnad<\/figcaption><\/figure>\n<h3>V\u00f5restiku joondamine<\/h3>\n<p>Vahel v\u00f5ivad grid-elemendid katta v\u00e4iksema ala, kui v\u00f5restik. See juhtub tavaliselt, kui nende suuruse m\u00e4\u00e4ramiseks kasutatakse absoluutseid \u00fchikuid nagu n\u00e4iteks px.<\/p>\n<figure id=\"attachment_456\" aria-describedby=\"caption-attachment-456\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-456\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_5.png\" alt=\"Grid-elementide laius on v\u00e4iksem, kui v\u00f5restiku veergudel\" width=\"500\" height=\"165\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_5.png 780w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_5-300x99.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_5-768x253.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_5-65x21.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_5-225x74.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_5-350x115.png 350w\" \/><figcaption id=\"caption-attachment-456\" class=\"wp-caption-text\">Grid-elementide laius on v\u00e4iksem, kui v\u00f5restiku veergudel<\/figcaption><\/figure>\n<figure id=\"attachment_457\" aria-describedby=\"caption-attachment-457\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-457\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_6.png\" alt=\"Grid-elementide k\u00f5rgus on v\u00e4iksem, kui v\u00f5restiku ridadel\" width=\"500\" height=\"163\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_6.png 776w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_6-300x98.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_6-768x250.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_6-65x21.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_6-225x73.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_6-350x114.png 350w\" \/><figcaption id=\"caption-attachment-457\" class=\"wp-caption-text\">Grid-elementide k\u00f5rgus on v\u00e4iksem, kui v\u00f5restiku ridadel<\/figcaption><\/figure>\n<p>Sellisel juhul saab tervet v\u00f5restikku grid-konteineris joondada.<\/p>\n<h4>V\u00f5restiku joondamine horisontaalselt<\/h4>\n<p>Terve v\u00f5restiku joondamiseks rea telje (<em>row axis<\/em>) j\u00e4rgi ehk horisontaalselt on omadus <em>justifycontent<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>start<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri vasakusse serva;<\/li>\n<li><em>end<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri paremasse serva;<\/li>\n<li><em>center<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri keskele;<\/li>\n<li><em>stretch<\/em> \u2013 grid-elemente venitatakse laiemaks, et v\u00f5restik t\u00e4idaks kogu grid-konteineri laiuse;<\/li>\n<li><em>space-around<\/em> \u2013 lisab k\u00f5igi grid-elementide vahele v\u00f5rdselt t\u00fchja ruumi ning rea algusesse ja l\u00f5ppu pool sellest laiusest, et t\u00e4ita terve grid-konteiner;<\/li>\n<li><em>space-between<\/em> \u2013 t\u00e4idab kogu grid-konteineri laiuse lisades vaid grid elementide vahele v\u00f5rdselt t\u00fchja ruumi;<\/li>\n<li><em>space-evenly<\/em> \u2013 lisab terve grid-konteineri laiuse t\u00e4itmiseks v\u00f5rdselt t\u00fchja ruumi k\u00f5igi grid-elementide vahele ning ka rea algusesse ja l\u00f5ppu.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  justify-content: start;\r\n}\r\n<\/pre>\n<figure id=\"attachment_458\" aria-describedby=\"caption-attachment-458\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-458\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_7.png\" alt=\"V\u00f5restik joondatud vasakule (justify-content: start)\" width=\"500\" height=\"163\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_7.png 853w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_7-300x98.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_7-768x250.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_7-65x21.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_7-225x73.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_7-350x114.png 350w\" \/><figcaption id=\"caption-attachment-458\" class=\"wp-caption-text\">V\u00f5restik joondatud vasakule (<em>justify-content: start<\/em>)<\/figcaption><\/figure>\n<figure id=\"attachment_459\" aria-describedby=\"caption-attachment-459\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-459\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_8.png\" alt=\"V\u00f5restik joondatud keskele (justify-content: center)\" width=\"500\" height=\"164\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_8.png 847w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_8-300x98.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_8-768x251.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_8-65x21.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_8-225x74.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_8-350x114.png 350w\" \/><figcaption id=\"caption-attachment-459\" class=\"wp-caption-text\">V\u00f5restik joondatud keskele (<em>justify-content: center<\/em>)<\/figcaption><\/figure>\n<figure id=\"attachment_460\" aria-describedby=\"caption-attachment-460\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-460\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_9.png\" alt=\"V\u00f5restik joondatud \u00fchtlaselt (justify-content: space-evenly)\" width=\"500\" height=\"166\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_9.png 847w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_9-300x100.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_9-768x255.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_9-65x22.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_9-225x75.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_9-350x116.png 350w\" \/><figcaption id=\"caption-attachment-460\" class=\"wp-caption-text\">V\u00f5restik joondatud \u00fchtlaselt (<em>justify-content: space-evenly<\/em>)<\/figcaption><\/figure>\n<figure id=\"attachment_461\" aria-describedby=\"caption-attachment-461\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-461\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_10.png\" alt=\"V\u00f5restik joondatud \u00fchtlaselt \u00e4\u00e4rest \u00e4\u00e4reni (justify-content: space-between)\" width=\"500\" height=\"161\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_10.png 846w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_10-300x96.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_10-768x247.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_10-65x21.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_10-225x72.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_10-350x113.png 350w\" \/><figcaption id=\"caption-attachment-461\" class=\"wp-caption-text\">V\u00f5restik joondatud \u00fchtlaselt \u00e4\u00e4rest \u00e4\u00e4reni (<em>justify-content: space-between<\/em>)<\/figcaption><\/figure>\n<h4>V\u00f5restiku joondamine vertikaalselt<\/h4>\n<p>Terve v\u00f5restiku joondamiseks veeru telje (<em>column axis<\/em>) j\u00e4rgi ehk vertikaalselt on omadus <em>align-content<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>start<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri \u00fclemisse serva;<\/li>\n<li><em>end<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri alumisse serva;<\/li>\n<li><em>center<\/em> \u2013 v\u00f5restik joondatakse grid-konteineri keskele;<\/li>\n<li><em>stretch<\/em> \u2013 grid-elemente venitatakse k\u00f5rgemaks, et v\u00f5restik t\u00e4idaks kogu gridkonteineri k\u00f5rguse;<\/li>\n<li><em>space-around<\/em> \u2013 lisab k\u00f5igi grid-elementide vahele v\u00f5rdselt t\u00fchja ruumi ning veeru algusesse ja l\u00f5ppu pool sellest k\u00f5rgusest, et t\u00e4ita terve grid-konteiner;<\/li>\n<li><em>space-between<\/em> \u2013 t\u00e4idab kogu grid-konteineri k\u00f5rguse lisades vaid grid elementide vahele v\u00f5rdselt t\u00fchja ruumi;<\/li>\n<li><em>space-evenly<\/em> \u2013 lisab terve grid-konteineri k\u00f5rguse t\u00e4itmiseks v\u00f5rdselt t\u00fchja ruumi k\u00f5igi grid-elementide vahele ning ka veeru algusesse ja l\u00f5ppu.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  align-items: space-between;\r\n}<\/pre>\n<figure id=\"attachment_462\" aria-describedby=\"caption-attachment-462\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-462\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_11.png\" alt=\"V\u00f5restik joondatud \u00fchtlaselt \u00fcle kogu k\u00f5rguse (align-content: space-between)\" width=\"500\" height=\"149\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_11.png 747w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_11-300x89.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_11-65x19.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_11-225x67.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_11-350x104.png 350w\" \/><figcaption id=\"caption-attachment-462\" class=\"wp-caption-text\">V\u00f5restik joondatud \u00fchtlaselt \u00fcle kogu k\u00f5rguse (<em>align-content: space-between<\/em>)<\/figcaption><\/figure>\n<figure id=\"attachment_463\" aria-describedby=\"caption-attachment-463\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-463\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_12.png\" alt=\"V\u00f5restik joondatud vertikaalselt keskele (align-content: center)\" width=\"500\" height=\"149\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_12.png 746w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_12-300x89.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_12-65x19.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_12-225x67.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_12-350x104.png 350w\" \/><figcaption id=\"caption-attachment-463\" class=\"wp-caption-text\">V\u00f5restik joondatud vertikaalselt keskele (<em>align-content: center<\/em>)<\/figcaption><\/figure>\n<h3>Grid-elementide sisu joondamine<\/h3>\n<p>Tervele v\u00f5restikule (grid-konteiner) saab m\u00e4\u00e4rata ka omadusi, kuidas k\u00f5ikide sisuelementide (grid-elemendid) sisu joondatakse.<\/p>\n<h4>Elementide sisu joondamine horisontaalselt<\/h4>\n<p>M\u00f6\u00f6da ridade telgesid (<em>row axis<\/em>) ehk horisontaalselt joondamiseks on omadus <em>justify-items<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>start<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse vasakusse serva;<\/li>\n<li><em>end<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse paremasse serva;<\/li>\n<li><em>center<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse keskele;<\/li>\n<li><em>stretch<\/em> \u2013 k\u00f5ikide grid-elementide sisu t\u00e4idab terve v\u00f5imaliku ala (vaikev\u00e4\u00e4rtus).<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  justify-items: end;\r\n}\r\n<\/pre>\n<figure id=\"attachment_464\" aria-describedby=\"caption-attachment-464\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-464\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_13.png\" alt=\"V\u00f5restiku k\u00f5ik grid-elemendid on joondatud \u00fcle terve v\u00f5imaliku ala (justify-items: stretch)\" width=\"500\" height=\"134\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_13.png 747w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_13-300x80.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_13-65x17.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_13-225x60.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_13-350x94.png 350w\" \/><figcaption id=\"caption-attachment-464\" class=\"wp-caption-text\">V\u00f5restiku k\u00f5ik grid-elemendid on joondatud \u00fcle terve v\u00f5imaliku ala (<em>justify-items: stretch<\/em>)<\/figcaption><\/figure>\n<figure id=\"attachment_465\" aria-describedby=\"caption-attachment-465\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-465\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_14.png\" alt=\"V\u00f5restiku k\u00f5ik grid-elemendid on joondatud vasakule (justify-items: start)\" width=\"500\" height=\"132\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_14.png 745w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_14-300x79.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_14-65x17.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_14-225x59.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_14-350x93.png 350w\" \/><figcaption id=\"caption-attachment-465\" class=\"wp-caption-text\">V\u00f5restiku k\u00f5ik grid-elemendid on joondatud vasakule (<em>justify-items: start<\/em>)<\/figcaption><\/figure>\n<h4>Elementide sisu joondamine vertikaalselt<\/h4>\n<p>M\u00f6\u00f6da veergude telgesid (<em>column axis<\/em>) ehk vertikaalselt joondamiseks on omadus alignitems, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>start<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse \u00fclemisse serva;<\/li>\n<li><em>end<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse alumisse serva;<\/li>\n<li><em>center<\/em> \u2013 k\u00f5ikide grid-elementide sisu joondatakse vertikaalselt keskele;<\/li>\n<li><em>stretch<\/em> \u2013 k\u00f5ikide grid-elementide sisu t\u00e4idab terve v\u00f5imaliku k\u00f5rguse (vaikev\u00e4\u00e4rtus).<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">main-container {\r\n  align-items: start;\r\n}<\/pre>\n<figure id=\"attachment_466\" aria-describedby=\"caption-attachment-466\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-466\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_15.png\" alt=\"V\u00f5restiku k\u00f5ik grid-elemendid on joondatud \u00fcles (justify-items: start)\" width=\"500\" height=\"190\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_15.png 755w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_15-300x114.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_15-65x25.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_15-225x86.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_15-350x133.png 350w\" \/><figcaption id=\"caption-attachment-466\" class=\"wp-caption-text\">V\u00f5restiku k\u00f5ik grid-elemendid on joondatud \u00fcles (<em>justify-items: start<\/em>)<\/figcaption><\/figure>\n<h3>Veergude ja ridade automaatne suurus<\/h3>\n<p>V\u00f5restiku veergudele ja ridadele, millele pole m\u00f5\u00f5tu m\u00e4\u00e4ratud, saab seda teha omadustega <em>grid-auto-columns<\/em> ja <em>grid-auto-rows<\/em>. M\u00f5lemal saab kasutada j\u00e4rgmiseid v\u00f5imalikke v\u00e4\u00e4rtuseid<\/p>\n<ul>\n<li>auto \u2013 veeru v\u00f5i rea m\u00f5\u00f5dud m\u00e4\u00e4ratakse grid-konteineri m\u00f5\u00f5tude ja grid-elementide sisu j\u00e4rgi (vaikev\u00e4\u00e4rtus);<\/li>\n<li>max-content \u2013 veeru v\u00f5i rea suurus m\u00e4\u00e4ratakse sellele paigutatud elementidest suurima j\u00e4rgi;<\/li>\n<li>min-content &#8211; veeru v\u00f5i rea suurus m\u00e4\u00e4ratakse sellele paigutatud elementidest v\u00e4ikseima j\u00e4rgi;<\/li>\n<li>v\u00e4\u00e4rtus \u2013 erinevate m\u00f5\u00f5t\u00fchikutega (px, cm, % jne) v\u00e4ljendatud t\u00e4pne suurus;<\/li>\n<\/ul>\n<p>Neid omadusi kasutatakse peamiselt siis, kui osa veergusid v\u00f5i ridasid tekitatakse automaatselt.<\/p>\n<p>N\u00e4iteks loome v\u00f5restiku kahe veeru ja kahe reaga ning m\u00e4\u00e4rame automaatselt loodavatele veergudele laiuse:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n  grid-template-columns: 100px 100px;\r\n  grid-template-rows: 100px 100px;\r\n  grid-auto-columns: 100px;\r\n}<\/pre>\n<p>Sellele v\u00f5restikule paigutame kaks grid-elementi, \u00fche selliselt, et n\u00f5utud veeru-jooni pole olemas (viies veerg), mis ise ja sellele eelnevad kaks lisatud t\u00fchja veergu saavad k\u00f5ik laiuseks 100px:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.item2 {\r\n  grid-column: 5 \/ 6;\r\n  grid-row: 2 \/ 3;\r\n}<\/pre>\n<figure id=\"attachment_467\" aria-describedby=\"caption-attachment-467\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-467\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_16.png\" alt=\"Automaatselt lisatud veerud laiusega 100px\" width=\"400\" height=\"170\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_16.png 593w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_16-300x127.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_16-65x28.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_16-225x96.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_16-350x149.png 350w\" \/><figcaption id=\"caption-attachment-467\" class=\"wp-caption-text\">Automaatselt lisatud veerud laiusega 100px<\/figcaption><\/figure>\n<figure id=\"attachment_468\" aria-describedby=\"caption-attachment-468\" style=\"width: 696px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-468\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_17.png\" alt=\"Automaatselt lisatud veerud automaatselt valitud laiusega\" width=\"696\" height=\"170\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_17.png 1032w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_17-300x73.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_17-1024x250.png 1024w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_17-768x188.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_17-65x16.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_17-225x55.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_17-350x85.png 350w\" \/><figcaption id=\"caption-attachment-468\" class=\"wp-caption-text\">Automaatselt lisatud veerud automaatselt valitud laiusega<\/figcaption><\/figure>\n<p>Sama moodi saab vajadusel automaatselt ridu lisada, n\u00e4iteks m\u00e4\u00e4rame automaatselt lisatavate ridade k\u00f5rguseks 100px, lisame grid-konteineri kujundusse rea:<\/p>\n<p style=\"padding-left: 40px;\">grid-auto-rows: 100px<\/p>\n<p>paigutame \u00fche grid-elemendi kolmandasse ritta, mida pole olemas:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">item2 {\r\n  grid-column: 5 \/ 6;\r\n  grid-row: 3 \/ 4;\r\n}<\/pre>\n<figure id=\"attachment_469\" aria-describedby=\"caption-attachment-469\" style=\"width: 350px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-469\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_18.png\" alt=\"Automaatselt lisatud 1 rida k\u00f5rgusega 100px ja 3 veergu laisega 100px\" width=\"350\" height=\"215\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_18.png 593w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_18-300x185.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_18-65x40.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_18-225x138.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_18-350x215.png 350w\" \/><figcaption id=\"caption-attachment-469\" class=\"wp-caption-text\">Automaatselt lisatud 1 rida k\u00f5rgusega 100px ja 3 veergu laisega 100px<\/figcaption><\/figure>\n<h3>Elementide automaatne paigutus v\u00f5restikul<\/h3>\n<p>Nende elementide jaoks v\u00f5restikul, mille jaoks pole asukohta m\u00e4\u00e4ratud, saab kasutada automaatset paigutamist.<\/p>\n<p>Kasutada saab <em>grid-auto-flow<\/em> omadust, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li>row \u2013 algoritm \u00fcritab j\u00e4rjest \u00e4ra t\u00e4ita k\u00f5ik v\u00f5restiku read (vaikev\u00e4\u00e4rtus);<\/li>\n<li>column \u2013 algoritm \u00fcritab j\u00e4rjest t\u00e4ita v\u00f5restiku veerud;<\/li>\n<li>row dense \u2013 algoritm \u00fcritab ridu t\u00e4ita paigutades j\u00e4rgnevaid v\u00e4iksemaid elemente eespool olevatele t\u00fchjadele kohtadele;<\/li>\n<li>column dense \u2013 algoritm \u00fcritab veergusid t\u00e4ita paigutades j\u00e4rgnevaid v\u00e4iksemaid elemente eespool olevatele t\u00fchjadele kohtadele.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  display: grid;\r\n  grid-template-columns: auto auto auto auto;\r\n  grid-template-rows: auto auto;\r\n  grid-auto-flow: row dense;\r\n}<\/pre>\n<h3>V\u00f5restiku defineerimine ja kujundamine l\u00fchidalt<\/h3>\n<p>Omadusi <em>grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns<\/em> ja <em>grid-auto-flow<\/em> saab l\u00fchidalt kirja panna omaduse <em>grid<\/em> abil.<\/p>\n<h2>Grid-elementide omadused<\/h2>\n<p>Grid-elementide omadused m\u00e4\u00e4ravad, kuidas need elemendid v\u00f5restikul paiknevad.<\/p>\n<h3>Grid-elementide paigutamine ridadele ja veergudele<\/h3>\n<p>Kui grid-elementidele ei m\u00e4\u00e4rata, kuidas nad paiknevad, siis paigutatakse nad automaatselt j\u00e4rjest v\u00f5restiku ridade ja veergude ristumisel moodustuvatesse \u201elahtritesse\u201c.<\/p>\n<p>N\u00e4iteks on j\u00e4rgmises n\u00e4ites defineeritud s\u00f5restik 4 veeru ja 3 reaga aga HTML koodis vaid 5 grid-elementi.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.main-container {\r\n  background-color: #AAAAFF;\r\n  display: grid;\r\n  grid-template-columns: 200px auto 50px 200px;\r\n  grid-template-rows: 150px auto 50px;\r\n  grid-column-gap: 15px;\r\n  grid-row-gap: 20px;\r\n}\r\n.grid-item{\r\n  background-color: rgba(255,255,255,.6);\r\n  border: 1px solid white; text-align: center;\r\n  font-family: verdana;\r\n  font-size: 1em;\r\n}\r\n<\/pre>\n<figure id=\"attachment_470\" aria-describedby=\"caption-attachment-470\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-470\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_19.png\" alt=\"Grid-elemendid on paigutatud automaatselt\" width=\"500\" height=\"155\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_19.png 1051w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_19-300x93.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_19-1024x317.png 1024w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_19-768x237.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_19-65x20.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_19-225x70.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_19-350x108.png 350w\" \/><figcaption id=\"caption-attachment-470\" class=\"wp-caption-text\">Grid-elemendid on paigutatud automaatselt<\/figcaption><\/figure>\n<h4>Grid-elemendi m\u00e4\u00e4ramine veeru-joonte j\u00e4rgi<\/h4>\n<p>M\u00e4\u00e4ramaks grid-elemendi asukohta ja suurust veeru-joonte (<em>column-line<\/em>) j\u00e4rgi, saab kasutada omadusi <em>grid-column-start<\/em> ja <em>grid-column-end<\/em>. Neil m\u00f5lemal saab kasutada j\u00e4rgmiseid v\u00e4\u00e4rtuseid:<\/p>\n<ul>\n<li>joon \u2013 veeru-joone number v\u00f5i nimi, millest grid-element algab v\u00f5i millel l\u00f5ppeb;<\/li>\n<li><em>auto<\/em> \u2013 m\u00e4\u00e4rab automaatse paigutuse ja ulatuse veergude suhtes (vaikev\u00e4\u00e4rtus).<\/li>\n<\/ul>\n<p>N\u00e4iteks on esimesele, teisele ja kolmandale grid-elemendile m\u00e4\u00e4ratud alustamine esimeselt veeru-joonelt:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.item1, .item2, .item5 {\r\n  grid-column-start: 1;\r\n}\r\n<\/pre>\n<figure id=\"attachment_472\" aria-describedby=\"caption-attachment-472\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-472\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_20.png\" alt=\"Esimene, teine ja kolmas grid-element algavad esimesest veeru-joonest\" width=\"500\" height=\"154\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_20.png 1048w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_20-300x92.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_20-1024x316.png 1024w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_20-768x237.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_20-65x20.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_20-225x69.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_20-350x108.png 350w\" \/><figcaption id=\"caption-attachment-472\" class=\"wp-caption-text\">Esimene, teine ja kolmas grid-element algavad esimesest veeru-joonest<\/figcaption><\/figure>\n<p>N\u00e4iteks on esimesele ja viiendale elemendile m\u00e4\u00e4ratud ulatumine \u00fcle k\u00f5igi veergude:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.item1, .item5 {\r\n  grid-column-start: 1;\r\n  grid-column-end: 5;\r\n}<\/pre>\n<figure id=\"attachment_473\" aria-describedby=\"caption-attachment-473\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-473\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_21.png\" alt=\"Esimesele ja viiendale grid-elemendile on m\u00e4\u00e4ratud ulatumine (span) \u00fcle nelja veeru\" width=\"500\" height=\"154\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_21.png 1047w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_21-300x93.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_21-1024x316.png 1024w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_21-768x237.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_21-65x20.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_21-225x69.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_21-350x108.png 350w\" \/><figcaption id=\"caption-attachment-473\" class=\"wp-caption-text\">Esimesele ja viiendale grid-elemendile on m\u00e4\u00e4ratud ulatumine (<em>span<\/em>) \u00fcle nelja veeru<\/figcaption><\/figure>\n<h4>Grid-elemendi m\u00e4\u00e4ramine rea-joonte j\u00e4rgi<\/h4>\n<p>M\u00e4\u00e4ramaks grid-elemendi asukohta ja suurust rea-joonte (<em>row-line<\/em>) j\u00e4rgi, saab kasutada omadusi <em>grid-row-start<\/em> ja <em>grid-row-end<\/em>. Neil m\u00f5lemal saab kasutada j\u00e4rgmiseid v\u00e4\u00e4rtuseid:<\/p>\n<ul>\n<li>joon \u2013 rea-joone number v\u00f5i nimi, millest grid-element algab v\u00f5i millel l\u00f5ppeb;<\/li>\n<li><em>auto<\/em> \u2013 m\u00e4\u00e4rab automaatse paigutuse ja ulatuse ridade suhtes (vaikev\u00e4\u00e4rtus).<\/li>\n<\/ul>\n<p>N\u00e4iteks on viiendale elemendile m\u00e4\u00e4ratud alustamine kolmandalt realt ehk neljandalt reajoonelt.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.item5 {\r\n  grid-row-start: 4;\r\n}<\/pre>\n<figure id=\"attachment_474\" aria-describedby=\"caption-attachment-474\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-474\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_22.png\" alt=\"Viies grid-element algab neljandalt rea-joonelt\" width=\"500\" height=\"158\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_22.png 1048w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_22-300x95.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_22-1024x323.png 1024w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_22-768x243.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_22-65x21.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_22-225x71.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_22-350x111.png 350w\" \/><figcaption id=\"caption-attachment-474\" class=\"wp-caption-text\">Viies grid-element algab neljandalt rea-joonelt<\/figcaption><\/figure>\n<h4>Kompaktsemad omadused elementide rea-joonte ning veeru-joonte j\u00e4rgi paigutamiseks<\/h4>\n<p>Grid-elementide paigutamiseks veeru-joonte ja rea-joonte j\u00e4rgi saab kasutada ka kombineeritud omadusi <em>grid-column<\/em> ja <em>grid-row<\/em>, mille v\u00e4\u00e4rtustena antakse korraga nii jooned, millelt element algab kui ka jooned, millel element l\u00f5ppeb. Alguse ja l\u00f5pu joone eraldajaks on kaldkriips \u201e\/\u201c.<\/p>\n<p>N\u00e4iteks elemendid 1 ja 5 paigutuvad \u00fcleeelmisel joonisel ka j\u00e4rgmise stiiliga:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.item1, .item5 {\r\n  grid-column: 1 \/ 5;\r\n}<\/pre>\n<h3>Grid-elementide nimetamine sidumiseks piirkondadega<\/h3>\n<p>Veebilehe sisuelemente, mis on grid-elementideks, saab loodud v\u00f5restikuga siduda ka nimede kaudu jagades v\u00f5restiku piirkondades.<\/p>\n<p>Grid-elementidele nimede defineerimiseks kasutatakse omadust <em>grid-area<\/em>. Selle omaduse v\u00e4\u00e4rtuseks on reeglina tekst.<\/p>\n<p>N\u00e4iteks defineerime CSS klassid piirkondade jaoks:<\/p>\n<p style=\"padding-left: 40px;\"><em>.area-header {grid-area: page_header;}<\/em><br \/>\n<em>.area-menu {grid-area: page_menu;}<\/em><br \/>\n<em>.area-content {grid-area: page_content;}<\/em><br \/>\n<em>.area-side {grid-area: page_side;}<\/em><br \/>\n<em>.area-footer {grid-area: page_footer;}<\/em><\/p>\n<p>Neid nimetusi kasutatakse v\u00f5restiku enda omadustes ridade kaupa piirkondade m\u00e4\u00e4ramisel.<\/p>\n<p>Alternatiivselt v\u00f5ib omadust <em>grid-area<\/em> kasutada grid-elemendi paigutuse m\u00e4\u00e4ramiseks veerujoonte ja rea-joonte j\u00e4rgi l\u00fchemal kujul. Sellisel juhul pannakse kaldkriipsudena eraldatult kirja omaduste <em>grid-row-start, grid-column-start, grid-row-end<\/em> ja <em>grid-column-end<\/em> v\u00e4\u00e4rtused.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.area-content {\r\n  grid-area:2 \/ 2 \/3 \/3;\r\n}<\/pre>\n<h3>Grid-elemendi sisu joondamine<\/h3>\n<p>Grid-elemendi sisu saab joondada nii rea (row axis) telge m\u00f6\u00f6da ehk horisontaalselt kui ka veeru (<em>column axis<\/em>) telge m\u00f6\u00f6da ehk vertikaalselt.<\/p>\n<p><span class=\"nb\">NB! K\u00f5igi v\u00f5restikule paigutatud grid-elementide sisu korraga joondamiseks v\u00f5ib kasutada ka grid-konteineri omadusi <em>justify-items<\/em> (horisontaalselt joondamiseks) ning <em>align-items<\/em> (vertikaalseks joondamiseks).<\/span><\/p>\n<h4 style=\"margin-top: 2.14286em; margin-bottom: 1.42857em; word-spacing: 0px;\">Grid-elemendi sisu joondamine horisontaalselt<\/h4>\n<p>Grid-elemendi joondamiseks horisontaalselt kasutatakse omadust <em>justify-self<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li>start \u2013 sisu joondatakse elemendi vasakusse serva;<\/li>\n<li>end \u2013 sisu joondatakse elemendi paremasse serva;<\/li>\n<li>center \u2013 sisu joondatakse elemendi keskele;<\/li>\n<li>stretch \u2013 sisu t\u00e4idab terve elemendi sisu (vaikev\u00e4\u00e4rtus).<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.area-content {\r\n  grid-area: page_content;\r\n  justify-self: end;\r\n}<\/pre>\n<figure id=\"attachment_475\" aria-describedby=\"caption-attachment-475\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-475\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_23.png\" alt=\"Grid-elemendi page_content sisu t\u00e4idab terve v\u00f5imaliku laiuse (justify-self: stretch)\" width=\"500\" height=\"200\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_23.png 931w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_23-300x120.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_23-768x307.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_23-65x26.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_23-225x90.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_23-350x140.png 350w\" \/><figcaption id=\"caption-attachment-475\" class=\"wp-caption-text\">Grid-elemendi <em>page_content<\/em> sisu t\u00e4idab terve v\u00f5imaliku laiuse (<em>justify-self: stretch<\/em>)<\/figcaption><\/figure>\n<figure id=\"attachment_476\" aria-describedby=\"caption-attachment-476\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-476\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_24.png\" alt=\"Grid-elemendi sisu on joondatud paremasse serva (justify-self: end)\" width=\"500\" height=\"197\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_24.png 922w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_24-300x118.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_24-768x302.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_24-65x26.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_24-225x89.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_24-350x138.png 350w\" \/><figcaption id=\"caption-attachment-476\" class=\"wp-caption-text\">Grid-elemendi sisu on joondatud paremasse serva (<em>justify-self: end<\/em>)<\/figcaption><\/figure>\n<h4>Grid-elemendi sisu joondamine vertikaalselt<\/h4>\n<p>Grid-elemendi joondamiseks horisontaalselt kasutatakse omadust<em> justify-self<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li>start \u2013 sisu joondatakse elemendi \u00fclemisse serva;<\/li>\n<li>end \u2013 sisu joondatakse elemendi alumisse serva;<\/li>\n<li>center \u2013 sisu joondatakse vertikaalselt elemendi keskele;<\/li>\n<li>stretch \u2013 sisu t\u00e4idab terve elemendi sisu (vaikev\u00e4\u00e4rtus).<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.area-content {\r\n  grid-area: page_content;\r\n  align-self: center;\r\n}<\/pre>\n<figure id=\"attachment_477\" aria-describedby=\"caption-attachment-477\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img class=\"wp-image-477\" src=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_25.png\" alt=\"Grid-elemendi sisu on joondatud vertikaalselt keskele (align-self: center)\" width=\"500\" height=\"200\" srcset=\"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_25.png 926w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_25-300x120.png 300w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_25-768x307.png 768w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_25-65x26.png 65w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_25-225x90.png 225w, https:\/\/ramk.ee\/opikud\/veebidisain\/wp-content\/uploads\/sites\/2\/2020\/03\/grid_25-350x140.png 350w\" \/><figcaption id=\"caption-attachment-477\" class=\"wp-caption-text\">Grid-elemendi sisu on joondatud vertikaalselt keskele (<em>align-self: center<\/em>)<\/figcaption><\/figure>\n","protected":false},"author":1,"menu_order":6,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":310,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/406"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":10,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/406\/revisions"}],"predecessor-version":[{"id":478,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/406\/revisions\/478"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/310"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/406\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=406"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=406"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=406"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}