Docy

CSS-GRID

Մոտավոր ընթերցում. 13 րոպե 0 դիտումներ

Grid-ը ստեղծում է ցանցի մոդել։ Ցանցի գծերի կորդինատների միջոցով են հավաքվում grid-էլեմենտները  grid-կոնտեյներում։

Ցանցի գծերի միջոցով են սահմանվում ուղղահայաց և հորիզոնական ուղիները՝ տողերը և սյունակները։

Օրինակ՝

Ցանցի յուրաքանչյուր գիծ ունի իր համարը․ դրանց կարելի է նաև անվանումներ սահմանել։

Նկարում ներքևի և աջ կողմերում նշված են ուղղահայաց և հորիզոնական գծերի համարները։ 

Օրինակ առաջին հորիզոնական գիծը նշված է [ 1 ] համարով և դա նույնն է ինչ [ -4 ] -ը բացասականի դեպքում։

Առաջին ուղղահայաց գիծը կրկին նշված է  [ 1 ] համարով և բացասական արժեքի դեպքում դա հավասար է [ -6 ] – ի։


Կան հստակ և անհստակ ցանցեր՝ grid-ներ։

Հստակ ցանց

Հստակ ցանցն ունի ֆիքսված քանակի գծեր և ուղիներ, որոնք ձևավորում են ցանցը՝ օգտագործելով grid-template-rows, grid-template-coulmns, grid-template-areas հատկությունները։

				
					.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 70px 70px;
  grid-gap: 20px;
}
				
			
				
					<body>
  <section class="grid">
    <div class="item">item1</div>
    <div class="item">item2</div>
  </section>
</body>
				
			

Նկարում սահմանված է երկու հորիզոնական ուղի՝ տող և չորս ուղղահայաց ուղի՝ սյունակ, գծերի լայնությունը հավասար է 20px-ի, իսկ grid էլեմենտները երկուսն են։

grid ցանցի ուղիները հնարավոր է տեսնել “Firefox Developer Edition” բրաուզերում հետևյալ կերպ՝

Անհստակ ցանց

Եթե grid-էլեմենտներն ավելին են, քան ցանցին սահմանած արկղների քանակը, կամ եթե grid-էլեմենտը grid-կոնտեյների սահմաններից դուրս է, ապա կոնտեյները ցանցում ավտոմատ պատրաստում  է ուղիներ՝  ցանցում ավելացնելով գծեր։

				
					.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 70px 70px;
  grid-gap: 20px;
  max-width: 800px;
}
.item1 {
  grid-column-start: -1;
}
.item2 {
  grid-row-start: 4;
}
				
			
				
					<body>
  <section class="grid">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
  </section>
</body>
				
			

Առաջին էլեմենտի համար նշված է՝ grid-column-start: -1՝ grid-էլեմենտի լայնության(column) սկզիբը սկսվելու է [ -1 ] գծից(նույնն է ինչ [ 5 ]-ը)։  Բարձրությունը և լայնությունը կվորոշվի ավտոմատ։

Երկրորդ էլեմենտի համար նշված է՝ grid-row-start: 4՝ grid-էլեմենտի բարձրության(row) սկզիբը սկսվելու է [ 4 ]-րդ գծից։  grid-կոնտեյների հորիզոնական գծերը երեքն են, իսկ որպես արժեք նշված է 4․ սա կնշանակի՝ կոնտեյներից դուրս կավելացվի ևս երկու գիծ երկրորդ էլեմենտը տեղավորելու համար։ Բարձրությունը և լայնությունը կվորոշվի ավտոմատ։

Երկու էլեմենտներն էլ հստակ grid-կոնտեյներից դուրս են, ուստի չունեն ֆիքսված չափեր՝ դրանց ցանցը կկոչվի անհստակ ցանց։

Կոնտեյներից դուրս անհստակ ուղիների չափերը կարող են հսկվել և դրանցում գտնվող էլեմենտներին սահմանել չափեր։ 

grid-auto-rows և grid-auto-columns հատկությունների միջոցով կարող ենք անհստակ ուղիներին չափեր սահմանել։

				
					.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 70px 70px;
  grid-gap: 20px;
  grid-auto-columns: 200px;
  grid-auto-rows: 60px;
  max-width: 800px;
}
.item1 {
  grid-column-start: -1;
}
.item2) {
  grid-row-start: 4;
}
				
			
				
					<body>
  <section class="grid">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
  </section>
</body>
				
			

Ցանցից դուրս բոլոր անհստակ ուղիները միշտ կունենան 200px լայնություն և 60px բարձրություն՝ անկախ նրանից grid-կոնտեյների ուղիների չափը համապատասխանում է անհստակ ուղիների չափին, թե ոչ։

Հնարավոր է նաև հստակ ցանցն ավելի ընդարձակել, օրինակ՝ վերևից։

				
					.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 100px 100px;
  grid-auto-columns: 200px;
  grid-auto-rows: 70px;
  grid-gap: 20px;
  max-width: 800px;
}
.item1 {
  grid-row-end: 2;
  grid-row-start: span 2;
}
.item2 {
  grid-column-end: 2;
  grid-column-start: span 2;
}
				
			
				
					<body>
  <section class="grid">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
  </section>
</body>
				
			

Առաջին էլեմենտին սահմանած է   grid-row-end: 2   և   grid-row-start: span 2։ Սա կնշանակի՝ առաջին էլեմենտի բարձրության ավարտը կլինի 2-րդ հորիզոնական գիծը, իսկ սկիզբը՝ դրանից երկու գիծ բարձր։ Էլեմենտի այն մասը, որը հստակ ցանցի սահմաններից դուրս է, 70px է։ Արդյունքում էլեմենտի բարձրությունը՝ 170px:

Երկրորդ էլեմենտին սահմանած է grid-column-end: 2  և  grid-column-start:  span 2 ։  Սա կնշանակի՝ երկրորդ էլեմենտի լայնության ավարտը կլինի 2-րդ  ուղղահայաց գիծը, իսկ սկիզբը կլինի այդտեղից երկու գիծ դեպի ձախ։ Էլեմենտի այն մասը, որը հստակ ցանցի սահմաններից դուրս է, 200px է։ Արդյունքում էլեմենտի լայնությունը՝ 350px-ի :

Այսպիսով ավելացավ մեկ հորիզոնական և մեկ ուղղահայաց անհստակ ուղիներ։  grid-կոնտեյների էլեմենտերը կլինեն ստանդարտ չափի, իսկ ամենավերևի տողի և ամենաձախ սյունակի էլեմենտների չափը կարող է մեծացվել քիչ առաջ նշված օրինակով։

grid-template-rows

grid-template-rows – սահմանում է grid-կոնտեյների տողերը(հորիզոնական ուղիները), որտեղ նշվում է ուղիների քանակը, չափը և դրանց անվանումները։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  none
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի կոնտեյների հետ։
Ենթարկվում է անիմացիայիՈրոշակի չափով

Արժեքներն են՝

none – սահմանում է, որ չի պատրաստվելու ցանցի հստակ ուղիներ․ դրանք առաջանալու են անուղղակի, որոնց չափը կսահմանվի grid-auto-rows-ի միջոցով։

[գծիԱնվանումը] –grid-կոնտեյները բաղկացած է հորիզոնական և ուղղահայաց ուղիներից, որոնք ստանում ենք կոնտեյներում սահմանած հորիզոնական և ուղղահայաց գծերի  միջոցով։ Այդ գծերը համարակալվում են։ Հնարավոր է համարակալված գծերին անվանումներ սահմանել և համարների  փոխարեն օգտագործել անվանումները։ Մեկ գծին հնարավոր է մեկից ավելի անվանում սահմանել՝ իրարից պրոբելներով առանձնացված։

Օրինակ՝
grid-template-rows: [start  header-start] 100px [content-start header-end] 1fr [lastline] ՝ առաջին հորիզոնական գծի անվանումը՝ [start header-start], տողի բարձրությունը՝ 100px․ հաջորդ հորիզոնական գծի անվանումը՝ [content-start header-end], տողի բարձրությունը՝ 1fr․ վերջին հորիզոնական գծի անվանումը՝ [lastline]։

 

չափմանՄիավորովԱրժեք –արժեքը չափման միավորներից մեկով: %-ի դեպքում չափը հաշվարկվում է ըստ grid-կոնտեյների չափի։ Եթե այն ֆիքսված չէ և որոշվում է իր ուղիների չափերի միջոցով, այդ դեպքում տոկոսը մշակվում է auto արժեքի պես։

flex-տեսակիՉափմանՄիավոր – « fr » չափման միավորը ընդունում է միայն դրական  արժեք։ Ամեն ուղի, որը սահմանված է fr-ով, զբաղեցնում է grid-կոնտեյների ազատ տարածությունը ըստ իր գործակցի՝ իր համար նշված թվով։ 

Օրինակ՝  grid-template-rows:  1fr, 2fr, 1fr ՝ կոնտեյների ազատ տարածությունը՝ բարձրությունը կբաժանվի չորս մասի և  ամեն տողին կհատկացվի այնքան մաս, որքան նշված է  արժեքում։ Եթե կոնտեյները չունի ֆիքսված չափ, ապա տողերի(հորիզոնական ուղիների) չափը՝ բարձրությունը, ճկուն  կդառնա՝ կփոփոխվի ըստ բրաուզերի պատուհանի չափի։

 

min-content –արկղի բարձրությունը որոշվում է իր պարունակության ամենափոքր էլեմենտով։

max-content –արկղի բարձրությունը որոշվում է իր պարունակության ամենամեծ էլեմենտով։

minmax() – օրինակ՝ minmax(100px, 300px)՝ արկղի մինիմալ բարձրությունը՝ 100px, մաքսիմալը՝ 300px։ ֆունկցիայի առաջին  արժեքը չի կարող սահմանվել fr չափման միավորով։

auto – տվյալ արկղի բարձրությունը կվորոշվի դրա պարունակության չափով։ Համապատասխանում է minmax(min-content, max-content) արժեքներով ֆունկցիային։

 

fit-content() –  արժեքը չափման միավորներից մեկով։ Համապատասխանում է min(max-content, max(auto, հստակՉափ)) արժեքներով ֆունկցիային։

Օրինակ՝ fit-content(300px) կամ՝ min(max-content, max(auto, 300px)) –նախ max(auto, 300px)-ի մեջ կընտրի դրանցից մեծագույնը։

Այստեղ auto-ն կհամապատասխանի min-content-ին(բայց ոչ բոլոր դեպքերում), իսկ 300px-ը մեր կողմից սահմանած հստակ բարձրություն է։

Եթե այդ  երկուսից մեծագույնը 300px-ն է, հաջորդ փուլում ընտրություն կկատարի max-content-ի և 300px-ի միջև, որոնցից կնտրի փոքրագույնը։ 

Եթե արկղի մեծագույն էլեմենտը(max-contentը) ավելին  է, քան 300px-ը, ապա այն չի անցնի 300px-ի սահմանը։

				
					.grid {
  display: grid;
  border: 2px solid black;
  grid-template-columns: [first-line] 300px [line-2] 100px 
                         [line-3] 100px [line-4] 100px 
                         [line-5] 100px [last-line] 100px;
  grid-template-rows: fit-content(300px) 100px 100px;
  height: 500px;
  width: 800px;
  background: orange;
}
.itemm {
  border: 2px solid black;
}
.item1 {
  font-size: 20px;
  background: lime;
  padding: 5px;
  writing-mode: vertical-lr;
}
.item2 {
  background: red;
  font-size: 20px;
}
				
			
				
					<body>
  <section class="grid">
    <div class="itemm item1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel velit
      ut tortor lobortis tempus vitae congue felis. Aenean․․․․․․․․․․․
    </div>
    <div class="itemm item2">item2</div>
    <div class="itemm item2">item3</div>
    ․
    ․
    ․
    <div class="itemm item2">item18</div>
  </section>
</body>

				
			

repeat() –սահմանում է` որքան տողեր լինեն և որքան պետք է լինի դրանց բարձրությունը։  

Օրինակ՝
grid-template-rows: 200px 200px 200px 200px -համապատասխանում է՝ grid-template-rows: repeat(4, 200px) :

Այլ  օրինակ՝
grid-template rows: 150px 200px 250px 300px 150px 200px 250px 300px – սա համապատասխանում է՝ grid-template-rows: repeat(8,  150px 200px 250px 300px):

 

Կա երկու հատուկ բառ՝ auto-fill  auto-fit․ սրանք հնարավոր է նշել  ֆունկցիայի առաջին արժեքում, որոնք  պատասխանատու են տողերի քանակի համար։

auto-fill  –օրինակ՝  grid-template-rows: repeat(auto-fill,  100px) –եթե grid կոնտեյների բարձրությունը հավասար է 550px-ի,  տողերի քանակը կլինի 5 -ը, քանի որ 550px  -ի մեջ կարող է 5 հատ 100px բարձրությամբ տող սամանվել։ Ուստի կսահմանվեն այնքան հորիզոնական ուղիներ, որքան կտեղավորի grid -կոնտեյները։

auto-fit -օրինակ` grid-template-rows: repeat(auto-fit,  100px) –եթե grid կոնտեյների բարձրությունը հավասար է 550px-ի, տողերի քանակը կլինի այնքան, որքան անհրաժեշտ է բոլոր grid-էլեմենտները տեղավորելու համար․ սրանով ավելորդ ուղիներ չեն սահմանվի։



Կան որոշակի սահմանափակումներ  repeat() ֆունկցիան օգտագործելու  համար՝

1.repeat() ֆունկցիայում չի սահմանվի այլ repeat()։

2.repeat() ֆունկցիայում երկրորդ արժեքը չի սահմանվի  fr  չափման միավորով, եթե առաջինը նշված է auto-fill կամ  auto-fit։

3.grid-template-rows -ի մեջ repeat() -ը երկու անգամ չի սահմանվի, եթե երկուսի համար էլ առաջին արժեքը նշված է auto-fill կամ auto-fit։

				
					.grid {
  display: grid;
  border: 2px solid black;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(auto-fill, 150px);
  height: 600px;
  width: 1000px;
  background: orange;
}
.itemm {
  border: 2px solid black;
  background: red;
  font-size: 20px;
}
				
			
				
					<body>
  <section class="grid">
    <div class="itemm">item1</div>
    <div class="itemm">item2</div>
    <div class="itemm">item3</div>
    ․ 
    ․ 
    ․
    <div class="itemm item2">item10</div>
  </section>
</body>

				
			

grid-կոնտեյներն ունի 5 ուղղահայաց  և 4 հորիզոնական ուղիներ, որոնք միասին 20 արկղ են՝  չնայած նրա, որ կա ընդամենը 10 grid-էլեմենտ։ 

Մնացած 10 դատարկ արկղները՝ երկու հորիզոնական ուղիները պատրաստվել են, քանի որ repeat() ֆունկցիայում նշված է auto-fill արժեքը։

Կապույտ գծերն առանձին ներկված են, որպեսզի ավելի պատկերավոր դառնա այն հատվածը, որն ավելացվել է առանց անհրաժեշտության։

 

subgrid –  grid-կոնտեյներում հնարավոր է սահմանել այլ  grid-կոնտեյներ։ 

Դա կատարվում է  subgrid -ի միջոցով, որը հնարավորություն է տալիս ներսում գտնվող դուստր կոնտեյների համար օգտագործել ծնող կոնտեյներին սահմանած ուղիների գծերը։ 

Այսպիսով դուստր կոնտեյների էլեմենտները կունենան այն չափերը, ինչը սահմանված է ծնող կոնտեյների ուղիների համար։ 

Այս արժեքը  ներկայումս աջակցվում է միայն Firefox բրաուզերի կողմից։

				
					.grid {
  display: grid;
  border: 2px solid black;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  background: orange;
  width: 1200px;
  height: 600px;
  grid-gap: 20px;
}
.itemm {
  border: 2px solid black;
  background: white;
  font-size: 20px;
  grid-row: 1/-1;
}
.subgridd {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 3/-1;
  grid-gap: 20px;
  background: orange;
}
.subitem {
  border: 1px solid black;
  background: white;
}
				
			
				
					<body>
  <section class="grid">
    <div class="itemm">item1</div>
    <div class="itemm subgridd">
      <div class="subitem">item3</div>
      <div class="subitem">item4</div>
    </div>
    <div class="itemm">item5</div>
    <div class="itemm">item6</div>
  </section>
</body>

				
			

grid-row: 1/-1 –grid-էլեմենտների(itemm-ների) բարձրությունը պետք է սկսվի առաջին գծից և ավարտվի վերջին գծով( [5] նույնն է ինչ [-1]-ը ):

grid-row: 3/-1 –դուստր grid-կոնտեյների(subgridd-ի) բարձրությունը պետք է սկսվի երրորդ գծից և ավարտվի վերջին գծով( [5] նույնն է ինչ [-1]-ը )։

Այսպիսով երկրորդ grid-էլեմենտը դարձել է grid-կոնտեյներ և դրա grid-էլեմենտները դասավորվել են երրորդ գծից։

Դուստր և ծնող grid-կոնտեյներների գծերի համարները  տարբեր են։ Ծնող grid-կոնտեյների գծի համարը սկսվում է [ 1 ]-ով։ Դուստր grid -կոնտեյներինը նույնպես սկսվում է [ 1 ]-ով՝ չնայած նրա, որ  դրա սկզիբը ծնող grid-կոնտեյների երրորդ գծից է։ Այսպիսով ,  դուստր grid-կոնտեյների grid-էլեմենտի չափը կորոշվի՝ սկսած [ 1 ]-ից, ոչ թե [ 3 ]-ից։

Դուստր grid-կոնտեյներում հնարավոր չէ ավելացնել անհստակ ուղիներ։ Եթե ավելացվի grid-էլեմենտ, որի համար դուստր grid-կոնտեյներում ազատ տարածք չկա, այն կդիրքավորվի ծնող grid կոնտեյների grid-էլեմենտի վրա։

 

 

masonry –եթե grid-էլեմենտներն ունեն տարբեր բարձրություններ, ապա օգտագործելով grid-կոնտեյներ կունենանք հետևյալ պատկերը՝

				
					.grid {
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   grid-template-rows: repeat(auto-fill, minmax(120px, 1fr));
   background: orange;
   width: 600px;
 }
 .item {
   border: 2px solid black;
   background: red;
   font-size: 20px;
 }
				
			
				
					<body>
  <div class="grid">
    <div class="item" style="block-size: 2em;"></div>
    <div class="item" style="block-size: 3em;"></div>
    <div class="item" style="block-size: 1.6em;"></div>
    <div class="item" style="block-size: 4em;"></div>
    <div class="item" style="block-size: 2.2em;"></div>
    <div class="item" style="block-size: 3em;"></div>
    <div class="item" style="block-size: 4.5em;"></div>
    <div class="item" style="block-size: 1em;"></div>
    <div class="item" style="block-size: 3.5em;"></div>
    <div class="item" style="block-size: 2.8em;"></div>
  </div>
</body>
				
			

grid-էլեմենտները դասավորվել են ըստ հորիզոնական գծերի։ masonry(բառացի՝ պատշարություն, երբ քարերը դասավորում են իրար գլխի, կամ իրար կողքի հնարավորինս սեղմված) արժեքի իմաստը կայանում է` grid-էլեմենտները իրար տակ դասավորվեն հնարավորինս սեղմված։

masonry  արժեքի արդյունքը հետևյալն է՝

				
					.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
  background: orange;
  width: 600px;
}
.item {
  border: 2px solid black;
  background: red;
  font-size: 20px;
}
				
			
				
					<body>
  <div class="grid">
    <div class="item" style="block-size: 2em;"></div>
    <div class="item" style="block-size: 3em;"></div>
    <div class="item" style="block-size: 1.6em;"></div>
    <div class="item" style="block-size: 4em;"></div>
    <div class="item" style="block-size: 2.2em;"></div>
    <div class="item" style="block-size: 3em;"></div>
    <div class="item" style="block-size: 4.5em;"></div>
    <div class="item" style="block-size: 1em;"></div>
    <div class="item" style="block-size: 3.5em;"></div>
    <div class="item" style="block-size: 2.8em;"></div>
  </div>
</body>
				
			

Այս արժեքն աջակցվում է միայն Firefox Developer Edition  բրաուզերի կողմից, երբ ակտիվանում է layout.css.grid-template-masonry-value.enabled պարամետրը(Firefox Developer Edition -ի և տվյալ պարամետրի մասին մանրամասն կարող եք ծանոթանալ համացանցում)։ 

Այս արժեքը ներկայումս փորձնական է և չի աջակցվում բրաուզերների կողմից։  

Նման արդյունքի կարող ենք հասնել միայն Javascript -ի միջոցով։

grid-template-columns

grid-template-columns – սահմանում է grid-կոնտեյների սյունակները(ուղղահայաց ուղիները), որտեղ նշվում է ուղիների քանակը, չափը և դրանց անվանումները։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  none
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի կոնտեյների հետ։
Ենթարկվում է անիմացիայիՈրոշակի չափով

Արժեքներն են՝

none – սահմանում է` չի պատրաստվելու ցանցի հստակ ուղիներ․ դրանք առաջանալու են անուղղակի, որոնց չափը կսահմանվի grid-auto-columns-ի միջոցով։

[գծիԱնվանումը] –grid-կոնտեյները բաղկացած է հորիզոնական և ուղղահայաց ուղիներից, որոնք ստանում ենք կոնտեյներում սահմանած հորիզոնական և ուղղահայաց գծերի  միջոցով։ Այդ գծերը համարակալվում են։ Համարակալված գծերին հնարավոր է անվանումներ սահմանել և համարների  փոխարեն օգտագործել դրանք։ Մեկ գծին հնարավոր է մեկից ավելի անվանում սահմանել՝ իրարից պրոբելներով առանձնացված։ 

Օրինակ՝

grid-template-columns: [start  menu-start] 100px [content-start menu-end] 1fr [lastline]՝ առաջին ուղղահայաց գծի անվանումը՝ [start menu-start], տողի լայնությունը՝ 100px։ Հաջորդ ուղղահայաց գծի անվանումը՝ [content-start menu-end], տողի լայնությունը՝ 1fr։ Վերջին ուղղահայաց գծի անվանումը՝ [lastline]։

 

չափմանՄիավորովԱրժեք –արժեքը չափման միավորներից մեկով:  %-ի դեպքում չափը հաշվարկվում է ըստ grid-կոնտեյների չափի։ Եթե  դրա չափը ֆիքսված չէ և որոշվում է իր  ուղիների չափերով, տոկոսը մշակվում է  այնպես, ինչպես auto արժեքը։

flex-տեսակիՉափմանՄիավոր – « fr » չափման միավորը ընդունում է միայն դրական  արժեք։ Ամեն ուղին, որը սահմանված է fr-ով, զբաղեցնում է grid-կոնտեյների ազատ տարածությունը ըստ իր գործակցի՝ իր համար նշված թվով։ 

Օրինակ՝  grid-template-columns: 1fr, 2fr, 1fr –կոնտեյների ազատ տարածությունը` լայնությունը, կբաժանվի չորս մասի և  ամեն տողին կհատկացվի այնքան մաս, որքան նշված է  արժեքում։ Եթե կոնտեյները չունի ֆիքսված չափ, ապա  սյունակների(ուղղահայաց ուղիների) չափը՝ լայնությունը, ճկուն  կդառնա՝ կփոփոխվի ըստ բրաուզերի պատուհանի չափի։

 

min-content – տվյալ արկղի լայնությունը որոշվում է իր պարունակության ամենափոքր էլեմենտով։

max-content –  տվյալ արկղի լայնությունը որոշվում է իր պարունակության ամենամեծ էլեմենտով։

minmax() – օրինակ՝ minmax(100px, 300px) –արկղի մինիմալ լայնությունը՝ 100px, մաքսիմալ լայնությունը՝ 300px։ Ֆունկցիայի առաջին  արժեքը չի կարող սահմանվել fr չափման միավորով։

auto – տվյալ արկղի լայնությունը կվորոշվի դրա պարունակության չափով։ Սա համապատասխանում է minmax(min-content, max-content) արժեքներով ֆունկցիային։

 

 

fit-content() –  արժեքը չափման միավորներից մեկով։ 

Համապատասխանում է max(min-content, min(հստակՉափ, max-content)) արժեքներով ֆունկցիային։

Օրինակ՝  fit-content(500px) կամ՝ max(min-content, min(500px, max-content))  –նախ min(500px, max-content)-ի մեջ կընտրի դրանցից փոքրագույնը։ 

Այստեղ 500px-ը մեր կողմից սահմանած հստակ  լայնությունն է։ Եթե այդ  երկուսից փոքրագույնը  500px-ն է, հաջորդ փուլում ընտրություն կկատարի min-content-ի և 500px-ի միջև, որոնցից կնտրի մեծագույնը։ 

Եթե արկղի պարունակության  ամենափոքր էլեմենտը(min-content) ավելի փոքր է, քան 500px-ը, ապա արկղի լայնությունը չի անցնի 500px-ի սահմանը։

				
					.grid {
  display: grid;
  border: 2px solid black;
  grid-template-columns: fit-content(300px) 100px 100px 100px 100px 100px;
  grid-template-rows: [first-line] 200px [line-2] 150px [line-3] 150px;
  height: 500px;
  width: 800px;
  background: orange;
}
.itemm {
  border: 2px solid black;
}
.item1 {
  font-size: 20px;
  background: lime;
  padding: 5px;
}
.item2 {
  background: red;
  font-size: 20px;
}
				
			
				
					<body>
  <section class="grid">
    <div class="itemm item1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel velit
      ut tortor lobortis tempus vitae congue felis. Aenean․․․․․․․․․․․
    </div>
    <div class="itemm item2">item2</div>
    <div class="itemm item2">item3</div>
    ․ 
    ․ 
    ․
    <div class="itemm item2">item18</div>
  </section>
</body>

				
			

repeat() –սահմանում է սյունակների քանակը և լայնությունը։  

Օրինակ՝  grid-template-columns: 200px 200px 200px 200px համապատասխանում է՝   grid-template-columns: repeat(4, 200px) : 

Այլ  օրինակ՝  grid-template columns: 150px 200px 250px 300px 150px 200px 250px 300px – սա համապատասխանում է՝ grid-template-columns: repeat(8,  150px 200px 250px 300px):

 

Գոյություն ունի երկու հատուկ բառ՝ auto-fill  auto-fit, որոնք նշվում են ֆունկցիայի առաջին արժեքում և պատասխանատու են սյունակների քանակի համար։

auto-fill  – օրինակ՝  grid-template-columns: repeat(auto-fill,  100px) – եթե grid կոնտեյների լայնությունը հավասար է 550px-ի,  սյունակների քանակը կլինի 5-ը, քանի որ 550px լայնություն ունեցող grid-կոնտեյներում կզբաղեցվի 5 հատ 100px լայնությամբ սյունակ, այսինքն ուղղահայաց ուղիներ կսահմանվեն այնքան, որքան կտեղավորի grid -կոնտեյները։

auto-fit – օրինակ՝ grid-template-columns: repeat(auto-fit,  100px) – եթե grid կոնտեյների լայնությունը հավասար է 550px-ի, սյունակների քանակը կլինի այնքան, որքան անհրաժեշտ է բոլոր grid-էլեմենտների տեղավորման համար, այսինքն ավելորդ ուղիներ չեն սահմանվի։


Կան որոշակի սահմանափակումներ  repeat() ֆունկցիան օգտագործելու  համար՝

1. repeat() ֆունկցիայում չի սահմանվի այլ repeat()։

2. repeat() ֆունկցիայի երկրորդ արժեքը չի կարող սահմանվել  fr  չափման միավորով, եթե առաջին արժեքը նշված է auto-fill կամ  auto-fit։

3. grid-template-columns-ում երկու անգամ repeat() չի սահմանվի, եթե երկուսի համար էլ որպես առաջին արժեք նշված է auto-fill կամ auto-fit։

				
					.grid {
  display: grid;
  border: 2px solid black;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(5, 100px);
  grid-auto-flow: column;
  height: 500px;
  width: 800px;
  background: orange;
}
.itemm {
  border: 2px solid black;
  background: red;
  font-size: 20px;
}
				
			
				
					<body>
  <section class="grid">
    <div class="itemm">item1</div>
    <div class="itemm">item2</div>
    <div class="itemm">item3</div>
    ․ 
    ․ 
    ․
    <div class="itemm">item10</div>
  </section>
</body>

				
			

grid-կոնտեյներն ունի 4 ուղղահայաց և 5 հորիզոնական ուղիներ,  որոնք կկազմեն 20 արկղ՝ չնայած նրա, որ կա ընդամենը 10 grid-էլեմենտ։ 

Մնացած 10 դատարկ արկղները՝ երկու ուղղահայաց ուղիները, պատրաստվել են, քանի որ repeat() ֆունկցիայում նշված է auto-fill արժեքը։

Կապույտ գծերն առանձին ներկված են, որպեսզի ավելի պատկերավոր դառնա այն հատվածը, որն ավելացվել է առանց անհրաժեշտության։

 

subgrid –  grid-կոնտեյներում հնարավոր է սահմանել դուստր grid-կոնտեյներ։ 

Դա կատարվում է subgrid -ի միջոցով, որը հնարավորություն է տալիս ներսում գտնվող դուստր կոնտեյների համար օգտագործել ծնող կոնտեյներին սահմանած ուղիների գծերը։ 

Այսպիսով դուստր կոնտեյների էլեմենտները կունենան այն չափերը, ինչը սահմանված է ծնող կոնտեյների ուղիների համար։  

Այս արժեքը  ներկայումս աջակցվում է միայն Firefox բրաուզերի կողմից։

				
					.grid {
  display: grid;
  border: 2px solid black;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  background: orange;
  width: 500px;
  height: 800px;
}
.itemm {
  border: 2px solid black;
  background: white;
  font-size: 20px;
  grid-column: 1/-1;
}
.subgridd {
  display: grid;
  grid-template-column: subgrid;
  grid-row: 3/-1;
  grid-gap: 20px;
  background: orange;
}
.subitem {
  border: 1px solid black;
  background: white;
}
				
			
				
					<body>
  <section class="grid">
    <div class="itemm">item1</div>
    <div class="itemm subgridd">
      <div class="subitem">item3</div>
      <div class="subitem">item4</div>
    </div>
    <div class="itemm">item5</div>
    <div class="itemm">item6</div>
  </section>
</body>
				
			

grid-column: 1/-1 –grid-էլեմենտների(itemm-ների) լայնությունը պետք է սկսվի առաջին գծից և ավարտվի վերջին գծով( [5] նույնն է ինչ [-1]-ը )։

grid-column: 3/-1 –դուստր grid-կոնտեյների(subgridd-ի) լայնությունը պետք է սկսվի երրորդ գծից և ավարտվի վերջին գծով( [5] նույնն է ինչ [-1]-ը )։

Այսպիսով երկրորդ grid-էլեմենտը դարձել է grid-կոնտեյներ և դրա grid-էլեմենտները դասավորվել են երրորդ գծից։

 

Դուստր և ծնող  grid-կոնտեյներների գծերի համարները  տարբեր են։ Ծնողի գծի համարը սկսվում է [ 1 ]-ով։  Դուստրինը նույնպես սկսվում է [ 1 ]-ով՝ չնայած նրա, որ  դրա սկզիբը ծնող grid-կոնտեյների երրորդ գծից է։

Այսպիսով ,  եթե անհրաժեշտ է դուստր grid-կոնտեյների grid-էլեմենտի համար չափ որոշել, այն կսկսվի [ 1 ]-ից և ոչ թե [ 3 ]-ից։

Դուստր grid-կոնտեյներում հնարավոր չէ ավելացնել անհստակ ուղիներ։ Եթե ավելացվի grid-էլեմենտ, որի համար դուստր grid-կոնտեյներում ազատ տարածք չկա, ապա այն կդիրքավորվի ծնող grid-կոնտեյների grid-էլեմենտի վրա։

 

 

masonry –  եթե grid-էլեմենտներն ունեն տարբեր լայնություններ, ապա օգտագործելով grid-կոնտեյներ կունենանք հետևյալ պատկերը՝

				
					.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(120px, 1fr));
  background: orange;
  width: 600px;
  height: 500px;
}
.item {
  border: 2px solid black;
  background: red;
  font-size: 20px;
  writing-mode: vertical-lr;
}
				
			
				
					<body>
  <div class="grid">
    <div class="item" style="block-size: 2em;"></div>
    <div class="item" style="block-size: 3em;"></div>
    <div class="item" style="block-size: 1.6em;"></div>
    <div class="item" style="block-size: 4em;"></div>
    <div class="item" style="block-size: 2.2em;"></div>
    <div class="item" style="block-size: 3em;"></div>
    <div class="item" style="block-size: 4.5em;"></div>
    <div class="item" style="block-size: 1em;"></div>
    <div class="item" style="block-size: 3.5em;"></div>
    <div class="item" style="block-size: 2.8em;"></div>
  </div>
</body>
				
			

grid-էլեմենտները դասավորվել են ըստ ուղղահայաց գծերի։ 

masonry(բառացի՝ պատշարություն, երբ քարերը դասավորում են իրար գլխի, կամ կողքի հնարավորինս սեղմված) արժեքի իմաստը՝ grid-էլեմենտները իրար կողքի դասավորվեն հնարավորինս սեղմված։

masonry  արժեքի արդյունքը հետևյալն է՝

				
					.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: masonry;
  grid-template-rows: repeat(auto-fill, minmax(120px, 1fr));
  background: orange;
  width: 600px;
}
.item {
  border: 2px solid black;
  background: red;
  font-size: 20px;
  writing-mode: vertical-lr;
}
				
			
				
					<body>
  <div class="grid">
    <div class="item" style="block-size: 2em;"></div>
    <div class="item" style="block-size: 3em;"></div>
    <div class="item" style="block-size: 1.6em;"></div>
    <div class="item" style="block-size: 4em;"></div>
    <div class="item" style="block-size: 2.2em;"></div>
    <div class="item" style="block-size: 3em;"></div>
    <div class="item" style="block-size: 4.5em;"></div>
    <div class="item" style="block-size: 1em;"></div>
    <div class="item" style="block-size: 3.5em;"></div>
    <div class="item" style="block-size: 2.8em;"></div>
  </div>
</body>
				
			

Այս արժեքն աջակցվում է միայն Firefox Developer Edition  բրաուզերի կողմից, երբ ակտիվանում է layout.css.grid-template-masonry-value.enabled պարամետրը(Firefox Developer Edition -ի և տվյալ պարամետրի մասին մանրամասն կարող եք ծանոթանալ համացանցում)։ 

Այս արժեքը ներկայումս փորձնական է և չի աջակցվում բրաուզերների կողմից։ 

Նման արդյունքի կարող ենք հասնել միայն Javascript -ի միջոցով։

grid-template-areas grid-area

grid-կոնտեյներում  որոշակի տարածքի համար(որևէ արկղի, կամ մի քանի արկղներ միասին վերցրած) սահմանում է անվանում։ 

Սահմանված տարածքը պետք է ուղղանկյունաձև լինի՝ ուղղահայաց կամ հորիզոնական, այսինքն չի կարող լինել T-աձև կամ այլ տեսքով։

grid-area-ն նշվում է grid-էլեմենտում և դրան սահմանվում է grid-template-areas-ում նշված անվանումը։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  grid-template-areas: none
grid-area: auto (քանի որ կարող ենք որպես արժեք սահմանել  grid-row/column-start/end հատկությունները)
Ժառանգվում ենՈչ
Կիրառվում ենgrid-template-areas -ի դեպքում grid տեսակի կոնտեյների հետ։
grid-area – ի դեպքում grid տեսակի էլեմենտի հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքներն են՝

none –սահմանում է, որ grid-կոնտեյներում չկա սահմանված անվանատարածք։

որևէԱնվանում grid-template-areas -ի դեպքում grid-կոնտեյներում որոշակի տարածքի սահմանում է անվանում։  grid-area -ի դեպքում տարածքի անվանումը սահմանվում է էլեմենտին։

				
					.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "headerr headerr"
                       "sidebarr mainn";
  background: orange;
  width: 600px;
  height: 500px
}
.item {
  border: 2px solid black;
  background: red;
  font-size: 20px;
}
.item1 {
  grid-area: headerr;
}
.item2 {
  grid-area: sidebarr;
}
.item3 {
  grid-area: mainn;
}
				
			
				
					<body>
  <div class="grid">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
  </div>
</body>
				
			

grid-template-areas հատկության մեջ սահմանվել է՝ կոնտեյները պետք է ունենա երկու հորիզոնական և երկու ուղղահայաց ուղիներ։ 

Կան չակերտներով առանձնացված երկու զույգ բառեր՝ երկու հորիզոնական և երկու ուղղահայաց ուղիներ, որոնցից յուրաքանչյուրն ունի երկուական արկղ։

Չակերտներով առանձնացված յուրաքանչյուր մաս  նոր տողի սահմանում է։

Չակերտներում  յուրաքանչյուր բառ ներկայացնում է մեկ արկղ։ Այսպիսով սահմանված է՝ առաջին հորիզոնական ուղու մեջ grid-էլեմենտը պետք է զբաղեցնի երկու արկղ, քանի որ արկղների անվանումները նույնն են(“headerr headerr”)։ Երկրորդ հորիզոնական ուղղու մեջ պետք է լինի երկու grid-էլեմենտ, որոնցից յույաքանչյուրը կզբաղեցնի մեկ արկղ(“sidebar mainn”)։

Որպեսզի grid-էլեմենտները զբաղեցնեն իրենց համար սահմանած տարածքները, յուրաքանչյուր էլեմենտում կօգտագործվի grid-area հատկությունը, որում կնշվի տարածքի անվանումը, որը վերաբերելու է իրեն։

Ուղիներին հստակ չափ կսահմանվի grid-template-rows և grid-template-columns հատկությունների միջոցով։

				
					.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "headerr headerr"
                       "sidebarr mainn";
  grid-template-columns: 1fr 2fr;
  background: orange;
  width: 600px;
  height: 500px
   }
				
			

Որպեսզի արկղերը վերցվի մեկ տարածքի մեջ, դրանց սահմանվում է նույն անվանումը՝

				
					.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "headerr headerr mainn"
                       "headerr headerr mainn";
  background: orange;
  width: 600px;
  height: 500px
}
.item {
  border: 2px solid black;
  background: pink;
  font-size: 20px;
}
.item1 {
  grid-area: headerr;
}
.item2 {
  grid-area: mainn;
}
				
			

Սահմանված տարածքները պետք է լինեն ուղղանկյունաձև։ Այսպիսով դրանք չեն կարող սահմանվել հետևյալ կերպ՝

				
					.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "headerr headerr mainn"
                       "headerr mainn   mainn";
  background: orange;
  width: 600px;
  height: 500px
   }
				
			

Որևէ արկղ դատարկ թողնելու համար անվանմնան փոխարեն կօգտագործվի կետ(կամ կետեր):

				
					.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "headerr  headerr headerr"
                       "sidebarr mainn   mainn"
                       ".        footerr footerr";
  background: orange;
  width: 600px;
  height: 500px
}
.item {
  border: 2px solid black;
  background: pink;
  font-size: 20px;
}
.item1 {
  grid-area: headerr;
}
.item2 {
  grid-area: sidebarr;
}
.item3 {
  grid-area: mainn;
}
.item4 {
  grid-area: footerr;
}
				
			

Տողերի մեջ անվանումների քանակը պետք է հավասար լինի։ Այսինքն չի կարող լինել հետևյալը՝

				
					.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:   "headerr   headerr  headerr"
                         "sidebarr  mainn    mainn"
                         "footerr   footerr" ;
  background: orange;
  width: 600px;
  height: 500px
   }
				
			

Անվանման սկզբում հնարավոր չէ թիվ օգտագործել, բայց կարող է նշվել թվի կոդը։ 

Օրինակ՝
grid-template-areas: “1rst second third” ;  – այս օրինակը սխալ է։ 

Դրա փոխարեն առաջին անվանումը կսահմանվի հետևյալ կերպ՝
grid-template-areas: \31rst second third”;


Տարածքի անվանումը հնարավոր է նշել նաև գծերի անվանումների միջոցով, բայց դրանք պետք է վերջանան start և end բառերով․

				
					.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [headerr-start] 400px [headerr-end] 1fr;
  grid-template-rows:    [headerr-start] 200px [headerr-end] 1fr;
  background: orange;
  width: 600px;
  height: 500px
}
.item {
  border: 2px solid black;
  background: pink;
  font-size: 20px;
}
.item1 {
  grid-area: headerr;
}
.item2 {    /*երկրորդ արկղը չի դիրքավորվել ըստ անվանումների, 
            այլ՝ սովորականի պես*/
  background: red;
}
				
			

grid-area-ն կարող է ընդունել նաև grid-row-start,  grid-column-start,  grid-row-end և grid-column-end հատկությունները։ Հերթականությունը նույնն է ինչպես նշվեց քիչ առաջ։

				
					.item {
      grid-area:  1 /  col-4  /  row-4  /  6;
    }
				
			

grid-auto-rows grid-auto-columns

grid-auto-rows  grid-auto-columns – սահմանում է անհստակ հորիզոնական(rows) և ուղղահայաց(columns) ուղիների չափը։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  auto
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի կոնտեյների հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքներն են՝

չափմանՄիավորով – արժեքը չափման միավորներից մեկով: %-ի դեպքում չափը հաշվարկվում է ըստ բլոկ տեսակի էլեմենտի չափի՝ նրա, որում գտնվում է grid-կոնտեյները։ Եթե  բլոկի չափը ֆիքսված չէ, տոկոսը մշակվում է auto արժեքի պես։

flex-տեսակիՉափմանՄիավոր – « fr » չափման միավորը ընդունում է դրական  արժեք։ Ամեն անհստակ ուղի, որը սահմանված է fr-ով, զբաղեցնում է բլոկ տեսակի էլեմենտի ազատ տարածությունը ըստ իր գործակցի՝ իր համար նշված թվով։ 

Օրինակ՝  grid-auto-rows: 1fr, 2fr, 1fr – բլոկի ազատ տարածությունը կբաժանվի չորս մասի և  ամեն տողին կհատկացվի այնքան մաս, որքան նշված է  արժեքում։ Եթե բլոկը չունի ֆիքսված չափ, ապա  տողերի(հորիզոնական ուղիների) կամ սյունակների(ուղղահայաց ուղիների) չափը՝ բարձրությունը կամ լայնությունը կդառնա ճկուն՝ կփոփոխվի ըստ բրաուզերի պատուհանի չափի։

 

min-content – տվյալ արկղի բարձրությունը կամ լայնությունը որոշվում է իր պարունակության ամենափոքր էլեմենտով։

max-content –  տվյալ արկղի բարձրությունը կամ լայնությունը որոշվում է իր պարունակության ամենամեծ էլեմենտով։

minmax() – օրինակ՝ minmax(100px, 300px), – արկղի մինիմալ բարձրությունը կամ լայնությունը պետք է լինի 100px, մաքսիմալ  բարձրությունը, կամ լայնությունը՝ 300px։ ֆունկցիայի առաջին  արժեքը չի կարող սահմանվել fr չափման միավորով։

auto – տվյալ արկղի բարձրությունը կամ լայնությունը կվորոշվի դրա պարունակության չափով։ Սա համապատասխանում է minmax(min-content, max-content) արժեքներով ֆունկցիային։

fit-content() –արժեքը չափման միավորներից մեկով։ 

Համապատասխանում է min(max-content, max(auto, հստակՉափ)) արժեքներով ֆունկցիային։ 

Օրինակ՝  min(max-content, max(auto,300px)) – նախ max(auto, 300px)-ի մեջ կընտրի դրանցից մեծագույնը, որտեղ auto-ն կհամապատասխանի min-content-ին(բայց ոչ բոլոր դեպքերում), իսկ 300px-ը մեր կողմից սահմանած հստակ բարձրություն է, կամ լայնություն։ 

Եթե այդ երկուսից մեծագույնը 300px-ն է, հաջորդ փուլում արդեն ընտրություն կկատարի max-content-ի և 300px-ի միջև, որոնցից կնտրի փոքրագույնը։ Եթե արկղի ամենամեծ էլեմենտի բարձրությունը(max-content-ը)  կամ լայնությունը(max-content-ը) ավելին  է, քան 300px-ը, ապա արկղը չի անցնի 300px-ի սահմանը։

 

Եթե grid-էլեմենտներն ավելին են, քան ցանցին սահմանված արկղերի քանակը, կամ եթե grid-էլեմենտը grid-կոնտեյների սահմաններից դուրս է, ապա կոնտեյները ցանցում ավտոմատ պատրաստում  է ուղիներ՝  ցանցում ավելացնելով գծեր։

				
					.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 70px 70px;
  grid-gap: 20px;
  max-width: 800px;
}
.item1 {
  grid-column-start: -1;
}
.item2 {
  grid-row-start: 4;
}
				
			
				
					<body>
  <section class="grid">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
  </section>
</body>
				
			

Առաջին էլեմենտի համար նշված է՝ grid-column-start: -1՝ grid-էլեմենտի լայնության(column) սկզիբը սկսվելու է [ -1 ] գծից(նույնն է ինչ [ 5 ]-ը)։  Բարձրությունը և լայնությունը կվորոշվի ավտոմատ։

Երկրորդ էլեմենտի համար՝  grid-row-start: 4՝ grid-էլեմենտի բարձրության(row) սկզիբը սկսվելու է [ 4 ]-րդ գծից։  

grid-կոնտեյների հորիզոնական գծերը երեքն են, իսկ որպես արժեք նշված է 4։ Սա կնշանակի՝ կոնտեյներից դուրս կավելացվի ևս երկու գիծ երկրորդ էլեմենտը տեղավորելու համար։ Բարձրությունը և լայնությունը կվորոշվի ավտոմատ։

Երկու էլեմենտներն էլ grid-կոնտեյներից դուրս են, ուստի չունեն ֆիքսված չափեր, ուստի դրանց ցանցը կկոչվի անհստակ ցանց։

Կոնտեյներից դուրս գտնվող անհստակ ուղիների չափերը կարող են հսկվել grid-auto-rows և grid-auto-columns հատկությունների միջոցով։

				
					.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 70px 70px;
  grid-gap: 20px;
  grid-auto-columns: 200px;
  grid-auto-rows: 60px;
  max-width: 800px;
}
.item1 {
  grid-column-start: -1;
}
.item2) {
  grid-row-start: 4;
}
				
			
				
					<body>
  <section class="grid">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
  </section>
</body>
				
			

Ցանցից դուրս բոլոր անհստակ ուղիները միշտ կունենան 200px լայնություն և 60px բարձրություն, անկախ նրանից grid-կոնտեյների ուղիների չափը  համապատասխանում է անհստակ ուղիների չափին, թե ոչ։

Առաջին էլեմենտի լայնությունը 200px է, իսկ բարձրությունը համապատասխանում է grid կոնտեյների էլեմենտների բարձրությանը։

Երկրորդ էլեմենտի բարձրությունը 60px է, իսկ լայնությունը համապատասխանում է grid կոնտեյների էլեմենտների լայնությանը։

grid-auto-flow

grid-auto-flow –երբ grid-կոնտեյների արկղներում grid-էլեմենտներ է տեղադրվում, դրանք դասավորվում են իրար կողքի՝ ձախից աջ և հորիզոնական բոլոր արկղերը զբաղեցնելուց հետո են անցնում հաջորդ տող։ 

Այս հատկության միջոցով հնարավոր է էլեմենտները դասավորել իրար տակ՝ վերևից ներքև և ուղղահայաց բոլոր արկղները զբաղեցնելուց հետո նոր կանցնեն հաջորդ սյունակ։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  row
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի կոնտեյների հետ։
Ենթարկվում է անիմացիայիԱյո

Արժեքներն են՝

row – երբ grid-կոնտեյների արկղներում grid-էլեմենտներ են տեղադրվում, դրանք դասավորվում են իրար կողքի՝ ձախից աջ և հորիզոնական բոլոր արկղները զբաղեցնելուց հետո են անցնում հաջորդ տող։

column – երբ grid-կոնտեյների արկղներում grid-էլեմենտներ են տեղադրվում, դրանք դասավորվում են իրար տակ՝ վերևից ներքև և ուղղահայաց բոլոր արկղները զբաղեցնելուց հետո են անցնում հաջորդ սյունակ։

row dense  կամ  column dense – սահմանում է, որ դատարկ թողնված արկղները նույնպես պիտի զբաղեցվեն։

column-ի դեպքում՝

				
					#myid {
   display: grid;
   background: #CCCCCC;
   border: 3px solid lime;
   grid-auto-flow: column;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
 }
 #myid>div {
   background-image: linear-gradient(135deg, #35c34d, #313131);
   font-size: 30px;
 }
 #myid>div:nth-of-type(1) {
   background-image: linear-gradient(135deg, #ff0000, #353535);
   grid-row-start: 2;
 }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <title>HAYTI</title>
  </head>
  <body>
    <div id="myid">
      <div>column1</div>
      <div>column2</div>
      <div>column3</div>
      <div>column4</div>
      <div>column5</div>
      <div>column6</div>
      <div>column7</div>
      <div>column8</div>
      <div>column9</div>
    </div>
  </body>
</html>

				
			

Քանի որ առաջին էլեմենտը պետք է դիրքավորվի երկրորդ տողում(grid-row-start: 2;), մնացած էլեմենտները կշարունակվեն դրանից հետո: Արդյունքում առաջին արկղը դատարկ կմնա, ուստի վերջին էլեմենտը դուրս է եկել grid կոնտեյների սահմաններից և դիրքավորվել անհստակ տարածքում։



column dense -ի դեպքում արդյունքը հետևյալն է՝

				
					#myid {
  display: grid;
  background: #CCCCCC;
  border: 3px solid lime;
  grid-auto-flow:  column dense;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
    }
				
			

Առաջին էլեմենտը  դիրքավորվել է երկրորդ տողում(grid-row-start: 2;)․ մնացած էլեմենտները կշարունակվեն դրանից հետո: Արդյունքում առաջին արկղը պետք է դատարկ մնար, բայց column dense -ի շնորհիվ այն նույնպես զբաղեցվել է։

row-gap( կամ grid-row-gap) column-gap( կամ grid-column-gap) grid-gap gap

grid-կոնտեյներում սահմանում է արկղների միջև ընկած հեռավորությունը՝ հորիզոնական(row-gap) և ուղղահայաց(column-gap) ուղղություններով, կամ երկուսը միասին(grid-gap կամ gap): 

grid-gap-ի դեպքում, եթե նշված է մեկ արժեք, այն կվերաբերի երկու ուղղությանն էլ՝ նախ սյունակներին, հետո տողերին։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  normal
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի կոնտեյների համար կարող է կիրառվել երկուսն էլ՝ grid-ով և առանց grid- մասնիկի։
Ենթարկվում է անիմացիայիԱյո

Արժեքներն են՝

normal –սահմանվում է բրաուզերի կողմից կանխադրված չափը՝ 1em:

չափմանՄիավորովԱրժեք –արժեքը չափման միավորներից մեկով։

				
					.grid {
  display: grid;
  grid-gap: 10px 10px;
  grid-template-columns: repeat(3, 193px);
  grid-template-rows: repeat(4, 100px);
  background: orange;
  width: 600px;
  height: 430px;
}
.item {
  border: 2px solid black;
  background: red;
  font-size: 20px;
}
				
			

grid

grid –ունիվերսալ հատկություն է, որն ընդունում է արժեքների տարբեր խմբեր՝

grid-template rows / grid-template-columns

grid-template-areas

grid-template rows / auto-flow grid-auto-columns

auto flow grid-auto-rows / grid-template-columns

 

Արժեքներն են՝

none – grid-ում նշված բոլոր հատկություններին սահմանում է իրենց նախնական արժեքը։

 

grid-template-rows / grid-template-columns -ի  դեպքում՝

				
					.container {
   grid:  100px 300px / 3fr 1fr;
 }
				
			

Նույնն է ինչ՝

				
					  .container {
    grid-template-rows: 100px 300px;
    grid-template-columns: 3fr 1fr;
  }
				
			

Այն արժեքները, որոնք նշված չեն, սահմանվում են դրանց կանխադրված արժեքները։

grid-template-rows  / auto-flow  grid-auto-columns  – երբ աջ կողմում սահմանված է նաև auto-flow-ն, ապա grid-template-columns-ի փոխարեն կօգտագործվի grid-auto-columns-ը, իսկ grid-auto-flow -ի արժեքը հավասար կլինի column -ի։

				
					  .container {
    grid: 100px 300px / auto-flow 200px;
  }
				
			

Նույնն է ինչ՝

				
					  .container {
    grid-template-rows: 100px 300px;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
  }
				
			

կամ՝

				
					  .container {
    grid: 100px 300px / auto-flow dense 200px;
  }
				
			

նույնն է ինչ՝

				
					  .container {
    grid-template-rows: 100px 300px;
    grid-auto-flow: column dense;
    grid-auto-columns: 200px;
  }
				
			

Այն արժեքները, որոնք նշված չեն, սահմանվում են դրանց կանխադրված արժեքները։

auto-flow  grid-auto-rows  / grid-template-columns  – երբ ձախ կողմում սահմանված է auto-flow-ն, ապա grid-template-rows-ի փոխարեն կօգտագործվի grid-auto-rows-ը։

				
					  .container {
    grid: auto-flow dense 200px / 200px 1fr;
  }
				
			

Նույնն է ինչ՝

				
					  .container {
    grid-auto-flow: row dense;
    grid-auto-rows: 200px;
    grid-template-columns: 200px 1fr;
  }
				
			

Այն արժեքները, որոնք նշված չեն, սահմանվում են դրանց կանխադրված արժեքները։

grid-template-areas  grid-template-rows  /  grid-template-columns – ի դեպքում՝

				
					.container {
   grid: [row1-start] "header header header" 1fr [row1-end]
         [row2-start] "footer footer footer" 25px [row2-end]
         / auto 50px auto;
 }
				
			

Նույնն է ինչ՝

				
					  .container {
    grid-template-areas:
      "header header header"
      "footer footer footer";
    grid-template-rows:
      [row1-start] 1fr [row1-end row2-start] 
      25px [row2-end];
    grid-template-columns: auto 50px auto;
  }
				
			

Այն արժեքները, որոնք նշված չեն, սահմանվում են դրանց կանխադրված արժեքները։

grid-template

grid-template –ունիվերսալ հատկություն է և ընդունում է երեք արժեք՝ grid-template-areas,  grid-template-rows,  grid-template-columns: 

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  none
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի կոնտեյների հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքներն են՝
none – բոլոր հատկությունների արժեքները սահմանում է none:


grid-template-rows / grid-template-columns –ի դեպքում՝

				
					.container {
   grid-template:   100px auto 200px / 1fr 70px auto ;
 }
				
			

grid-template-areas   grid-template-rows / grid-template-columns -ի դեպքում՝

				
					.container {
    grid-template:
            [row1-start] "header header header" 25px [row1-end]
            [row2-start] "footer footer footer" 25px [row2-end]
            / auto 50px auto;
  }
				
			

Նույնն է ինչ՝

				
					  .container {
    grid-template-rows:
      [row1-start] 25px [row1-end row2-start]
      25px [row2-end];
    grid-template-columns: auto 50px auto;
    grid-template-areas:
      "header header header"
      "footer footer footer";
  }
				
			

grid-row-start grid-row-end grid-row grid-column-start grid-column-end grid-cloumn

grid-կոնտեյներում սահմանում է grid-էլեմենտի վայրը և չափը՝ օգտագործելով grid-կոնտեյների գծերի համարները կամ անվանումները։

grid-row-start,   grid-row-end և grid-row  -ի միջոցով սահմանվում է էլեմենտի բարձրությունը՝ որտողից է սկսելու և որտողով է ավարտվելու, կամ երկուսը միասին(grid-row)։

grid-column-start,   grid-column-end և grid-column –ի միջոցով սահմանվում է էլեմենտի լայնությունը՝ որ սյունակից է սկսելու և որ սյունակով է ավարտվելու, կամ երկուսը միասին(grid-column)։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  auto
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի էլէմենտի հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքներն են՝

գծիԱնվանումըԿամՀամարը – կարող է սահմանվել գծի անվանմամբ կամ համարով։

span  համարը – էլեմենտը կզբաղեցնի նշված քանակի հորիզոնական կամ ուղղահայաց արկղ։

span  անվանումը – էլեմենտը կզբաղեցնի այնքան հորիզոնական կամ ուղղահայաց արկղեր, մինչև հասնի այն գծին որի անվանումը նշված է արժեքում։

auto – սահմանում է ավտոմատ տեղադրում, որը հավասար է մեկ արկղի չափի։

				
					.item {
   grid-column-start: 2;
   grid-column-end: col-5;
   grid-row-start: row-1;
   grid-row-end: 3;
 }
				
			
				
					  .item {
    grid-column-start: 1;
    grid-column-end: span col-4;
    grid-row-start: 2;
    grid-row-end: span 2;
  }
				
			

grid-row և grid-column – ի դեպքում կլինի՝

				
					  .item-c {
    grid-column: 3 / span 2;
    grid-row: row-3 / 4;
  }
				
			

Հնրավոր է էլեմենտները իրար վրա հայտնվեն։ 

Օգտագործելով  « z-index » հատկությունը,  կսահմանվի էլեմենտների իրար վրա ընկնելու հերթականությունը։

justify-content

justify-content – grid տեսակի կոնտեյներում(display: grid;) սահմանում է grid կոնտեյների պարունակության դիրքը հորիզոնական ուղղությամբ(grid կոնտեյների պարունակության դիրքն  ուղղահայաց որոշելու համար կօգտագործվի align-content հատկությունը)։

Այն նկատելու համար անհրաժեշտ է, որը grid կոնտեյները փոքր լինի իր ծնողի՝ բլոկ տեսակի էլեմենտի ընդհանուր չափերից։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  normal
Ժառանգվում ենՈչ
Կիրառվում ենgrid տեսակի կոնտեյների հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքներն են՝

Արժեքը Դիրքը Նկարագրությունը

start

Պարունակությունը դասավորվում է հերթականությամբ՝ ծնող էլեմենտի ձախ անկյունից։

center

Պարունակությունը դասավորվում է հերթականությամբ՝ ծնող էլեմենտի մեջտեղից։

end

Պարունակությունը դասավորվում է հերթականությամբ՝ ծնող էլեմենտի աջ անկյունից։

space-between

Պարունակությունը հավասար դասավորվում է ամբողջ տողի երկայնքով․ առաջին ու վերջին էլեմենտները դիրքավորվում են տողի ամենասկզբում և ամենավերջում։

space-around

Պարունակությունը հավասար դասավորվում է ամբողջ տողի երկայնքով։ Առաջին էլեմենտից առաջ և վերջին էլեմենտից հետո մնում են դատարկ տարածություն, որոնցից յուրաքանչյուրը հավասար է հարևան էլեմենտների միջև ընկած ազատ տարածության կեսին։

space-evenly

Պարունակությունը հավասար դասավորվում է ամբողջ տողի երկայնքով այնպես, որ հարևան էլեմենտների միջև, ինչպես նաև առաջին էլեմենտից առաջ և վերջին էլեմենտից հետո ընկած ազատ տարածությունը հավասար են իրար։

start և end  – պարունակությունը  դիրքավորվում է հորիզոնական ուղղությամբ։

Եթե direction: “ltr” -ի է հավասար, start-ի դեպքում պարունակությունը կդիրքավորվի ձախ անկյունում, իսկ end-ի՝ աջ անկյունում։  Եթե direction: “rtl” -ի է հավասարstart-ի դեպքում պարունակությունը կդիրքավորվի աջ անկյունում, իսկ end-ի՝ ձախ անկյունում։

left  և  right –պարունակությունը դիրքավորում է ձախ կամ աջ կողմում ՝ հաշվի չառնելով direction հատկության արժեքը։

normal –պարունակությունը դիրքավորվում է իր սովորական վայրում այնպես, կարծես չի սահմանվել justify-content հատկությունը։

stretch – եթե սյունակների լայնությունը(grid-template-columns) սահմանված է որպես auto և սյունակների ընդհանուր լայնությունը(այսինքն grid-կոնտեյների լայնությունը) փոքր է բլոկ էլեմենտի լայնությունից(այն էլեմենտը, որի մեջ է գտնվում grid-կոնտեյները), ապա grid-էլեմենտները հավասարաչափ կլայնանան ըստ grid կոնտեյների(ոչ ծնող էլեմենտի) ազատ տարածության։

				
					  #example {
    display: grid;
    grid-template-columns: repeat(4, 120px);
    grid-template-rows: repeat(1, 100px);
    justify-content: end;
    grid-gap: 10px;
    background-color: #ccc;
    border: 2px solid black;
    width: 780px;
    height: 430px;
  }
  .one {
    background-color: #38c700;
  }
  .two {
    background-color: #38c700;
  }
  .three {
    background-color: #38c700;
  }
  .four {
    background-color: #38c700;
  }
  .item {
    border: 2px solid black;
    font-size: 35px;
  }
				
			
				
					<body>
  <div id="example">
    <div class="one item">item1.</div>
    <div class="two item">item2.</div>
    <div class="three item">item3.</div>
    <div class="four item">item4.</div>
  </div>
</body>
				
			

justify-items

justify-items –սահմանում է grid-կոնտեյների յուրաքանչյուր էլեմենտի հորիզոնական դիրքը իրենց տարածքում։ 

Եթե justify-content-ի դեպքում սահմանումը վերաբերում է grid-կոնտեյների պարունակությանը, ապա justify-items –ը յուրաքանչյուր էլեմենտին առանձին է սահմանում,  որոնք դիրքավորվում են իրենց տարածքում հորիզոնական ուղղությամբ։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  legacy
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի կոնտեյների հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքներն են՝

start և end  – էլեմենտները դիրքավորվում են իրենց տարածքում հորիզոնական ուղղությամբ։

Եթե direction: “ltr” -ի է հավասար, start-ի դեպքում էլեմենտները կդիրքավորվեն իրենց տարածքի ձախ անկյուններում, իսկ end-ի դեպքում՝ աջ անկյուններում։  

Եթե direction: “rtl” -ի է հավասար, start-ի դեպքում էլեմենտները կդիրքավորվեն իրենց տարածքի աջ անկյուններում, իսկ end-ի դեպքում՝ ձախ անկյուններում։

				
					#example {
   display: grid;
   grid-template-columns: repeat(6, 120px);
   grid-template-rows: repeat(4, 100px);
   grid-template-areas: "a a a . . ."
                        "b b b b b ."
                        "c c . . . ."
                        "d d d d d d";
   grid-auto-flow: column;
   justify-items: end;
   direction: rtl;
   grid-gap: 10px;
   background-color: #ccc;
   border: 2px solid black;
   width: 770px;
   height: 430px;
 }
 .one {
   background-color: #38c700;
   grid-area: a;
 }
 .two {
   background-color: #38c700;
   grid-area: b;
 }
 .three {
   background-color: #38c700;
   grid-area: c;
 }
 .four {
   background-color: #38c700;
   grid-area: d;
 }
 .item {
   border: 2px solid black;
   font-size: 35px;
 }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="example">
      <div class="one item">item1.</div>
      <div class="two item">item2.</div>
      <div class="three item">item3.</div>
      <div class="four item">item4.</div>
    </div>
  </body>
</html>

				
			

self-start և self-end –  յուրաքանչյուր էլեմենտ դիրքավորում է ըստ direction հատկության։

				
					.
.
.
justify-items:  self-end;
.
.
.two {
  background-color: #38c700;
  grid-area: b;
  direction:  rtl;
  }
.
.
.
				
			

left  և  right –   յուրաքանչյուր էլեմենտ դիրքավորում է ձախ կամ աջ կողմում ՝ հաշվի չառնելով direction հատկության արժեքը։

safe  և unsafe – օրինակ՝ justify-items: safe center :  Եթե որևէ էլեմենտ այնքան մեծ է, որ  դուրս է գալիս grid կոնտեյներում իրեն սահմանած տարածքից, center արժեքի դեպքում՝ էլեմենտը իրեն սահմանած տարածքի  մեջտեղում կդիրքավորվի այնքան, քանի դեռ դուրս չի եկել դրա սահմաններից(safe-ի դեպքում), կամ էլեմենտը միշտ պետք է դիրքավորվի մեջտեղում՝ անկախ նրանից այն իրեն սահմանած տարածքից դուրս է, թե ոչ։ Այս երկուսը  ներկայումս չեն աջակցվում բրաուզրեների կողմից(բացի Firefox-ից)։

				
					  #exampleA {
    display: grid;
    grid-template-columns: repeat(4, 120px);
    grid-template-rows: repeat(1, 100px);
    grid-template-areas: "a a . .";
    direction: rtl;
    justify-items: unsafe center;
    grid-gap: 10px;
    background-color: #ccc;
    border: 2px solid black;
    width: 770px;
    height: 200px;
  }
  #exampleB {
    display: grid;
    grid-template-columns: repeat(4, 120px);
    grid-template-rows: repeat(1, 100px);
    grid-template-areas: "b b . .";
    direction: rtl;
    justify-items: safe center;
    grid-gap: 10px;
    background-color: #ccc;
    border: 2px solid black;
    width: 770px;
    height: 200px;
  }
  .one {
    background-color: #38c700;
    grid-area: a;
  }
  .two {
    background-color: #38c700;
    grid-area: b;
  }
  p {
    border: 2px solid black;
    font-size: 35px;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="exampleA">
      <div class="one"><p style="width: 280px">item1.</p></div>
    </div>

    <div id="exampleB">
      <div class="two"><p style="width: 280px">item1.</p></div>
    </div>
  </body>
</html>

				
			

auto – սահմանում է ծնող էլեմենտի justify-items -ի արժեքը։ Եթե այն ծնող էլեմենտ չունի, կամ position-ը  հավասար է absolute-ի, գործում է normal -ի պես։


normal –  տարբեր դեպքերում տարբեր կերպ է արձագանքում`

1. Եթե display-ը հավասար է block-ի, գործում է start -ի պես։

2. Եթե position-ը հավասար է absolute-ի, գործում է start -ի կամ stretch -ի պես:

3. Եթե display-ը հավասար է table-cell-ի, տվյալ justify-items հատկությունն անտեսվում է։

4. Եթե display-ը հավասար է flex-ի, տվյալ justify-items հատկությունն անտեսվում է։

5. Եթե display-ը հավասար է grid-ի, ապա գործում է stretch-ի կամ start-ի պես:

 

legacy –  օրինակ՝ justify-items: legacy left:  Տվյալ հատուկ բառի միջոցով(ուղղության հետ միասին)  արժեքը փոխանցվում է իր բլոկ տեսակի ժառանգներին։

legacy-ն սահմանվում է միայն left, right, center ուղղությունների հետ։

justify-self

justify-self –սահմանվում է grid-էլեմենտում՝ վերաբերում է միայն մեկ grid-էլեմենտի։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  auto
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի էլէմենտի հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքները նույնն են, ինչ justify-items-ինը՝ գումարած stretch-ը, այսինքն՝  auto, normal, start, end, self-start, self-end, center, left, right, stretch, safe, unsafe :

auto – սահմանում է ծնող էլեմենտի՝ grid-կոնտեյների justify-items-ի արժեքը։ Եթե այնտեղ սահմանված չի justify-items-ը, ապա auto-ն կդիտարկվի որպես normal:

 

normal –  տարբեր դեպքերում տարբեր կերպ է արձագանքում`

1. Եթե display-ը հավասար է block-ի, գործում է  start արժեքի պես։

2. Եթե position-ը հավասար է absolute-ի, գործում է start-ի կամ stretch-ի պես:

3. Եթե display-ը հավասար է table-cell-ի, ապա justify-self հատկությունն անտեսվում է։

4. Եթե display-ը հավասար է flex-ի, ապա justify-self հատկությունն անտեսվում է։

5. Եթե display-ը հավասար է grid-ի, գործում է stretch-ի կամ start-ի պես:

align-content

align-content – grid տեսակի կոնտեյներում(display: grid;) սահմանում է կոնտեյների պարունակության դիրքը ուղղահայաց(grid կոնտեյների պարունակության դիրքը հորիզոնական որոշելու համար կօգտագործվի justify-content հատկությունը)։

Այն նկատելու համար անհրաժեշտ է, որը grid կոնտեյները փոքր լինի իր ծնողի՝ բլոկ տեսակի էլեմենտի ընդհանուր չափերից։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  stretch
Ժառանգվում ենՈչ
Կիրառվում ենgrid տեսակի կոնտեյների հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքներն են՝

Արժեքը Դիրքը Նկարագրությունը

start

Պարունակությունը դասավորվում է հերթականությամբ՝ ծնող էլեմենտի վերևի ձախ անկյունից։

center

Պարունակությունը դասավորվում է հերթականությամբ՝ ծնող էլեմենտի մեջտեղից։

end

Պարունակությունը տեղափոխվում է ծնող էլեմենտի ամենաներքևը։

space-betweent

Պարունակությունը բաժանվում է երկու մասի և դասավորվում ծնող էլեմենտի ամենավերևում և ամենաներքևում։

space-around

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

space-evenly

Պարունակությունը բաժանվում է երկու մասի և դասավորվում ծնող էլեմենտում այնպես, որ առաջին տողի վերևը և վերջին տողի ներքևը մնում է դատարկ և իրար հավասար տարածություն, իսկ տողերի միջև ընկած դատարկ տարածությունը հավասար է դրանց։

stretch

Պարունակությունը հավասարաչափ ընդգրկում է grid կոնտեյների(ոչ ծնող էլեմենտի) ամբողջ բարձրությունը։

normal – կոնտեյների պարունակությունը դիրքավորվում է իր սովորական վայրում այնպես, կարծես չի սահմանվել align-content հատկությունը։

stretch – եթե տողերի բարձրությունը(grid-template-rows) սահմանված է որպես auto և տողերի ընդհանուր բարձրությունը(այսինքն grid-կոնտեյների բարձրությունը) փոքր է բլոկ էլեմենտի բարձրությունից(այն էլեմենտը, որի մեջ է գտնվում grid-կոնտեյները),  ապա grid կոնտեյների(ոչ բլոկ էլեմենտի) ազատ տարածությունը հավասարաչափ կբաժանվի grid-էլեմենտների միջև։

				
					  #example {
    display: grid;
    grid-template-columns: repeat(4, 120px);
    grid-template-rows: repeat(2, 100px);
    align-content: end;
    grid-gap: 10px;
    background-color: #ccc;
    border: 2px solid black;
    width: 750px;
    height: 430px;
  }
  .one {
    background-color: #38c700;
  }
  .two {
    background-color: #38c700;
  }
  .three {
    background-color: #38c700;
  }
  .four {
    background-color: #38c700;
  }
  .item {
    border: 2px solid black;
    font-size: 35px;
  }
				
			
				
					 <body>
  <div id="example">
    <div class="one item">item1.</div>
    <div class="two item">item2.</div>
    <div class="three item">item3.</div>
    <div class="four item">item4.</div>
    <div class="one item">item5.</div>
    <div class="two item">item6.</div>
    <div class="three item">item7.</div>
    <div class="four item">item8.</div>
  </div>
</body>
				
			

align-items

align-items – սահմանում է grid-կոնտեյների էլեմենտների յուրաքանչյուրի ուղղահայաց դիրքը իրենց տարածքներում։ 

Եթե  align-content-ի սահմանումը վերաբերում է  grid-կոնտեյների պարունակությանը, align-items –ը յուրաքանչյուր էլեմենտին առանձին է սահմանում,  որոնք դիրքավորվում են իրենց համար սահմանած տարածքում  ուղղահայաց ուղղությամբ։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  normal
Ժառանգվում ենՈչ
Կիրառվում ենgrid տեսակի կոնտեյների հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքներն են՝

Արժեքը Դիրքը Նկարագրությունը

start

grid էլեմենտները դասավորվում են grid կոնտեյների վերևի մասում։

center

grid էլեմենտներից յուրաքանչյուրը դիրքավորվում է grid կոնտեյների մեջտեղում ։

end

grid էլեմենտները դասավորվում են grid կոնտեյների ներքևի մասում։

stretch

grid էլեմենտները դասավորվում են՝ ընդգրկելով grid կոնտեյների ամբողջ բարձրությունը։

baseline
first-baseline
last-baseline

grid էլեմենտները դասավորվում են grid կոնտեյներում իրենցում նշված տեքստի առաջին տողի baseline -ին համապատասխան(Տես՝ vertical-align)։ Յուրաքանչյուր էլեմենտ դիրքավորվում է առաջին տողի baseline-ի(first baseline) կամ վերջին տողի baseline -ի(last baseline) ուղղությամբ։

normal –  տարբեր դեպքերում տարբեր կերպ է գործում`

1. Եթե display-ը հավասար է block-ի, ապա align-items հատկությունն անտեսվում է։

2. Եթե position-ը հավասար է absolute-ի, ապա գործում է start-ի կամ stretch-ի պես:

3. Եթե display-ը հավասար է table-cell-ի, ապա align-items հատկությունն անտեսվում է։

4. Եթե display-ը հավասար է flex-ի, ապա գործում է stretch-ի պես:

5. Եթե display-ը հավասար է grid-ի, ապա գործում է stretch-ի կամ start-ի պես:

				
					#example {
  display: grid;
  grid-template-columns: repeat(4, 120px);
  grid-template-rows: repeat(2, 100px);
  align-items: end;
  grid-gap: 10px;
  background-color: #ccc;
  border: 2px solid black;
  width: 750px;
  height: 430px;
}
.one {
  background-color: #38c700;
}
.two {
  background-color: #38c700;
}
.three {
  background-color: #38c700;
}
.four {
  background-color: #38c700;
}
.item {
  border: 2px solid black;
  font-size: 35px;
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="example">
      <div class="one item">item1.</div>
      <div class="two item">item2.</div>
      <div class="three item">item3.</div>
      <div class="four item">item4.</div>
      <div class="one item">item5.</div>
      <div class="two item">item6.</div>
      <div class="three item">item7.</div>
      <div class="four item">item8.</div>
    </div>
  </body>
</html>

				
			

Այլ օրինակ՝

				
					#example {
  display: grid;
  grid-template-columns: repeat(4, 180px);
  grid-template-rows: repeat(2, 210px);
  align-items: baseline;
  grid-gap: 10px;
  background-color: #ccc;
  border: 2px solid black;
  width: 750px;
  height: 430px;
}
.one {
  background-color: #38c700;
  font-size: 30px;
}
.two {
  background-color: #38c700;
  font-size: 50px;
}
.three {
  background-color: #38c700;
  font-size: 20px;
}
.four {
  background-color: #38c700;
  font-size: 60px;
}
.item {
  border: 2px solid black;
}
				
			
				
					<body>
  <div id="example">
      
    <div class="one item">
      item1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    
    <div class="two item">item2. Lorem ipsum dolor sit amet.</div>
    
    <div class="three item">
      item3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    
    <div class="four item">item4. Lorem ipsum dolor.</div>
    
  </div>
</body>

				
			

align-self

align-self – եթե align-content-ը և align-items-ը նախատեսված է grid-կոնտեյների համար, ապա align-self-ը սահմանվում է grid-էլեմենտում, այսինքն վերաբերում է միայն մեկ grid-էլեմենտի։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  auto
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի էլէմենտի հետ։
Ենթարկվում է անիմացիայիՈչ

Արժեքները նույնն են, ինչ align-items-ինը,  այսինքն՝   normal, start, end, center, baseline, stretch, auto:

auto – սահմանում է ծնողի՝ grid-կոնտեյների align-items-ի արժեքը։

 

normal –  տարբեր դեպքերում տարբեր կերպ է արձագանքում`

1. Եթե display-ը հավասար է block-ի, տվյալ align-self հատկությունն անտեսվում է ։
2. Եթե position-ը հավասար է absolute-ի, ապա գործում է start-ի կամ stretch-ի պես:
3. Եթե display-ը հավասար է table-cell-ի, ապա տվյալ align-self հատկությունն անտեսվում է։
4. Եթե display-ը հավասար է flex-ի, ապա գործում է stretch-ի պես։
5. Եթե display-ը հավասար է grid-ի, ապա գործում է stretch-ի կամ start-ի պես:

place-content place-items place-self

Սահմանում են երկու հատկության արժեք՝

place-content:  align-content    justify content ;

place-items:  align-items    justify items ;

place-self:  align-self    justify self ;

Մեկ արժեք նշելու դեպքում այն կվերաբերի երկու հատկություններին էլ (բացի stretch-ից):

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  place-content: normal
place-items`
align-items: normal;
justify-items: legacy;
place-self : auto:
Ժառանգվում ենՈչ
Կիրառվում ենԲլոկ, Flex, Grid տեսակի կոնտեյներների հետ։
Ենթարկվում է անիմացիայիՈչ

 

				
					.
.
grid-template-columns: repeat(4, 150px);
grid-template-rows: 110px;
place-content:   center   center ;
place-items:   center   center ;
.
.
				
			

align-tracks justify-tracks

align-tracks  justify-tracks  –սահմանում են masonry էլէմենտների դիրքը ուղղահայաց կամ հորիզոնական ուղղություններով։ 

Արժեքները հավասար են align-contents-ի  և justify-contents-ի արժեքներին։

Ներկայումս չի աջակցվում բրաուզերների կողմից։ 

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը  normal
Ժառանգվում ենՈչ
Կիրառվում ենGrid տեսակի կոնտեյների հետ, որն ունի masonry սյունակ կամ տող։
Ենթարկվում է անիմացիայիՈչ
				
					.grid {
  display: grid;
  block-size: 250px;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
  align-tracks: end, start, end, space-between;
}
				
			
				
					<body>
  <div class="grid">
    <div class="item" style="block-size: 2em;"></div>
    <div class="item" style="block-size: 3em;"></div>
    <div class="item" style="block-size: 1.6em;"></div>
    <div class="item" style="block-size: 4em;"></div>
    <div class="item" style="block-size: 3.2em;"></div>
    <div class="item" style="block-size: 3em;"></div>
    <div class="item" style="block-size: 4.5em;"></div>
    <div class="item" style="block-size: 1em;"></div>
    <div class="item" style="block-size: 3.5em;"></div>
    <div class="item" style="block-size: 2.8em;"></div>
  </div>
</body>
				
			

Թողնել մեկնաբանություն

Կիսվել փաստաթուղթով
ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ
hyArmenian