Բովանդակություն
- Ի՞նչ է CSS ցանցը:
- Ինչպես սահմանել ցանցը
- Նյութերի դիրքավորում ՝ օգտագործելով գծի համարներ
- Նյութերի դիրքավորում ՝ տարածքների անունների օգտագործմամբ
- Ինչպես ստեղծել պատասխանատու դասավորություն ՝ օգտագործելով CSS անց
- CSS Grid- ի հետադարձ որոնումները հին բրաուզերների համար
- CSS Grid ռեսուրսներ
Ինչպես սահմանել ցանցը
Տեղադրեք կետերը ՝ օգտագործելով գծի համարներ
Տեղադրեք իրերը ՝ օգտագործելով տարածքների անուններ
Ստեղծեք պատասխանատու դասավորություն
Հետադարձ կապ հին բրաուզերների համար
CSS Grid ռեսուրսներ
CSS ridանցի դասավորության մոդուլը ներկայացնում է նոր և բազմակողմանի համակարգ `կայքի դասավորության մեջ տարրերի տեղակայման համար` խիստ ընտրովի ցանցի միջոցով: CSS Grid- ին այժմ աջակցում են բոլոր հիմնական զննարկիչների վերջին երկու տարբերակները, այնպես որ ժամանակն է, որ մենք սկսենք այն ընդունել մեր բոլոր նախագծերում: Այս ձեռնարկում մենք մանրամասն ուսումնասիրելու ենք, թե ինչպես օգտագործել CSS Gանցի հիմնական հատկությունները:
Այլ տարբերակների համար տե՛ս մեր լավագույն ուղեցույցը կայացնող ուղեցույցը: Եվ համոզվեք, որ ստուգեք ձեր վեբ հոստինգն աշխատում է ձեր կայքի կարիքների համար:
- Ստուգեք այս ձեռնարկի կոդը
Ի՞նչ է CSS ցանցը:
CSS Grid- ը տարրերի դասավորության համար չափազանց հզոր գործիք է: Այն ներմուծում է աննախադեպ ճկունություն դասավորության մեջ `օգտագործելով պարզապես մաքուր CSS և առանց բացարձակ դիրքավորման տարրերի (տեխնիկա, որը կարող է հանգեցնել բազմաթիվ խնդիրների): CSS Grid- ը մեզ հնարավորություն է տալիս ձեռք բերել չափազանց բազմազան և սարքին հատուկ դասավորություններ `նույն ճշգրիտ HTML նշագրումից:
Մենք այլևս ստիպված չենք ապավինել հաքերի, բացարձակ դիրքավորման կամ JavaScript DOM մանիպուլյացիայի ՝ դինամիկ, ձևափոխող դասավորություններ իրականացնելու համար: CSS Grid- ը դիզայներներին տալիս է դատարկ կտավ `ստեղծելու համար ցանկացած դասավորություն` առանց մտահոգվելու, թե ինչպես դրան հասնել `ստեղծելով վեբ ձևավորման և զարգացման նոր դարաշրջան` ազատվելով CSS- ի անցյալի սահմանափակումներից և լուծումներից:
Ինչպես սահմանել ցանցը
Կոնտեյների մեջ ցանց ստեղծելու համար այն պետք է տրվի CSS հատկություն ցուցադրում `ցանց, Սյունակների և շարքերի քանակը որոշվում է ըստ տարածության առանձնացված չափերի քանակի ցանց-կաղապար-սյուններ և համապատասխանաբար ցանց-ձևանմուշ-տողեր.
Չափերը կարող են լինել ցանկացած գործող CSS միավոր, ինչպիսիք են px կամ vw, կամ ավտո հիմնաբառ, որը սյուններին կամ տողերին հնարավորություն է տալիս ձգվել առկա տարածության վրա: Օրինակ, grid-template-columns: 10px ավտոմատ տանում է դեպի 10px սյուն, որին հաջորդում է երկրորդ սյունը, որը լրացնում է առկա բոլոր տարածքները:
Ridանցը նաև օգտագործում է «կոտորակային» միավոր ֆր որը առաջացնում է մնացած միավորների բաշխումը սյուններին կամ տողերին ՝ ելնելով այս միավորների գործակիցներից: grid-template-rows: 1fr 2fr ստեղծում է երկու դինամիկ տող երկրորդի հետ, առաջինի կրկնակի չափի, մինչդեռ ցանց-կաղապար-սյուններ ՝ 1fr 1fr 1fr 1fr սահմանում է չորս հավասար չափի սյուններ: Վերջինը կարելի է պարզեցնել ՝ օգտագործելով նորը կրկնել () գործառույթը դեպի grid-template-սյուններ. կրկնել (4, 1fr).
Հետևաբար, ցանց կարող է ստեղծվել դասի ցանցի տարայի ներսում ՝ չորս հավասար չափի, դինամիկ սյուններով և 75px բարձրությամբ չորս տողերով (ինչպես ցույց է տրված վերևում) ՝
.grid {ցուցադրում: grid; grid-template-սյուններ. կրկնել (4, 1fr); grid-template-rows: կրկնել (4, 75px); }
Անհավասար չափի բջիջներով բարդ ցանցեր կարող են ստեղծվել `նախկինում նշված տարբեր միավորները համատեղելով: Կարող ենք նաև օգտագործել այն minmax () գործառույթ ՝ դինամիկ սյունների և շարքերի նվազագույն և առավելագույն չափերը սահմանելու համար: Հետևաբար, grid-template-rows: 40px 2fr կրկնել (2, minmax (75px, 1fr)) տանում է չորս շարքեր ՝ առաջին 40px բարձրությամբ, իսկ մյուս երեքը տարածվում են մնացած տարածության վրա 2: 1: 1 հարաբերակցությամբ, իսկ վերջին երկուսը ունեն 75px նվազագույն բարձրություն, ինչը երկրորդ տողի նվազագույն բարձրությունը սահմանում է 150px:
Aանց ստեղծվելուց հետո ցանցի տողերը, որոնք պատկերված են կետավոր գծերով, պատկերների մեջ վերևից ավտոմատ համարակալվում են շարքերի համար կամ ձախից ՝ սյունների համար: Տողերին տրվում է նաև երկրորդ, բացասական թիվ `տողի համար ներքևի մասից կամ աջից` սյունակների համար:
Օրինակ, ձախ կետում առաջին կետավոր ուղղահայաց գիծը վերը նշված ցանցերում է 1 և -5, իսկ երրորդ տողը ՝ 3 և -2, Այս թվերը կարող են օգտագործվել որպես ցանցում տեղադրված իրերի սահմանային գծեր: Ridանցի գծերը կարող են անվանվել նաև գույքի հայտարարագրերում քառակուսի փակագծերի միջև մի տող ավելացնելով, օրինակ. grid-template-rows: [1st] 1fr [երկրորդ տող] 1fr [last].
Flexbox- ի նման, ցանցում տեղադրված իրերի հորիզոնական և ուղղահայաց դիրքը կարելի է վերահսկել `կարգաբերելով արդարացնել-կետերը և հավասարեցնել իրերը համապատասխանաբար, դեպի սկսել, կենտրոն, վերջ կամ ձգվել.
Նույնը կիրառելի է ավելի մեծ տարայի մեջ ցանցի սյունակի և շարքի դիրքի համար արդարացնել-բովանդակություն և հավասարեցնել բովանդակությունը համապատասխանաբար Այս հատկությունների վավեր տարբերակները ներառում են նաև տարածություն-միջև, որտեղ լրացուցիչ տարածություն բաժանված է սյունակների / տողերի, ինչպես նաև տարածություն-շուրջը և տարածության հավասարաչափ որտեղ տարածքը հավասարապես բաժանվում է սյունների / տողերի միջև ՝ համապատասխանաբար նույն ծայրերի նույն կամ կես չափի տարածությամբ: Կարող ենք նաև սահմանել հավասարեցնել բովանդակությունը և արդարացնել-բովանդակություն (այդ կարգով) օգտագործելով տեղ-բովանդակություն, և հավասարեցնել իրերը և արդարացնել-կետերը օգտագործելով տեղ-առարկաներ.
Նյութերի դիրքավորում ՝ օգտագործելով գծի համարներ
Նյութը ցանցում տեղադրելու համար մենք կարող ենք տեղադրել այն ցանց-սյուն-սկիզբ և ցանց-սյուն-վերջ հատկությունները ուղղահայաց գծի համարներին, որոնց միջեւ պետք է ձգվի իրը: Շարքերի համար հատկություններն են ցանց-տող-սկիզբ և ցանցի շարքի վերջը - և, իհարկե, թվերը վերաբերում են հորիզոնական գծերին:
Կարող էինք նաև օգտագործել սղագրությունները ցանց-սյուն և ցանցի շարք, դրանք դնելով միայն ցանցի մեկնարկային գծի վրա, ինչը հանգեցնում է այն բանի, որ իրը ավտոմատ ձգվում է միայն ցանցի հաջորդ տողում: Ըստ վերևի պատկերի, օգտագործելով այս մեթոդները, կետ 1 կարող են տեղադրվել 2-րդ և 4-րդ ուղղահայաց և 3-րդ և -1-րդ հորիզոնական գծերի (վերջին տողից կամ ներքևից առաջին գծերի) միջև, և կետ 2 ուղղաձիգ 3-ից և հորիզոնական գծից 1-ից դեպի ցանցի հաջորդ գծերը `օգտագործելով.
# item1 {grid-column-start: 2; ցանց-սյուն-վերջ ՝ 4; grid-row-start: 3; ցանցի շարքի վերջ ՝ -1; } # item2 {grid-column: 3; ցանցի տող ՝ 1; }
Հետագա պարզեցման համար `հայտարարագրերը ցանց-սյուն-սկիզբ: 2 և ցանց-սյուն-վերջ: 4 կարելի է համատեղել ինչպես ցանց-սյուն `2/4, նույնը կիրառելի է տողերի օգտագործման համար ցանցի շարք.
Տեղաբաշխման այս մեթոդների օգտագործմամբ նախազգուշացումն այն է, որ հայտարարագրերից մի քանիսը որոշակիորեն սխալ անուն են: Օրինակ, ցանց-սյուն-վերջ: 4 և ցանց-սյուն `2/4 կարող է սխալ մեկնաբանվել որպես «համապատասխանաբար 4-րդ սյունակում վերջի իրերի տեղադրում» և «համապատասխանաբար 2, 3 և 4 սյունակների կետ»: Իհարկե դա այդպես չէ, քանի որ թվերն ավելի շուտ ներկայացնում են ցանցի գծերը, քան սյունակները: Այս հավանական որոգայթից խուսափելու համար մենք կարող ենք հայտարարել ցանցի մեկնարկային գծի համարը և սյունակների կամ տողերի քանակը, որի վրա պետք է անցնի իրը, օգտագործելով span հիմնաբառը:
Օգտագործելով այս մեթոդները, մենք կարող ենք վերադասավորվել կետ 1 2-րդ և 4-րդ հորիզոնական գծերի և 1-ին և 2-ի ուղղահայաց գծերի միջև, և 2-րդ կետը `սկսած ուղղահայաց գծից 2-ով, տարածվելով երեք սյունակների վրա և հորիզոնական գծից 3-ով` տարածված երկու շարքերում (ինչպես վերևում նկարում) ՝
# item1 {grid-column: 1; ցանցի տող ՝ 2/4; } # item2 {grid-column: 2 / span 3; ցանցի տող. 3 / տող 2; }
Հավատացեք, թե ոչ, իրերի տեղադրումը կարող է նույնիսկ ավելի պարզեցվել գույքի հետ ցանցի տարածք, որի համար սղագրություն է ցանց-տող-սկիզբ, ցանց-սյուն-սկիզբ, ցանցի շարքի վերջը և ցանց-սյուն-վերջ այդ կարգով: Եթե սահմանվեն միայն առաջին երկու հատկությունները, ապա տարրը ավտոմատ կերպով կտեղադրվի այդ տողերի և հետևյալ տողերի միջև:
Gանցի այս հատկությունը նաև հնարավորություն է տալիս գծերի համարները զուգակցվել span հիմնաբառի հետ: Կիրառելով այս մեթոդները ՝ մենք կարող ենք վերադասավորվել կետ 1 և կետ 2 որպես այդպիսին.
# item1 {grid-area: 2/1 / span 2 / span 3; } # item2 {grid-area: 4/4; }
Նյութերի դիրքավորում ՝ տարածքների անունների օգտագործմամբ
Չնայած օգտագործելով ցանցի գծի համարները և տարածություն հիմնաբառը տարրերը դիրքավորելու հիանալի միջոց է, ցանցում իրերը տեղադրելու համար կա նույնիսկ ավելի ինտուիտիվ և հեշտ միջոց: Այն ներառում է օգտագործումը ցանցի տարածք և ցանց-ձևանմուշի տարածքներ հատկությունները
Դրան հասնելու համար ցանցում դիրքավորվող յուրաքանչյուր իր պետք է նախ անվանակոչվի `սահմանելով այն ցանցի տարածք հատկություն մի տողի, որն այնուհետև կարող է ներառվել ցանցի մեջ ցանց-ձևանմուշի տարածքներ հայտարարություն. Դրանից հետո հնարավոր է դառնում սահմանել ցանց-ձևանմուշի տարածքներ օգտագործելով տեսողական «քարտեզ», որում շարքերը կցված են չակերտների մեջ, յուրաքանչյուր ցանցային բջիջի պարունակությունը ներկայացված է մի տողով, որը վերաբերում է ցանցի տարածք իրերի անվանումները:
Դատարկ բջիջները խորհրդանշվում են վերջակետով (.) և տարածությունները նշանակում են ցանցի ուղղահայաց գծեր: Տողերը կարող են տեղադրվել նոր տողերի վրա `ցանցի տեսողական պատկերացում ապահովելու համար, հետևյալը.
# item1 {grid-area: item1; } # item2 {grid-area: item2; } .grid {grid-template-areas: "...." "... կետ 1" "կետ 2 հատ 2 հատ 2 հատ 1" "հատ 2 հատ 2 հատ 2 հատ": }
Ինչպես ստեղծել պատասխանատու դասավորություն ՝ օգտագործելով CSS անց
CSS ցանցը կարող է օգտագործվել մեդիայի հարցումների հետ `էկրանի տարբեր չափսերով իրերը վերափոխելու համար` առանց նշագրումը փոխելու: Նյութի ձևը, չափը և դիրքը բոլորը կարող են ամբողջությամբ փոխվել ՝ դրանով իսկ հանգեցնելով իսկապես պատասխանատու և խիստ հարմարեցված դասավորության:
Ասենք, որ մենք ունենք այս HTML նշագրումից առաջացած տարրերի ցուցակ (նկար 1).
div> div> / div> div> / div> div> / div> div> / div> div> / div> div> / div> div> / div> / div>
Օգտագործելով մինչ այժմ մեր սովորած learnedանցի մասին, մենք կարող ենք 720 px- ից լայն էկրանների համար կիրառել ոճեր `օգտագործելով մեդիա հարցում (նկար 2).
@media (min- լայնությունը `721px) {.header {grid-area: header; } .menu {grid-area: menu; } .hero {grid-area: հերոս; } .main {grid-area: main; } .banner {grid-area: banner; } .extra {grid-area: extra; } .image {grid-area: image; } .grid {ցուցադրում: ցանց; grid-template-սյուններ. կրկնել (4, 1fr); grid-template-rows: 40px 2fr կրկնել (4, 1fr); grid-template-areas: "վերնագրի վերնագիր վերնագիր վերնագիր" "հերոս հերոս հերոս հերոս" "ընտրացանկի հիմնական հիմնական հիմնական" "ընտրացանկի հիմնական հիմնական հիմնական" "ընտրացանկի պաստառ բաններ" "ընտրացանկի լրացուցիչ պատկերի պատկեր"; }}
Մենք կարող ենք նաև հեշտությամբ վերատեղադրել և չափափոխել ավելի մեծ էկրանների համար նախատեսված իրերը, որոնք ավելի լայն են, քան 1000 px- ը, օգտագործելով մեկ այլ մեդիա հարցում (նկար 3).
@ media (min- լայնությունը `1001px) {.grid {grid-template-areas:" header menu menu menu "" հերոս հերոս հերոս հերոս "" հերոս հերոս հերոս հերոս "" հիմնական հիմնական. պատկեր "" հիմնական հիմնական. լրացուցիչ "" banner banner banner banner "; }}
Դա դեռ ամենը չէ. Ցանցի սյունների և տողերի քանակը նույնիսկ կարող է փոխվել `որոշելու համար էկրանի որոշակի չափսեր, եթե դա ցանկալի է, վերասահմանելով ցանց-կաղապար-սյուններ և / կամ ցանց-կաղապար-տողեր լրատվամիջոցների հարցումների շրջանակներում:
Համընկնող տարրերը կարող են հասնել նաև CSS Grid- ի միջոցով: Բազմաթիվ իրեր կարող են գրավել նույն ցանցային բջիջները և, հետևաբար, կարող են համընկնել միմյանց հետ ՝ օգտագործելով դրանք z- ինդեքս իրերի հատկությունները `դրանց դասավորության կարգը վերահսկելու համար:
Օրինակ, ցանցի տարայի ներսում մենք կարող ենք դասի գործիքագոտով ավելացնել կիսաթափանցիկ տարր և տեղադրել այն ամենա աջ մասում, որպեսզի այն համընկնի մնացած բոլոր տարրերի հետ (նկար 4).
.toolbar {grid-column: 4; ցանցի տող ՝ 1 / -1; անթափանցիկություն .85; z- ինդեքս: 1; }
Վերջնական ասպեկտը, որը մենք կքննարկենք, սյունների և շարքերի կամ բացերի միջև հեռավորությունն է (նկար 5): Itemsանցի իրերը կարելի է առանձնացնել ՝ օգտագործելով ցանց-սյուն-բացը կամ ցանցի շարքի բացը հատկություններ, որոնք համապատասխանաբար սահմանում են սյունակների և տողերի միջև եղած բացը: Սղագրության հատկությունների ցանցի բացը կարող է սահմանել երկուսն էլ:
CSS Grid- ի հետադարձ որոնումները հին բրաուզերների համար
CSS ridանցի հատկությունների տեղադրումը բջջային հատկությունների ներքևում երաշխավորում է, որ այն զննարկիչները, որոնք դեռ չեն աջակցում Grid- ին, անտեսելու են այն և մատուցելու են բջջային տարբերակը: Այլընտրանքորեն կարող ենք ավելացնել հիմնական վերադարձի դասավորությունը ՝ օգտագործելով @ օժանդակությունհարցում, որը կիրառում է կանոններ, որոնք հիմնված են զննարկչի աջակցության վրա ՝ որոշակի CSS առանձնահատկության համար: Այսպիսով, մենք կարող ենք սահմանել հետադարձ դասավորություն 720 px- ից ավելի էկրանի չափսերի համար.
@ աջակցում է ոչ (ցուցադրում ՝ ցանց) {@media (min- լայնություն ՝ 721px) {.header, .extra {float: ձախ; լայնությունը `50%; }}}
Եթե ինչ-ինչ պատճառներով անհրաժեշտ է, որ այս արդյունքը ցուցադրվի Internet Explorer 10-ի և 11-ի համար, որոնք չեն աջակցում ridանցին, ոչ էլ, հեգնանքով, @ օժանդակություն հարցում, դուք կարող եք օգտագործել հայտնի հարցումը, որը կիրառում է ոճեր միայն IE10- ում և 11-ում.
@media (min- լայնությունը `721px) և (-ms- բարձր-հակադրություն` ոչ մեկը), (-ms-high-contrast: ակտիվ) {.header, .extra {float: ձախ; լայնությունը `50%; }}
Եթե IE9 և ավելի հին աջակցություն եք պահանջում, HTML- ում տեղադրեք լրացուցիչ ոճաթերթեր համապատասխան ոճերով ՝ օգտագործելով ՝
! - [եթե IE]> հղում rel = "stylesheet" href = "ie.css" />! [endif] ->
CSS Grid ռեսուրսներ
Լրացուցիչ տեղեկությունների և ձեռնարկների վերաբերյալ CSS ridանցի մոդուլի վերաբերյալ կարող եք դիտել հետևյալ ռեսուրսները:
MDN վեբ փաստաթղթեր
Ինչպես միշտ, Mozilla Developer Network վեբ փաստաթղթերի կայքը հիանալի տեղ է սկիզբը սկսելու համար, կամ շարունակաբար վերադառնալու, կախված նրանից, թե որքան ուժեղ է ձեր հիշողությունը ՝ վեբ մշակողների ռեսուրսների համար: Մասնավորապես, նրա CSS ridանցի դասավորության էջը բացատրություններ ունի ridանցի բոլոր հատկությունների վերաբերյալ, ինչպես նաև ինտերակտիվ օրինակներ, որպեսզի փորձեք ինքներդ ձեզ:
Scrimba ինտերակտիվ. CSS Grid ձեռնարկ
Scrimba- ն ինտերակտիվ կոդերի դասընթացների հարթակ է: Ձեռնարկը վերսկսելը կարող եք դադարեցնել տեսանյութերը, խմբագրել դրանցում պարունակվող ծածկագիրը և տեսնել արդյունքները: Դա կոդավորում սովորելու ֆանտաստիկ միջոց է, և Per Harald Borgen- ի անվճար, 14 մասից բաղկացած CSS Grid դասընթացը հիանալի է նրանց համար, ովքեր նախընտրում են վիդեո դասընթացներ:
Grid Garden խաղ
Կոդավորումը սովորելու հիանալի ինտերակտիվ միջոց է խաղերի միջոցով: Grid Garden- ը առցանց խաղ է, որը թույլ է տալիս ջրել գազարի պարտեզը `խմբագրում մուտքագրելով CSS Grid հատկությունները: Դա շատ զվարճալի է և զարմանալիորեն բավարարող, նույնիսկ եթե ձեր բերքը պարզապես թվային է:
Կայքի ձևավորում ՝ որպես թիմի մաս՞: Ձեր ամպային պահպանման ծառայությունը կօգնի բոլորին մնալ նույն էջում:
Այս հոդվածն ի սկզբանե տպագրվել է ք ցանցաշխարհի վեբ դիզայներների և մշակողների համար ամենալավ վաճառվող ամսագիրը: Գնել թողարկում 309 կամ բաժանորդագրվել.
