CSS režģa veidnes izkārtojums

Režģa izkārtojumi ir veids, kā grupēt vienu vai vairākas režģa šūnas. Režģa veidnes izkārtojums ir šīs koncepcijas paplašinājums, kurā varat piešķirt nosaukumus šīm režģa zonām. Kad nosaukumi ir definēti, varat adresēt šos jaunos režģa apgabala vienumus pēc to nosaukumiem un attiecīgi konfigurēt.

Rekvizītu režģa-veidnes izkārtojumi parasti tiek ievietoti pamatteksta tagā vai jebkurā konteinerā, kur ir jānovieto režģis, tāpat kā jūs definējat režģa noteikumus. Galvenā atšķirība ir tāda, ka režģa-veidnes izkārtojumu gadījumā esošās vērtības būs dažādi nosaukumi.

Process

Process nav obligāts, taču vispārīgi ir norādīti šādi soļi:

(īsos piemēros…)

  • Definējiet režģi, izmantojot displeja rekvizītu
.container {
display: grid;
}
  • Iestatiet režģa augstumu un platumu
.container {
grid-template-rows: 100px 200px 300px;
grid-template-columns: 150px 150px 150px;
}
  • Iestatiet režģa-veidnes apgabalus ar atbilstošiem nosaukuma identifikatoriem
.container {
grid-template-areas:
"header header header"
"nav main main"
"footer footer footer";
}
  • Pievienojiet atbilstošos izmērus rindām režģī, izmantojot rekvizītu grid-template-rows
.container {
grid-template-rows: 100px 200px 300px;
}
  • Pievienojiet atbilstošos izmērus kolonnām režģī, izmantojot rekvizītu grid-template-columns
.container {
grid-template-columns: 150px 150px 150px;
}

Bet kā tieši jūs lietojat šos nosaukumus un no kurienes tie nāk?

Nosaukumi, ko izmantojat režģa veidņu apgabalos, ir izmantotie HTML tagi. Vai arī, ja vēlaties iegūt precīzāku informāciju, šiem tagiem norādiet klases nosaukumu. Kad nosaukumi ir piešķirti, jūs definējat katras klases rekvizītus tādā pašā veidā, kā tos definējat parasti. Apskatīsim piemēru.

HTML kods:

<head>


<linkrel="stylesheet"href="gridta.css">


</head>



<body>


<header> Galvene </header>


<navclass="nav-bar"> Navigācija </nav>


<main> Galvenā daļa </main>


<footer> Kājene </footer>


</body>
CSS kods:
body { 


display:grid; 


height:200px; 


grid-template-areas:"head head"


"nav  main"


"footer  footer"; 


grid-template-rows:30px1fr30px; 


grid-template-columns:150px1fr; 


  } 



header { 


grid-area:head; 


background-color:lightsalmon; 


  } 



.nav-bar { 


grid-area:nav; 


background-color:lightblue; 


  } 



main { 


grid-area:main; 


background-color:lightyellow; 


  } 



footer { 


grid-area:footer; 


background-color:firebrick; 


  } 

Iznākums:

grid layout area

Lai gan ir piecas parametru kopas, loģiski CSS kods ir sadalīts divās sadaļās.

  • Pirmā ir vieta, kur jūs definējat režģa noteikumus korpusa atlasītājā.
  • Otrā, jūs piešķirat īpašus noteikumus dažādām tīkla zonām.

Šo režģa apgabalu izplatīšanas veids ir atkarīgs no tā, kā esat definējis nosaukumus rekvizīta grid-template-areas ietvaros.

Iepriekš minētajā piemērā attiecīgais kods ir:

 grid-template-areas: "head head"
                         "nav  main"
                         "footer  footer";

Vārds “head” ir rakstīts divreiz, lai nozīmētu divas kolonnas, un pārējais saturs atbilst parastajai konvencijai. Rindu skaits būs jūsu izmantoto “pēdiņu pāru” skaits, kas šajā gadījumā ir trīs. Proti, “head head”, “nav main” un “footer footer”. Tiklīdz jūs zināt rindu un kolonnu skaitu, to vērtības tiks iestatītas, izmantojot režģa-veidnes-rindas un režģa-veidnes-kolonnas. Tā kā šeit ir attiecīgi trīs un divi, jums jāpievieno tik daudz vērtību. Augstums vienkārši norāda režģa augstuma kopējo vērtību.

Ņemiet vērā, ka “galvenes” rakstīšanas reižu skaitam nebija jābūt divām. Varat tos uzrakstīt vairāk, un, ja pareizi līdzināsit pārējos režģa nosaukumus, režģa laukumu augstums un platums tiks sadalīti proporcionāli.

Atgriezīsimies pie piemēra. Ja saglabājat visus pārējos rekvizītus, bet maināt režģa veidnes apgabalus šādi:

grid-template-areas: "head head head"
                         "nav  main main"
                         "footer  footer footer";

Izvade paliks tāda pati, kā jūs esat fiksējis trešās rindas vērtību uz “30px”. Piemērs ir vienkāršs skaidrības labad, taču, ja jūs būtu izmantojis relatīvās vērtības, jūs būtu pamanījuši novērojamas izmaiņas navigācijas un galveno režģa apgabalu salīdzināmajos izmēros.

Režģa apgabali ir ērti, ja jums ir skaidra shēma, ko vēlaties režģī. Ir arī vieglāk konfigurēt atsevišķus apgabalus, ja varat tos uzrunāt pēc to nosaukumiem. Pieņemsim, ka veidojat CV savā vietnē, varēsit nosaukt dažādas jomas, piemēram, “Bio”, “Izglītība”, “Darba pieredze” un tā tālāk. Un šīs etiķetes ir vieglāk izmantot, kad definējat noteikumus. Vienmēr ir laba ideja izveidot blokshēmu, izmantojot pildspalvu un papīru, pirms sākat strādāt pie režģa.

 

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: