CSS režģa izkārtojumi – GRID layouts

 

CSS režģa izkārtojumi ir svarīgi, lai izveidotu labu tīmekļa lapu. Tas ir tāpēc, ka izkārtojumi ir veids, kā nodrošināt lietotājam vizuālas norādes, organizējot atbilstošu saturu, lai tas būtu vieglāk uztverams. Uzzināsim vairāk par izkārtojumiem.

Kad kāds saka vārdu režģis, jūs droši vien domājat par līnijām, kas šķērso viena otru, veidojot kvadrātus vai taisnstūrus. CSS režģi ir divdimensiju dizaina izkārtojumi, kas ir atsaucīgi un saderīgi ar pārlūkprogrammas variantiem. Tie ir alternatīva citām opcijām, piemēram, Flexbox un tabulām, īpaši, ja strādājat ar lielāka mēroga izkārtojumiem…

Kolonnas (column) ir vertikālās, bet rindas (row) ir horizontālās trases jūsu skata logā.

rows and cells kolonnas un šūnas

Režģi sadala lapu rindās un kolonnās, un atstarpi starp šiem celiņiem sauc par caurulēm vai spraugām (gutter).

starpas starp kolonnām un rindām

Šūna (cell) ir vieta režģa konteinerā, kur krustojas rinda un kolonna.

šūna

Ir vairākas dažādas konfigurācijas, kuras varat pievienot, lai definētu un modificētu režģus.

Apskatīsim piemēru, kurā tiek izmantots HTML dokuments, lai parādītu, kā iteratīvi veikt izmaiņas režģī. Vispirms izveidosim HTML dokumentu ar nosaukumu index.html. Šobrīd skata logā redzamais saturs ir tikai vertikāla burtu sērija no A līdz E bez jebkāda stila.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>


    <div class="container">
        <div class="kaste a">A</div>
        <div class="kaste b">B</div>
        <div class="kaste c">C</div>
        <div class="kaste d">D</div>
        <div class="kaste e">E</div>
    </div>
</body>
</html>

Sāksim pievienot saturu CSS failam. Vispirms ir jāiestata dažādu kastīšu klašu rekvizītu vērtības konteinera objektā, lai izkārtojums izskatītos reprezentatīvāks.

body {
    margin: 20px;
}


.kaste {
background-color: #247;
color: #fff;
margin: 10px;
padding: 15px;
border-radius: 10px;
font-size: 150%;
}

ekrānšāviņš

Burtiem tagad ir labāks vizuālais noformējums, taču to izvietojums uz ekrāna ir nemainīgs. Rezultātā katrs burts aizņem vairāk ekrāna vietas, nekā nepieciešams tā izmēram. Skata logā parādītais var šķist režģis, bet patiesībā tas nav. Tie ir tikai CSS noklusējuma iestatījumi izkārtojumam. Kad to pārveidosit režģa izkārtojumā, varēsit atpazīt elastību, ko tas var pievienot. Pārveidosim to režģa izkārtojumā.

Iestatiet konteinera klases rekvizītus, vispirms piešķirot displeja rekvizītam režģa vērtību. Displeja rekvizīts tiek izmantots arī, lai iestatītu displeja veidus citiem dizainiem, piemēram, flex, block, inline utt. Parasti tā ir daļa no konteinera elementiem mūsu kodā.

.container {
    display: grid; /* režģis */
    grid-template-columns: 100px 100px 100px; /* pikseļu vērtības */
    grid-template-rows: 2fr 1fr; /* frakcijas (fractions) */


}

Atjauninātā konteinera displeja rekvizīta vērtība tagad ir iestatīta uz režģi un rekvizītu vērtības ir konfigurētas trīs kolonnām un divām rindām.

Tās ir divas izmaiņas salīdzinājumā ar iepriekšējo konfigurāciju. Izpētīsim to.

Režģa veidnes kolonnu rekvizīts ir pievienots CSS kodam, lai iestatītu katras trīs kolonnas lielumu, izmantojot pikseļu vērtības. Ir ieviesta fr, kas ir daļskaitļa saīsinājums, lietošana. Frakcija efektīvi sadala režģi. Lapā tagad tiek parādītas piecas atsevišķas režģa šūnas ap burtiem, kas ir sakārtotas trīs kolonnās un divās rindās.

Ja tiek izmantots, režģa sliedes tiek sadalītas proporcionāli visu esošo frakciju vērtību attiecībai. Tā kā ir divas rindas, definētās vērtības ir izmērītas attiecībās divi pret vienu. Frakcija piešķir režģim elastību, neņemot vērā faktiskos pikseļu izmērus. Tomēr jāatzīmē, ka daļu un pikseļu izmērus var izmantot aizvietojami gan ar rindām, gan kolonnām.

Tagad, lai pievienotu dažus rekvizītus, piemēram, režģa atstarpi vai noteku un fona krāsu, lai definētu režģi, atjauninātajā skatā tiek parādīts sarkans lodziņš, kas attēlo režģi, jo tā tika iestatīta fona krāsu RGB vērtībai.

.container {
    display: grid; /* režģis */
    grid-template-columns: 100px 100px 100px; /* pikseļu vērtības */
    grid-template-rows: 2fr 1fr; /* frakcijas (fractions) */
    grid-gap: 10px; /* režģa gaps */
    background-color: rgb(202, 96, 96); /* fona krāsa (sajaukums: sarkans 202, zaļš 96, zils 96) */
}

Režģis pēc noklusējuma stiepjas visā lapas platumā, un režģa trases vai notekas izmērs ir noregulēts uz 10 pikseļiem, kas atstāj vairāk vietas starp režģa šūnām. Varat arī izvēlēties izmantot automātiskos rekvizītus, piemēram, režģi, automātiskās rindas un režģa automātiskās kolonnas, ko kopā sauc par netiešo režģi. Aizstāsim režģa veidnes rindu rekvizītu kodā ar režģa automātiskajām rindām grid-auto-rows.

.container {
    display: grid; /* režģis */
    grid-template-columns: 100px 100px 100px; /* pikseļu vērtības */
    grid-auto-rows: 100px; /* frakcijas (fractions) */
    grid-gap: 10px; /* režģa gaps */
    background-color: rgb(202, 96, 96); /* fona krāsa (sajaukums: sarkans 202, zaļš 96, zils 96) */
}

Tagad visu rindu izmērs tiek automātiski mainīts uz 100 pikseļiem. Tagad apskatīsim dažas funkcijas, kas var atvieglot izkārtojuma konfigurēšanu. Pirmkārt, atkārtošanas funkcija nodod atkārtojumu skaitu, kas nepieciešams noteiktam rindu un kolonnu skaitam. Koda pielāgošanas rezultāts ir nemainīga tīmekļa lapa no pēdējās instances, jo atkārtošanas funkcija neko nemainīja, tikai samazināja rakstāmā koda daudzumu.

grid-template-columns: repeat(3, 100px); /* pikseļu vērtības */
.container {
    display: grid; /* režģis */
    grid-template-columns: repeat(3, 100px); /* pikseļu vērtības */
    grid-auto-rows: 100px; /* frakcijas (fractions) */
    grid-gap: 10px; /* režģa gaps */
    background-color: rgb(202, 96, 96); /* fona krāsa (sajaukums: sarkans 202, zaļš 96, zils 96) */
}

Tāpēc atkārtošanas funkcija palīdz samazināt dublēšanos un nodrošina vieglu koda modifikāciju.

Pēc tam funkcija min-max iestata minimālās un maksimālās vērtības, kas sagaidāmas rindu un kolonnu lielumam.

grid-auto-rows: minmax(150px, auto); /* frakcijas (fractions) */

Iestatīsim režģa automātisko rindu vērtību uz 150 pikseļiem. Izvade tiek pārveidota tā, lai katras rindas minimālais izmērs būtu 150 pikseļi.

.container {
    display: grid; /* režģis */
    grid-template-columns: repeat(3, 100px); /* pikseļu vērtības */
    grid-auto-rows: minmax(150px, auto); /* frakcijas (fractions) */
    grid-gap: 10px; /* režģa gaps */
    background-color: rgb(202, 96, 96); /* fona krāsa (sajaukums: sarkans 202, zaļš 96, zils 96) */
}

Vēl viens svarīgs jēdziens ir režģa ietvari (grid frameworks). Ir vairāki bieži lietoti režģa ietvari un izkārtojumi. Divi šādi režģa dizaina izkārtojumi ir zināmi kā 12 un 16 kolonnu režģi. Tie sadala lapu attiecīgi 12 un 16 celiņos gar vertikālajām kolonnām. Rekvizītus var attiecīgi mainīt, lai atlasītu konkrētu celiņu. CSS režģa izkārtojumi ir tik svarīgi, kad runa ir par labu tīmekļa lapas dizainu. Šis raksts ir demonstrējis šo slāni, lai sniegtu lietotājam vizuālas norādes, organizējot saturu tā, lai tas tiktu sakārtots pēc vēlamā izkārtojuma un pārskatāms lietotājam.

Loading

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