CSS Grid-ի ուղեցույց. դասավորությունների յուրացում ցանցի հատկություններով

Իմացեք, թե ինչպես օգտագործել CSS ցանցերը բարդ դասավորությունները հեշտությամբ կառուցելու համար:

Կայքէջի վրա տարրերի տեղադրումը կարող է շատ բարդ լինել բարդ դասավորությունների հետ աշխատելիս: Այստեղ է, որ CSS ցանցը հարմար է: Դա դասավորության համակարգ է, որը նախատեսված է բարդ դասավորությունների ստեղծման գործընթացը պարզեցնելու համար:

Ինչպե՞ս է դա օգնում ձեզ: Ի տարբերություն դասավորության ավանդական մեթոդների, որոնք թույլ են տալիս միայն տարրերը տեղադրել տողերում կամ սյունակներում, CSS grid-ը ձեզ առաջարկում է երկու աշխարհներից լավագույնը՝ 2D մոտեցում՝ օգտագործելով տողեր և սյունակներ:

Ցանցային տարաներ և իրեր

Դուք կարող եք կիրառել CSS ցանցի հատկությունները երկու հիմնական տեսակի տարրերի վրա՝ ծնող և երեխա: Երբ ցուցադրման հատկությունը սահմանում եք «grid» մայր տարրի համար, այն փոխակերպում է այդ տարրը ցանցի կոնտեյների: Ցանկացած երեխա տարր այս ցանցի կոնտեյների մեջ դառնում է ցանցի տարր՝ ժառանգելով կիրառվող ցանցի հատկությունները:

Ահա թե ինչպես է այն ներկայացված.

Ցանցային տարրը կարող է նաև դառնալ ցանցի կոնտեյներ: Այժմ կարող եք դասավորությունը վերաբերել որպես ներդիր ցանց՝ ցանց ցանցի մեջ: Հիմնական ցանցային բեռնարկղը այժմ կոչվում է արտաքին ցանց, մինչդեռ իրերի վերածված ցանցի կոնտեյները դառնում է ներքին ցանց:

Այս ցանցերից յուրաքանչյուրը գործում է մյուսից անկախ, ինչը նշանակում է, որ ներքին ցանցի համար սահմանված հատկությունները չեն ազդում արտաքին ցանցի դասավորության վրա և հակառակը:

Ահա թե ինչ տեսք ունի.

Ցանցային տարաների և իրերի միջև փոխհարաբերությունների տիրապետումը կարևոր է երկչափ դասավորություններ արդյունավետ կառուցելու համար:

Ցանցային գծեր և հետքեր

Նախքան սկսեք օգտագործել CSS ցանցը, կան երկու հիմնական տերմիններ, որոնց պետք է ծանոթ լինեք.

1. Ցանցային գծեր. Ցանցային գծերը վերաբերում են հորիզոնական և ուղղահայաց գծերին, որոնք կազմում են ցանցը CSS ցանցի դասավորության մեջ: Նրանք նշում են տողերի և սյունակների մեկնարկային և ավարտական կետերը՝ օգնելով կազմակերպել, թե որտեղ են ընթանում իրերը ցանցում: Այս տողերը նման են տուփերի եզրերին. նրանք ունեն թվեր, որոնք օգնում են ձեզ նշել տարրերը դիրքավորելիս: Այստեղ կարմիր գծավոր գիծը ներկայացնում է դրանք.

2. 

Մտածեք ցանցային գծերի և հետքերի մասին որպես ցանցային դասավորության կառուցման բլոկներ, ինչպես գրաֆիկական թղթի թերթիկի գծերը: Երբ հորիզոնական ցանցի գիծը հատվում է ուղղահայաց ցանցի գծի հետ, այն ձևավորում է վանդակաձև բջիջ: Այս բջիջները գործում են որպես բեռնարկղեր, որտեղ դուք կարող եք տեղադրել ձեր ցանցի տարրերը:

CSS Grid Container Properties

Սրանք հատկություններ են, որոնք կարող եք կիրառել ցանցի կոնտեյների վրա՝ դասավորությունը կազմակերպելու և դրա ներսում տարրերի տեղակայման հարցում օգնելու համար: Ինչպես նշվեց ավելի վաղ, դրանցից մեկը ցանցի վրա դրված ցուցադրման հատկությունն է: Ահա ավելին.

Ցանց Կաղապար

Այս հատկությունը սահմանում է տողերի և սյունակների չափը: Դուք կարող եք չափել այս հատկությունները՝ օգտագործելով պիքսելները, տոկոսները կամ կոտորակային միավորը (fr): Նաև կարող եք օգտագործել հիմնաբառեր, ինչպիսիք են auto, minmax() և repeat()՝ ճկունությունը բարձրացնելու համար:

• grid-template-rows. սահմանում է տողերի բարձրությունը:
• grid-template-columns. սահմանում է սյունակների լայնությունները:

Ահա մի քանի օրինակներ.

Փիքսելների օգտագործում.

.grid-container {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-template-rows: 250px 250px;
}

Օգտագործելով տոկոսները.

.grid-container {
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 50% 50%;
}

Օգտագործելով fr:

.grid-container {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
}

Օգտագործելով ավտոմատ և minmax() հիմնաբառեր.

.grid-container {
  grid-template-columns: auto minmax(150px, 1fr) auto;
  grid-template-rows: 100px auto;
}

Օգտագործելով repeat()՝ հետևողական չափերի համար.

.grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
}

Ավտոմատ տեղադրման և ցանցի ձևանմուշների տարածքներ

Ավտոմատ տեղադրում. Ավտոմատ տեղադրումը նման է ցանցին թույլ տալու, թե որտեղ տեղադրի իրերը: Եթե ճշգրիտ դիրքեր չնշեք, ցանցն ավտոմատ կերպով կտեղադրի տարրերն այն հերթականությամբ, որ նրանք հայտնվում են նշագրման մեջ: Սա օգտակար է, երբ դուք ունեք շատ իրեր և ցանկանում եք, որ դրանք հավասարապես լրացնեն ցանցը:

Ցանցային ձևանմուշների տարածքներ. Մտածեք ցանցի ձևանմուշների տարածքների մասին որպես դասավորության ստեղծում՝ օգտագործելով անվանված գոտիները: Դա նման է հատակագծի վրա սենյակների անուններին: Ցանցային տարրերը տեղադրելու ժամանակ կարող եք դիմել այս տարածքների անուններին: Օրինակ:

.grid-container {
  grid-template-areas:'header header header header'
    'sidebar main main right'
    'sidebar content content right'
    'footer footer footer footer';
}

Այս դասավորությունը նման է երեք սյունակներով և չորս տողերով ցանցի: Հիմնական բովանդակության տարածքի համար կա երկու տող: Պիտակված տարածքները ներառում են «վերնագիր», «կողային տող», «բովանդակություն» և «ստորատակ»: Հաջորդ բաժիններում դուք կսովորեք, թե ինչպես օգտագործել այս տարածքի պիտակները ցանցի յուրաքանչյուր տարրի հատկություններում:

Հավասարեցում CSS Grid-ում

Դուք կարող եք օգտագործել հավասարեցման հատկությունները՝ ցանցի տարրերի դիրքավորումը վերահսկելու իրենց ցանցի բջիջներում: Հատկություններն են.

• justify-items. վերահսկում է տարրերի հորիզոնական հավասարեցումը իրենց ցանցի բջիջում:

  • Արժեքներ. սկիզբ, ավարտ, կենտրոնացում և ձգում:

• հավասարեցնել-տարրեր. վերահսկում է տարրերի ուղղահայաց հավասարեցումը իրենց ցանցի բջիջում:

  • Արժեքներ. սկիզբ, ավարտ, կենտրոնացում և ձգում:

• justify-content. հարթեցնում է ամբողջ ցանցը կոնտեյների ներսում հորիզոնական առանցքի երկայնքով:

  • Արժեքներ. սկիզբ, ավարտ, կենտրոն, ձգում, տարածություն միջև, տարածություն շուրջը և հավասարաչափ տարածություն:

• align-content. հարթեցնում է ամբողջ ցանցը կոնտեյների ներսում ուղղահայաց առանցքի երկայնքով:

  • Արժեքներ. սկիզբ, ավարտ, կենտրոն, ձգում, տարածություն միջև, տարածություն շուրջը և հավասարաչափ տարածություն:

Ահա մի օրինակ.

.grid-container {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  align-content: center;
}

Այս օրինակում տարրերը կկենտրոնանան ինչպես հորիզոնական, այնպես էլ ուղղահայաց իրենց բջիջներում: Տարածությունը հավասարաչափ կբաշխվի ամբողջ ցանցի սյուների միջև, և ցանցը ուղղահայաց կկենտրոնանա տարայի մեջ:

Ցանցային բացը

Ցանցային բացը վերաբերում է ցանցի դասավորության մեջ տողերի և սյունակների միջև եղած տարածությանը: Այն օգնում է ստեղծել տեսողական տարանջատում և ավելացնում է որոշակի տեղ ցանցի տարրերի միջև:

grid-gap հատկությունը թույլ է տալիս սահմանել տողերի և սյունակների միջև եղած բացը: Այն սահմանելու համար կարող եք օգտագործել տարբեր միավորներ, ինչպիսիք են պիքսելները (px), տոկոսները (%), em միավորները (em) և այլն:

.grid-container {
  grid-gap: 20px;
}

Այս օրինակում ցանցի բեռնարկղն ունի երկու սյունակ՝ նրանց միջև 20 պիքսելանոց բացվածքով: Այս տարածությունը տեսողականորեն առանձնացնում է սյունակները և մեծացնում դասավորությունը:

CSS Grid տարրի հատկություններ

Ահա մի քանի հիմնական հատկություններ, որոնք վերահսկում են առանձին ցանցի տարրերի վարքագիծը CSS ցանցի դասավորության մեջ, օրինակների հետ միասին.

grid-row-start and grid-row-end:

• Սահմանում է սկզբնական և ավարտվող տողերը տարրի համար:
• Արժեքները կարող են լինել տողերի համարներ, «span n» կամ «auto»:

.grid-item-1 {
  grid-row-start: 2;
  grid-row-end: 4;
}

Այս կոդը տեղադրում է Ցանցային կետ 1 երկրորդ տողից մինչև չորրորդ տող:

grid-column-start and grid-column-end:

• Սահմանում է սկզբնական և ավարտվող սյունակի տողերը տարրի համար:
• Արժեքները կարող են լինել տողերի համարներ, «span n» կամ «auto»:

.grid-item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Այս կոդը տեղադրում է Ցանց 2-րդ կետը առաջին սյունակի տողից մինչև երրորդ սյունակի տող:

ցանցային տարածք:

• Նշում է ցանցի տարրի չափն ու դիրքը ցանցում՝ հղում անելով անվանված ցանցային գծերին grid-template-areas-ում:
• Ինչպես նշվեց ավելի վաղ, նախապես սահմանված տարածքների անուններն արդեն օգտագործվում են grid-template-areas հատկության հետ: Ահա մի օրինակ, թե ինչպես կարելի է այն օգտագործել ցանցային տարածք-ի հետ միասին:

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.content {
  grid-area: content;
}
.right {
  grid-area: right;
}
.footer {
  grid-area: footer;
}

Ահա արդյունքը.

իրեն արդարացնել.

• Հավասարեցնում է առանձին տարրեր իր բջիջի ներսում:
• Արժեքները կարող են լինել սկիզբ, վերջ, կենտրոն և ձգվել:

.grid-item-5 {
  justify-self: center;
}

Այս կոդը հորիզոնականորեն կենտրոնացնում է Ցանցային տարրը 5 իր բջիջում:

հավասարեցնել ինքն իրեն:

• Հավասարեցրեք առանձին տարրերը ուղղահայաց իր բջիջի ներսում:
• Արժեքները կարող են լինել սկիզբ, վերջ, կենտրոն և ձգվել:

.grid-item-1 {
  align-self: end;
}

Այս կոդը հավասարեցնում է Ցանցային տարրը 1 իր բջիջի ներքևի մասում:

Ազատ զգալ միավորել և հարմարեցնել այս հատկությունները՝ ձեր CSS Grid-ի յուրաքանչյուր ցանցի տարրի համար ձեր ուզած դասավորությունն ու տեսքը ստեղծելու համար:

Պատասխանատու դասավորությունների ստեղծում՝ օգտագործելով CSS ցանցեր

Պատասխանատու դասավորություններ ստեղծելու համար CSS ցանցերի օգտագործումը կարևոր է ապահովելու համար, որ ձեր վեբ էջը անխափան կերպով հարմարվում է տարբեր էկրանների չափերին և սարքերին: Դուք կարող եք կիրառել այս մեթոդները.

• Մեդիա հարցումներ. Դուք կարող եք օգտագործել մեդիա հարցումներ՝ տարբեր ցանցային դասավորություններ կիրառելու համար՝ կախված էկրանի չափերից: Օրինակ, ձեզ կարող է անհրաժեշտ լինել վերադասավորել ցանցի տարրերը կամ հարմարեցնել սյունակների լայնությունը փոքր էկրանների համար:
• Ճկուն միավորներ. օգտագործեք հարաբերական միավորներ, ինչպիսիք են տոկոսները և fr, որպեսզի ցանցի տարրերն ու սյունակները հարմարեցվեն հասանելի տարածությանը համաչափ:
• minmax(). Օգտագործեք minmax() ֆունկցիան` ցանցի սյունակների կամ տողերի չափերի շրջանակը նշելու համար: Այն ապահովում է, որ տարրերը շատ փոքր կամ չափազանց մեծ չեն երևա տարբեր էկրաններին:

Հիշեք, որ կարգավորեք սյունակները և այլ տարրեր, ինչպիսիք են ցանցի տարրերի, տառաչափերի և լուսանցքների միջև եղած բացերը: Այն ապահովում է հետևողական և լավ մշակված դասավորություն, որը լավ է աշխատում տարբեր սարքերի վրա:

Ուսումնասիրեք CSS Grid Layout-ի հնարավորությունները

Ընդգրկելով CSS ցանցի ճկունությունն ու հզորությունը, թույլ կտան ստեղծել դասավորություններ, որոնք ոչ միայն հիանալի տեսք ունեն, այլև անխափան կերպով հարմարվում են ժամանակակից վեբ դիզայնի պահանջներին: Այսպիսով, սուզվեք ցանցերի աշխարհ, ուսումնասիրեք հնարավորությունները և բարձրացրեք ձեր վեբ զարգացման հմտությունները:

Երբ դուք խորանում եք դասավորության համակարգերում, կարող եք համեմատել դասավորության այլ մեթոդներ CSS ցանցերի հետ: Դուք կարող եք դա անել CSS Flexbox մոդուլի միջոցով: Սա կօգնի ձեզ սովորել կողմնորոշվել նախագծի վրա աշխատելիս: