Kuidas luua Püha Graali veebisaidi paigutus CSS Gridi abil

CSS Grid püha graali paigutus

Järgmistes juhistes kirjeldatakse püha graali paigutuse rakendamist CSS Gridiga.

Põhiline seadistamine

Looge minimaalne HTML-dokument. Sisestage teksti- või HTML-redaktorisse järgmine kood.

kuidas kontrollida, kas teie arvuti on 64 -bitine või 32 -bitine

Minimaalne HTML

 Title Hello, world 

Salvestage fail nimega index.html .

Avage veebibrauseris index.html. Faili avamiseks uuel veebibrauseri vahekaardil vajutage klahvikombinatsiooni Ctrl + O (MacOS-is Command + O) ja valige seejärel index.html. Sa saad ka tõmba ja lase lahti index.html brauseriaknasse.

Minimaalne HTML

Minimaalne CSS

Looge uus tekstifail. Tühja faili lisage järgmine kood.

html { width: 100%; /* 100% width of parent (root) element */ height: 100vh; /* 100% height of viewport */ background: rgb(0, 0, 0, 0.1); /* 10% opacity black (very light gray) */ font-size: 1.0em; /* root font size */ } body { margin: 0; /* no margin at edge of content */ height: 100%; /* 100% height of parent (html) element */ }

Salvestage see stiilileht nimega index.css samas asukohas nagu index.html.

Näpunäide

Laius HTML element on määratletud kui 100% (saadaolevast horisontaalsest ruumist), et arvestada kuvatava vertikaalse kerimisriba võimalusega. Kui HTML-element on 100vw (100% vaateava laiusest), võib lehe sisu laieneda vertikaalse kerimisriba alla ja seda varjata.

Lisage kataloogis index.html järgmine rida element.

Näiteks:

 Title    Hello, world 

Laadige brauseris uuesti index.html. Pange tähele, et taust on helehall ja sisu „Tere, maailm” puudutab vaateava vasemat ülemist serva.

Minimaalne CSS

Määrake ruudustik

Lisage saidile index.css järgmised read.

Võrkkonteiner CSS

div.container { display: grid; width: 100%; height: 100%; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 3fr 1fr; grid-template-areas: 'head head head' 'panleft mainbody panright' 'foot foot foot'; }

The võre konteiner on ruudustiku põhielement. Selle atribuudid kehtivad kogu ruudustikule.

Järgnevalt kirjeldatakse siin kasutatud võrgukonteinerite stiile.

CSS Kirjeldus
div.container { stiil ...}

Rakendage sulgudes loetletud stiilid mis tahes jaoks elemendid HTML-is, millel on konteiner klass, näiteks:

 

Klassi nimi konteiner on meelevaldne.

kuva: ruudustik;

Määra see element uue ruudustiku vanemaks. Kõik ruudustikus olevad üksused kuvatakse selle elemendi kasti piirides.

laius: 100%;
kõrgus: 100%;

Määrake elemendi kasti piiriks 100% vanemelemendi laiusest ja kõrgusest ().

ruudustiku-malli-veerud: 1fr 2fr 1fr;
ruudustiku-malli-read: 1fr 3fr 1fr;

Määrake ruudustiku kolm vaikeveeru laiust vasakult paremale ja kolm vaikerea kõrgust ülevalt alla.

Ühik fr ('murdosa') on CSS Grid'i elementide jaoks eriline. Väärtus fr arvutatakse ruudustiku laiuse (veergude puhul) või kõrguse (ridade puhul) jagamisel taotletud fr ühikute koguarvuga.

Näiteks 300 piksli laiuses ruudustikus, kus kolm veergu on määratletud järgmiselt 1fr , 2fr ja 3fr , veeru laiused on 50, 100 ja 150 pikslit. Veerg n fr on alati n korda laiem kui 1fr veerg.

Selles paigutuses on keskelement (põhiosa) kahekordne iga paneeli laius (2fr) ja kolmekordne päise ja jaluse kõrgus (3fr).

Paneelid on 1 / (1 + 2 + 1) = 1/4 võre laiusest.

Päis ja jalus on 1 / (1 + 3 + 1) = 1/5 võre kõrgusest.

ruudustiku-malli-alad:
'pea pea pea'
'panleft mainbody panright'
'suu jala jalg';

The ruudustiku-malli-alad atribuut koosneb kahest jutumärgist koosnevatest stringidest, üks ruudustiku iga rea ​​kohta. Iga string sisaldab ühte sõna ruudustiku veerus. Iga sõna on sõna nimi ruudustikuala mis hõivab selle ruudustiku.

Kui nime korratakse, ulatub nimetatud ala need võrgus olevad lahtrid. Laiendatud lahtrid peavad moodustama ristküliku.

Meie CSS-kood ütleb: 'Kõik kolm esimese rea lahtrit moodustavad pea ruudustikuala. Järgmisel real on piirkond nimega panleft vasakus veerus, põhikeha keskmises veerus ja paaniliselt paremas veerus. Alumise rea kõik kolm lahtrit moodustavad nimetatud ala jalg . '

Pange tähele, et stringid on eraldatud tühiku või uue reaga, mitte komaga.

Võrguüksus CSS

Iga ruudustiku element hõivab nimega ruudustikuala . Ruudustikuala on üks või mitu kõrvuti asetsevat lahtrit, mis moodustavad ristküliku, nagu võrgumahuti mallis on nimetatud.

Püha graali paigutusel on viis ruudustikuala: päis (ala pea ), vasak paneel (ala panleft ), põhiosa (ala põhikeha ), parem paneel (ala paaniliselt ) ja jalus (ala jalg ). Lisage järgmised read faili index.css faili lõpus.

div.header { background: rgb(0, 0, 0, 0.2); /* 20% black */ grid-area: head; /* head corresponds to name in template */ } div.footer { background: rgb(0, 0, 0, 0.2); grid-area: foot; } div.panel { /* div elements with 'panel' class */ background: rgb(0, 0, 0, 0.1); /* 10% black */ } div.panel.left { /* with both 'panel' and 'left' class */ grid-area: panleft; } div.panel.right { grid-area: panright; } div.mainbody { grid-area: mainbody; }

Salvesta index.css.

Võrgustiku HTML-elemendid

Lisage viis elemendid HTML-is, element, mis vastab viiele ruudustikualale.

 Header Left panel Main body Right panel Footer 

Salvesta index.html. Võrgu testimiseks laadige brauseris uuesti index.html.

Põhivõrk

Muutke brauseriakna suurust ja ruudustiku proportsioonid kohanduvad akna suurusega.

Määra ruudustikualade suurus

Määrake päisele ja jalusele kõrgus ning paneelidele laius.

Avage index.css ja leidke need kaks rida.

grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 3fr 1fr;

Asendage need järgmiste ridadega:

 grid-template-columns:  10rem auto 10rem  ; grid-template-rows:  5rem auto 5rem  ; 

Salvesta index.css.

Külgpaneelide vaikelaius on nüüd 10rem ning päise ja jaluse vaikekõrgus on 5rem. Põhiosa (keskvõre ala) on seatud väärtusele automaatne , mis tähendab, et mõõtmed hõivavad kogu vaba ruumi.

The äri üksus ('root em') põhineb juurfondi suurus dokumendi. Selles näites on see määratletud failis index.css HTML-stiilis:

html { ...  font-size: 1.0em;  

The äri ühik on selle em väärtusega võrdne. Näiteks, html {font-size: 1.2em; } skaleeriks kõik asjades väljendatud suurused 120% nende vaikeväärtusest.

Näpunäide

Täpne suurus aastal ühik sõltub fondist. Üldise rusikareeglina võrdub 1em 16 piksliga.

Laadige brauseris uuesti index.html ja muutke akna suurust. Päis ja jalus jäävad fikseeritud kõrguseks ja paneelid jäävad fikseeritud laiuseks.

Suuruse muutmine suureks

Suuruse lai muutmine

Määra mobiilne skaleerimine

Kaasaegsed veebilehed tuleks kujundada kõigepealt mobiil , mis tähendab, et disain peaks eelistama nende välimust mobiilseadmetes.

Brauseri kasutamine arendaja tööriistad , saab dokumenti vaadata justkui mobiilseadmes.

Vajutage Chrome'is klahve Ctrl + Tõst + I ja klõpsake nuppu Vaheta seadme tööriistariba nuppu.

Vajutage Firefoxis klahvikombinatsiooni Ctrl + Tõst + O ja klõpsake nuppu Tundlik kujundusrežiim nuppu.

Vaikimisi on skaala mobiilseadmetes väga väike.

Halb mobiilseadmete skaleerimine

Mobiilseadmetes teksti loetavaks muutmiseks lisage see rida elemendi index.html elementi.

 

See rida käsib brauseril reguleerida skaalat vastavalt lehte vaatavale seadmele.

Laadige mobiili eelvaade uuesti.

Hea mobiilne skaleerimine

Skaleeritud tekst on loetavam, kooskõlas töölaua brauseriga.

Siiski on uus probleem. Fikseeritud laiusega paneelid 'kükitavad' peaosa. Mobiilseadme portreerežiimis pole paneelidele ruumi. Järgmiste jaotiste juhised lahendavad selle probleemi.

Muutke see reageerivaks

Ruudustiku malli määratlemisel saab sellele määrata nimed ruudustikujooned .

Ruudustikujooned moodustavad iga rea ​​ja veeru piirid, sealhulgas ruudustiku serva. Võrk koos x veerud ja Y ridadel on x + 1 veeruread, ja + 1 rea read ja x + Y +2 kogu ruudustikujoont.

Praegu näeb meie ruudustik välja nagu järgmine diagramm.

Võre suurused

Ruudustik sisaldab kolme veergu, mis on määratletud nende veeru suuruse järgi.

grid-template-columns:  10rem auto 10rem  ; 

Valikuliselt võib see määratlus sisaldada ka järgmist rea nimed .

Määrake ruudustiku nimed

Malli määratluses on ridade nimed sulgudes. Neid saab määrata enne suuruse väärtust, selle vahel või pärast seda.

Muutke kataloogis index.css väärtust ruudustik-mall-veerud järgmisele.

grid-template-columns:  [left]  10rem auto 10rem  [right]  ;

Nimed vasakule ja eks viidake nüüd ruudustiku vertikaalsetele piirjoontele.

Ruudustiku nimed

Need nimed võivad uuesti määratleda ruudustikuala serva, nagu on kirjeldatud järgmises osas.

Tingimuslik CSS meediumipäringuga

TO meediumipäring on tingimuslik CSS-i plokk, mis on loodud @pool CSS märksõna. Blokis @media olevaid stiile rakendatakse ainult siis, kui vaatamisseadme kohta on täpsustatud tingimused.

Meediapäringutega saab stiile rakendada vaateava suuruse põhjal, nii et kui kasutaja suurendab oma brauseriakna suurust või pöörab telefoni, vastab CSS vastavalt.

Meediumipäringu üldine vorm on:

@media  media-type  and (  media-feature-rule  ) {  style  ... }

Lisage järgmine meediumipäring index.css lõppu.

@media screen and (max-width: 50rem) { /* if viewport width <50rem */ div.panel.left { grid-column-end: left; /* left panel stops at left edge */ } div.panel.right { grid-column-start: right; /* right panel starts at right edge */ } div.panel { display: none; /* neither panel is displayed */ } div.mainbody { grid-column-start: left; /* mainbody starts at left edge */ grid-column-end: right; /* mainbody ends at right edge */ } }

Salvesta index.css. Laadige brauseris uuesti index.html ja muutke akna suurust. Kui aken muutub kitsamaks kui 50rem (umbes 800 pikslit), kaovad paneelid ja põhiosa laieneb kõigi kolme veeru ulatuses.

Tundlik töölaud

Mobiilseadmetes kuvatakse paneele ainult horisontaalses režiimis.

Tundlik maastik

Kui mobiilseade pööratakse portreerežiimi, peidetakse paneelid ja põhiosa ulatub seadme laiusesse.

Tundlik portree

Lõplik CSS ja HTML

Lõplik CSS lisab kolm täiendavat funktsiooni.

  • Võrkkonteineril on minimaalne kõrgus, mis takistab jaluse ja päise täielikku varisemist.
  • Põhiosa laius on fikseeritud, takistades keha sisu tagasipöördumist.
  • Põhiosa element on oma võrgupiirkonnas keskel õigustatud.

Lõplik index.css

html { width: 100%; /* 100% width of parent (root) element */ height: 100vh; /* 100% height of viewport */ background: rgb(0, 0, 0, 0.1); /* 10% opacity black (very light gray) */ font-size: 1.0em; /* our root font size */ } body { margin: 0; /* content goes to edge of viewport */ height: 100vh; /* and spans height of viewport */ } div.container {  min-height: 25rem; /* mainbody height never squishes <25rem */  display: grid; width: 100%; height: 100%; grid-template-columns: [left] 10rem auto 10rem [right]; grid-template-rows: [top] 5rem auto 5rem [bottom]; grid-template-areas: 'head head head' 'panleft mainbody panright' 'foot foot foot'; } div.header { background: rgb(0, 0, 0, 0.2); /* 20% black */ grid-area: head; /* head corresponds to name in template */ } div.footer { background: rgb(0, 0, 0, 0.2); grid-area: foot; } div.panel { /* div elements with 'panel' class */ background: rgb(0, 0, 0, 0.1); /* 10% black */ } div.panel.left { /* with both 'panel' and 'left' class */ grid-area: panleft; } div.panel.right { grid-area: panright; } div.mainbody { grid-area: mainbody;  width: 30rem; /* mainbody width is fixed */ justify-self: center; /* and always centered in grid area */  } @media screen and (max-width: 50rem) { /* if viewport width <50rem */ div.panel.left { grid-column-end: left; /* left panel stops at left edge */ } div.panel.right { grid-column-start: right; /* right panel starts at right edge */ } div.panel { display: none; /* neither panel is displayed */ } div.mainbody { grid-column-start: left; /* mainbody starts at left edge */ grid-column-end: right; /* mainbody ends at right edge */ } }

Lõplik index.html

 Title Header Left panel Main Body Right panel Footer