Docy

Css-ի ֆունկցիաները (Մաս-3)

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

Աջակցող ֆունկցիաներ

attr()

Ֆունկցիան օգտագործվում է  ատրիբուտի արժեքը ոճավորելու համար։

attr() – ֆունկցիայի սինտաքսը՝
attr(class string, ‘’myClass-01” )  

class – ատրիբուտի անվանումն է։

string  – ատրիբուտի տեսակն է՝  

string(տեքստ- օրինակ՝ attr(class string, “myclass01”)), 

color(գույն), url(վեբ հասցե), 

integer(ամբողջական թիվ – 1, 23, 142 և այլն), 

number(իրական թիվ –  -5, 6.7, 10e3 և այլն), 

angle(անկյուն), time(ժամանակ), deg(աստիճան)։

myClass-01 – ատրիբուտի արժեքն է։ Նշվում է, երբ անհրաժեշտ է ատրբուտին կանխադրված արժեք սահմանել։

Հիմնականում  փակագծերի մեջ նշվում է միայն ատրիբուտի անվանումը՝ attr(href) ;

				
					  .site::after {
    content: attr(href);
    font-size: 0.8em;
    background: orange;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p><a href="https://hayti.am" class="site">Մեր կայքը- </a></p>
  </body>
</html>

				
			

var()

var() –  սահմանում է փոփոխական։

Օրինակ՝  div  { –laynutyun: 100px; } – “–laynutyun” -ը փոփոխականի անվանումն է, “100px” -ը՝ դրա արժեքը։ Փոփոխականը որպես արժեք կօգտագործվի այնտեղ, որտեղ անհրաժեշտ է սահմանել “100px” -ը։

Եթե փոփոխականի հիմնական վայրում արժեքը փոխվի, ապա այն կփոխվի նաև բոլորի համար, որտեղ սահմանված է փոփոխականը։

Փոփոխականը այլ վայրում սահմանվում է var() ֆունկցիայի միջոցով՝

				
					  div {
    --laynutyun: 100px;
    width: var(--laynutyun);
    height: var(--laynutyun);
  }
				
			

 

Փոփոխականը հասանելի է միայն այն սելեկտորում, որտեղ այն սահմանված է։


Որպեսզի փոփոխականը  հասանելի դառնա ամբողջ ոճաթղթի համար, այն պետք է տեղադրել  :root պսևդոկլասում(որը հանդիսանում է <html> գլխավոր էլեմենտը)։

				
					  :root {
    --narnjaguyn: orange;
  }
  div {
    background: var(--narnjaguyn);
  }
  p {
    color: var(--narnjaguyn);
  }
  button {
    background-color: var(--narnjaguyn);
  }
				
			

Մեկ այլ օրինակ՝  

background-color: var(–narnjaguyn, red); –եթե փոփոխականի արժեքը անհասանելի է,  background-color – ին կսահմանվի կարմիր(red)։

@media կանոնը չի աջակցում փոփոխականների սահմանումը։ 

Արգելված է օգտագործել այն հատկությունների համար, որոնց արժեքները պետք է անփոփոխ մնան։ 

Հնարավոր չէ դրանք սահմանել որպես սելեկտոր։

env()

env() –   Ժամանակի ընթացքում սմարթֆոնները մեծ փոփոխության են ենթարկվել․ բոլոր տեսակի կոճակներն արդեն կառավարվում են էկրանց։ 

Օրինակ՝ Appple-ի Iphone X- ից սկսած, բոլոր սմարթֆոնները ամբողջական էկրան են, ուստի ծրագրի պարունակությունն(տեքստ, կոճակ, լրացման դաշտ և այլն) անհրաժեշտ է դասավորել այնպես, որ էլեմենտները էկրանին պատկերվեն՝ չանցնելով չերևացող մասի վրա։ Այսինքն անհրաժեշտ է սահմանել մաքուր տարածք էլեմենտների ամբողջական ցուցադրման համար՝

 

Եթե արտաքին սահմաններ հատկացվի, ենթադրենք Iphone X-ի էկրանի համար, ապա խնդիրը կշարունակի մնալ այլ տեսակի սմարթֆոնների դեպքում։ 

Այն լուծելու համար ստեղծվել են գլոբալ հատկություններ(կոչվում են «Կողմերի փոփոխականներ(переменные среды)») սմարթֆոնների էկրանների մաքուր տարածքը սահմանելու համար։ Դրանք գտնվում են բրաուզերներում։ Բրաուզերը սահմանում է մաքուր տարածք՝ հիմք վերցնելով սմարթֆոնի էկրանը։

Փոփոխականներն են՝

env(SAFE-AREA-INSET-TOP, length)
env(SAFE-AREA-INSET-RIGHT, length)
env(SAFE-AREA-INSET-BOTTOM, length)
env(SAFE-AREA-INSET-LEFT, length)

Տվյալ փոփոխականների սիմվոլները պարտադիր մեծատառ պետք է լինեն։

Սրանք, ի տարբերություն css -ի սովորական փոփոխականների, կարելի է օգտագործել նաև @media կանոնում և սահմանվում են բրաուզերների կողմից։ Աշխատում են env() ֆունկցիայի միջոցով։

Որպեսզի փոփոխականներն ակտիվանան, անհրաժեշտ է դրա մասին տեղեկացնել բրաուզերին։ Դա կատարվում է, երբ <meta> տեգում սահմանվում են հետևյալ տվյալները՝

				
					<meta name= "viewport"  content= "initial-scale=1, viewport-fit=cover" >
				
			

 

cover-ի փոխարեն հնարավոր է սահմանել ևս երկու  տարբերակ՝

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

contain – վեբ էջը կդասավորվի միայն էկրանի մաքուր տարածքում։

auto – նույնն է ինչ contain-ը։

Եթե վեբ էջը բացվելու է համակարգչի կամ նոթբուքի էկրանին, ապա չորս գլոբալ փոփոխականների արժեքը հավասար կլինի 0-ի։ 

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

Գլոբալ փոփոխականների հետ կարելի է սահմանել նաև երկրորդական արժեքներ, որոնք կաշխատեն, երբ գլոբալ փոփոխականները անհասանելի լինեն բրաուզերի համար։

env(SAFE-AREA-INSET-TOP,  25px)
env(SAFE-AREA-INSET-RIGHT,  25px)
env(SAFE-AREA-INSET-BOTTOM, 25px)
env(SAFE-AREA-INSET-LEFT, 25px)

կամ առանց երկրորդական արժեքների՝

env(SAFE-AREA-INSET-TOP)
env(SAFE-AREA-INSET-RIGHT)
env(SAFE-AREA-INSET-BOTTOM)
env(SAFE-AREA-INSET-LEFT)

				
					<head>
  <meta
    charset="utf-8"
    name="viewport"
    content="initial-scale=1, 
      viewport-fit=cover"
  />
  <title>hayti</title>
  <style>
    body {
      padding: env(SAFE-AREA-INSET-TOP) env(SAFE-AREA-INSET-RIGHT)
        env(SAFE-AREA-INSET-BOTTOM) env(SAFE-AREA-INSET-LEFT);
    }
  </style>
</head>

				
			

 

Վեբ կայքը բացվում է միայն բրաուզերի միջոցով, բայց այն հնարավոր է վերածել սմարթֆոնի և համակարգչի ծրագրի։ 

Դա նույն կայքն է, բայց ունի ծրագրի տեսք։  Այս տեխնոլոգիան կոչվում է PWA(մանրամասն կարելի է ծանոթանալ համացանցում)։

“Ծրագրի անվանումը” վերցվում է <title> էլեմենտից։

 

 Այն հնարավոր է ծածկել Javascript կոդի միջոցով։

Եթե այն ծածկվում է, ապա վերնագիրը սահմանվում է <header> էլեմենտի միջոցով և տեղադրվում այդ վայրում env() -ի որոշակի փոփոխականներով՝

				
					  header {
    position: fixed;
    left: env(
      titlebar-area-x,
      0
    ); /* սահմանում է տարածություն  ձախ կողմից։ */
    top: env(
      titlebar-area-y,
      0
    ); /* սահմանում է տարածություն  աջ կողմից։ */
    width: env(
      titlebar-area-width,
      0
    ); /* սահմանում է տվյալ օբյեկտի լայնությունը։ */
    
    height: env(
      titlebar-area-height,
      0
    ); /* սահմանում է տվյալ օբյեկտի բարձրությունը։ */
  }
				
			
				
					<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ծրագրի անվանումը</title>
  </head>
  <body>
    <header>
      <h1>Ծրագրի անվանումը</h1>
    </header>
    <main>
      <p>Ծրագրի պարունակությունը։</p>
    </main>
  </body>
</html>

				
			

 

Այստեղ նույնպես հնարավոր է սահմանել երկրորդական արժեք․ այն կաշխատի եթե հիմնական փոփոխականն անհասանել է։

url()

ֆունկցիայի միջոցով  սահմանվում է ռեսուրսի հասցեն՝ որևէ նկար ինտերնետում(կամ համակարգչում),  վեբ տառատեսակի հասցե և այլն։

բացարձակ հասցեի(абсолютный) տեսակ՝
url(https://exmple.com/images/myImg.jpg);

հարաբերական հասցեի(относительный) տեսակներ՝
url(C:\User\images \imag01.jpg);

url(image01.jpg) եթե ֆայլը(այս դեպքում նկարը) գտնվում է վեբ էջի հետ նույն վայրում, ապա կսահմանվի միայն դրա անվանումը:

Հասցեի համար հնարավոր է օգտագործել նաև չակերտներ, որը պարտադիր չէ՝
url(/images/myimage.png);

url(“/images/myimage.png” );

url(‘/images/myimage.png ‘ );

Ֆունկցիան կսահմանվի հետևյալ հատկությունների համար՝
background, background-image, border, border-image, border-image-source, content, cursor, filter, list-style, list-style-image, mask, ,mask-image, offset-path, src :

Օրինակ՝

				
					div { background-image: url(images/image01.jpg); }
				
			

Կօգտագործվի նաև  @font-face կանոնում՝

				
					@font-face {
  font-family: "Open Sans";
  src: url("/font/opensans.woff2") 
     format("woff2");
   }
				
			

Css Grid Ֆունկցիաներ

fit-content()  min-content max-content

Ենթադրենք կա <div>, որի լայնությունն ու բարձրությունը հավասար է 100px-ի։

 

Երբ դրանում տեղադրվի ընդարձակ տեքստ, ապա տեքստը div-ի սահմաններից դուրս կգա։

				
					div {
 width: 500px;
 height: 300px;
 background: orange;
}
				
			

min-content

min-content -ը սահմանելուց հետո  div-ը կընդունի լայնության համար ամենափոքր չափը,  իսկ բարձրությունը կորոշվի div-ի պարունակությամբ։

min-content-ը div -ում գտնում է ամենամեծ էլեմենտը և ըստ այդմ որոշում տվյալ բլոկի(div) լայնությունը։

Օրինակ տեքստում կգտնի ամենաերկար բառը, որով կորոշի լայնությունը՝

				
					div {
 width: min-content;
 background: orange;
}
				
			

Հետևյալ օրինակում նկարն ամենամեծն է, ուստի չափը կորոշվի ըստ այդմ՝

 

min-content – ը կարող է օգտագործվել նաև grid-template-rows  և grid-template-columns Grid հատկությունների հետ՝

				
					  .grid {
    display: grid;
    background: orange;
    border: 3px solid lime;
    grid-template-rows: min-content auto min-content;
  }
  .header {
    background: grey;
    border: 2px solid lime;
  }
  .content {
    background: grey;
    border: 2px solid lime;
  }
  .footer {
    background: grey;
    border: 2px solid lime;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="grid">
      <header class="header">HEllo World!! HEllo World!! HEllo World!!</header>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
        magna ipsum. Ut ac ullamcorper nisl. Sed hendrerit iaculis elit id
        consequat. Mauris odio metus, efficitur in nibh aliquet, luctus interdum
        enim. Nunc elementum
      </div>
      <div class="footer">Goodby World!!</div>
    </div>
  </body>
</html>

				
			

grid-template-rows: min-content   auto   min-content; – ընդունել է երեք արժեք div-ում գտնվող 3 դուստր div-երի համար՝  min-content,  auto , min-content ։ 

Քանի որ երկրորդի համար սահմանված է auto տարբերակը, այն վերցրել է էկրանի ամբողջ լայնությունը. դրան հավասարվել են նաև այն երկուսը, որոնք սահմանված են min-content-ով։

max-content

max-content-ը լայնության սահմանաչափ չունի․ որքան պարունակությունն է, այնքան էլ կլինի բլոկի լայնությունը:

				
					  .container {
    display: grid;
    background: orange;
    border: 3px solid lime;
    grid-template-columns: max-content max-content 1fr;
  }
  .container01 {
    color: white;
    background: grey;
    border: 3px solid lime;
  }
  .container02 {
    color: white;
    background: grey;
    border: 3px solid lime;
  }
  .container-auto {
    background: skyblue;
    border: 3px solid lime;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="container01">
        Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
      </div>
      <div class="container02">Lorem ipsum dolor</div>
      <div class="container-auto">Lorem ipsum</div>
    </div>
  </body>
</html>

				
			

Առաջին երկուսը վերցրել են այնքան տարածք, որքան անհրաժեշտ է իրենց պարունակության համար, իսկ երրորդը՝ մնացած ազատ տարածքը։

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

				
					  #container {
    border: 3px solid black;
    width: 200px;
  }
  .item1 {
    width: max-content;
    border: 3px solid lime;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div class="item1">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
      </div>
    </div>
  </body>
</html>

				
			

Սրանից խուսափելու համար կսահմանվի fit-content տարբերակը։

fit-content

fit-content – արժեքի առավելությունը նրանում է, որ դուստր էլեմենտի պարունակությունը դուրս չի գա ծնողի չափերից, բայց դուստրը չի ունենա չափի մինիմալ սահմանում, ինչպես fit-content() ֆունկցիայի պարագայում։ Եթե բրաուզերի պատուհանը փոքրացնենք, բլոկի մինիմալ լայնությունը կվորոշվի min-content-ի պես․

				
					#container {
 border: 1px solid black;
 width: 300px;
}
.item1 {
 width: fit-content;
 border: 1px solid black;
}
				
			
				
					<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>hayti</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div id="container">
  <div class="item1">Lorem ipsum doloLorem ipsum dolor, 
     sit amet consectetur adipLorem ipsum dolor, sit amet 
      consectetur adipLorem ipsum dolor, sit amet consectetur 
      adipLorem ipsum dolor, sit amet consectetur adipvr, 
      sit amet consectetur adipisicing elit.</div>
 </div>
</body>
</html>
				
			

fit-content()

fit-content() –  ֆունկցիայի միջոցով  բլոկների համար կսահմանվի մինիմալ չափեր, որոնցից չպետք է դուրս գան դրանց պարունակությունը։

				
					  .container {
    display: grid;
    background: orange;
    border: 2px solid red;
    grid-template-columns:
      fit-content(250px)
      fit-content(500px) auto;
  }
  .container01 {
    color: white;
    background: grey;
    border: 2px solid lime;
  }
  .container02 {
    color: white;
    background: grey;
    border: 2px solid lime;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="container01">
        Lorem ipsum dolor ipsum dolor ipsum dolor ipsum dolor
      </div>
      <div class="container02">
        Lorem ipsum dolor, sit consectetur adipsit consectetur adipsit
        consectetur adipsit consectetur adipisicing elit.!
      </div>
      <div class="container-auto">Lorem</div>
    </div>
  </body>
</html>

				
			

Բլոկի չափերը կարող են փոքրանալ, բայց պարունակությունը դուրս չի գա սահմանվածից։ 

Առաջինը 250px լայնությամբ է, երկրորդը՝  500px, իսկ երրորդը վերցնում է ամբողջ ազատ տարածքը։

minmax()

minmax() – ֆունկցիայի միջոցով  բլոկին սահմանվում է չափի դիապազոն։

Հետևյալ օրինակում առաջինը կփոքրանա մինչև 300px-ը և կմեծանա մինչև 500px-ը․ հաջորդ երկուսը հավասարապես կբաժանեն ազատ տարածքը իրար մեջ։

				
					  .container {
    display: grid;
    background: white;
    border: 2px solid red;
    grid-template-columns: minmax(300px, 500px) 1fr 1fr;
  }
  .container01 {
    color: white;
    background: orange;
    margin: 5px;
    border: 2px solid lime;
  }
  .container02 {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
  .container-auto {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="container01">
        Lorem ipsum dolor ipsum dolor ipsum dolor ipsum dolor
      </div>
      <div class="container02">
        Lorem ipsum dolor, sit consectetur adipsit consectetur adipsit
        consectetur adipsit consectetur adipisicing elit.!
      </div>
      <div class="container-auto">Lorem</div>
    </div>
  </body>
</html>

				
			

Ենթադրենք էկրանի լայնությունը 1200px է․ եթե անհրաժեշտ է այն բաժանել 6 հավասար բլոկների միջև, ապա կսահմանվի 1fr-ը բլոկների ընդհանուր կոնտեյներում և այն ավտոմատ կբաժանի բլոկները վեց հավասար մասերի՝  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr :

Հնարավոր է ունենալ տարբեր արժեքներով fr-ներ՝  grid-template-columns: 2.5fr 1fr 1.2fr  3fr 1.1fr 1fr ։ Հաշվարկը կատարվում է հետևյալ կերպ՝  գումարվում են բոլոր fr-ները՝  ընդհանուր՝  9.8fr:  Եթե էկրանի լայնությունը հավասար է 1200px-ի, ապա առաջին fr-ը կզբաղեցնի՝  2.5fr/9fr*1200px = 333px-տարածք և այլն: 

fr-ն օգտագործվում է միայն Css Grid -ում: 

minmax() ֆունկցիայում fr-ը սահմանվել է միայն երկրորդ արժեքում՝ max-ի համար։ Առաջին բլոկը կփոքրանա մինչև 300px լայնության։ Երբ բրաուզերի էկրանը լայնանա և fr-ով նշված մնացած բլոկների լայնությունը 300px-ից ավելին դառնա, ապա առաջին բլոկը(որի համար որպես max նշված է 1fr-ը) կհավասարվի մնացած fr-ով նշված բլոկների չափին․

				
					  .container {
    display: grid;
    background: white;
    border: 2px solid red;
    grid-template-columns: minmax(300px, 1fr) 1fr 1fr;
  }
  .container01 {
    color: white;
    background: orange;
    margin: 5px;
    border: 2px solid lime;
  }
  .container02 {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
  .container-auto {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
				
			

Այստեղ հնարավոր է օգտագործել նաև min-content, max-content և auto արժեքները։

Եթե ֆունկցիան հավասար է՝ minmax( 100px,  auto), առաջին բլոկը կփոքրանա մինչև 100px լայնության․ auto-ի դեպքում կլայնանա max-content -ի պես։ 

Եթե  ֆունկցիան հավասար է՝ minmax( auto, 200px), առաջին բլոկը կփոքրանա որոշակի  չափով և կլայնանա մինչև 200px-ը։

Երբ ֆունկցիան հավասար է՝ minmax( auto, auto)-ի, ապա կլինի հետևյալ արդյունքը՝

վեկրջին երկու բլոկների լայնությունը համապատասխանում է պարունակության մեջ ամենափոքր չափին։ Առաջին բլոկը վերցրել է մնացած ազատ տարածքը։

repeat()

repeat()  – ֆունկցիան օգնության է հասնում, երբ մեկ կոնտեյներում կան բազմաթիվ բլոկներ,  որոնք պետք է ունենան հավասար լայնություն։ 

Բրաուզերի էկրանի փոփոխման հետ բլոկները փոխում են իրենց վայրը։ Եթե բոլորը կարող են տեղավորվել էկրանի լայնության մեջ, ապա կդասավորվեն իրար կողքի։ 

Եթե էկրանը փոքրանա, դրանք կդասավորվեն ձախից աջ և վերևից ներքև հերթականությամբ։ 

Այս ամենին հնարավոր է հասնել մի քանի հատկություն սահմանելով՝

				
					  .container {
    display: grid;
    background: white;
    border: 2px solid red;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .container01 {
    color: white;
    background: orange;
    margin: 5px;
    border: 2px solid lime;
  }
  .container02 {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
  .container03 {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
  .container04 {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
  .container05 {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
  .container06 {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
  .container07 {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
  .container08 {
    color: white;
    background: grey;
    margin: 5px;
    border: 2px solid lime;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="container01">
        Lorem ipsum dolor ipsum dolor ipsum consectetur adipsit consectetur
        adipsit consec consectetur adipsit consectetur adipsit consec
        consectetur adipsit consectetur adipsit consec consectetur adipsit
        consectetur adipsit consecdolor ipsum dolor
      </div>
      <div class="container02">
        Lorem ipsum dolor, sit consectetur adipsit consectetur adipsit
        consectetur adipsit consectetur adipisicing elit.!
      </div>
      <div class="container03">Lorem</div>
      <div class="container04">Lorem</div>
      <div class="container05">Lorem</div>
      <div class="container06">Lorem</div>
      <div class="container07">Lorem</div>
      <div class="container08">Lorem</div>
    </div>
  </body>
</html>

				
			

repeat()  ֆունկցիայի միջոցով ամեն բլոկի համար սահմանվում է չափ․ այն սահմանվում է մեկ անգամ և վերաբերում է բոլորին։

Ընդունում է երկու արժեք՝
auto-fit – պատասխանատու է բլոկների քանակի և դրանց դասավորման համար։

երկրորդ արժեքը վերաբերում է յուրաքանչյուր բլոկին(minmax(200px, 1fr)

repeat() -ի միջոցով  կատարվում է քանակի և չափի կրկնություն և դասավորվում ձախից աջ, վերևից ներքև հերթականությամբ։

minmax(200px, 1fr) -ամեն բլոկ կփոքրանա մինչև 200px․  բոլորը միասին կլայնանան այնքան, մինչև էկրանի վրա  այլ բլոկի համար 200px լայնությամբ տարածք զբաղեցվի։

Հնարավոր է ունենալ այլ տարբերակներ՝
grid-template-columns: repeat(8, 8em) – անհրաժեշտ է սահմանել 8 բլոկ, որոնցից յուրաքանչյուրը կունենա 8em լայնություն։

grid-template-columns: repeat(2,   7em 8em) –  անհրաժեշտ է սահմանել 4 բլոկ,  որտեղ երկու անգամ կկրկնվեն  7em և 8em լայնության բլոկներ։ 

grid-template-columns:  6em repeat(3,   5em) – առաջին բլոկը կունենա 6em լայնություն, իսկ մնացած 3-ը՝ 5em լայնություն։

 

grid-template-columns:  repeat(auto-fit, minmax(200px,  1fr)) -ը հնարավոր է սահմանել նաև այլ կերպ՝  

grid-template-columns:  repeat(8, minmax(200px,  1fr))

Արդյունքը կլինի հետևյալը՝

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

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