grid-template-rows հատկությունը

grid-template-rows հատկությունը սահմանում է տողերի քանակը և լայնությունը, որոնք տարրը կզբաղեցնի grid-ում կամ ցանցում: Հատկության արժեքում մենք նշում ենք տողերի լայնությունը ցանկացած չափման միավորով: Հատկությունը նշվում է ծնող տարրում և սահմանում է երեխա տարրերի տողերի լայնությունը:

Հատկություններում պիքսելներով արժեքներ նշելու դեպքում տողերի չափերը կլինեն ճշգրիտ համապատասխան: Եթե մենք նշում ենք auto բառը, ապա տողերը կլրացնեն ամբողջ առկա տարածությունը: fr (fraction) միավորի օգտագործումը նշանակում է, որ ամբողջ տարածությունը կբաժանվի նույնական մասերի: fr-ի առավելությունը նրա հարմարեցվելու ունակությունն է տարբեր կոնտեյներների կամ էկրանի թույլատրությունների նկատմամբ, քանի որ fr պարզապես բաժանում է դրանք նշված քանակի ֆրակցիաների՝ առանց պիքսելներով ճշգրիտ չափի կապվածության:

Շարահյուսություն

cssընտրող {
  grid-template-rows: տողի լայնություն;
}

Օրինակ

Եկեք սահմանենք մեր տարրերի տողերի լայնությունը grid-ում:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Եկեք առաջին և երրորդ տողերի համար նշենք ֆիքսված լայնություն պիքսելներով, իսկ երկրորդ տողը թող ինքնաբերաբար լրացնի առկա տարածությունը:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Այժմ grid-template-rows հատկության միջոցով անենք այնպես, որ առաջին և երկրորդ տողերը զբաղեցնեն կոնտեյների մեկ մասը, իսկ երրորդ տողը՝ երեք մասը:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

fr միավորներով նշված արժեքները կարող են ընդունել կոտորակային տեսք: Եկեք փոխենք նախորդ օրինակը՝ նշելով երկրորդ և երրորդ տողերի լայնությունը կոտորակային թվերով:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Եկեք grid-template-rows հատկությունում նշենք repeat() ֆունկցիան, որը կհաղորդի կոնտեյներին, որ բոլոր երեք տողերը պետք է ունենան նույն լայնությունը:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Այժմ եկեք փոխենք նախորդ օրինակը այնպես, որ երեք նույնական տողերին ավելանա չորրորդը, որը կզբաղեցնի երկու ֆրակցիա կոնտեյներից:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr) 2fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Եկեք առաջին երկու տողերի համար սահմանենք մեկ ֆրակցիայի լայնություն կոնտեյներից, իսկ վերջին երկու տողերի համար՝ երկու ֆրակցիա:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Այժմ եկեք սահմանենք տողերի լայնությունը համադրելով repeat() ֆունկցիայի և ազատ fr միավորների միջոցով նշված արժեքները:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Նաև repeat() ֆունկցիայում կարելի է նշել auto-fill արժեքը, որը կլրացնի մեր կոնտեյները նույնական տողերով մեզ անհրաժեշտ լայնության:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Շատ հարմար է auto-fill-ի հետ միասին նշել minmax ֆունկցիան, որը սահմանում է տողերի լայնության տիրույթը նվազագույնից մինչև առավելագույն արժեքը: Եթե կոնտեյների լայնությունը չի տեղավորում բոլոր տողերը, ապա դրանցից որոշները կտեղափոխվեն նոր տող, ընդ որում տողի տողերը հավասարաչափ կբաշխվեն դրանում: Եկեք փոխենք նախորդ օրինակը՝ դրանում նշելով minmax ֆունկցիան:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Այժմ եկեք նշենք auto-fit հատկությունը, որի տարբերությունը auto-fill-ից կայանում է նրանում, որ այն հարմարեցնում է տողերի քանակը կոնտեյների առկա լայնությանը՝ ընդլայնելով կամ սեղմելով դրանք:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Նաև fr-ի կողքին կարելի է օգտագործել արժեքներ %-ով, որոնք նույնպես սահմանում են կոնտեյների որ մասը կզբաղեցնի տողը: Ընդ որում, նախ կհաշվարկվի տողի չափը %-ով, իսկ մնացած ազատ տարածությունը կբաժանվի ֆրակցիաների:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 50% 1fr 2fr 30%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Եկեք օգտագործենք միասին grid-template-columns և grid-template-rows հատկությունները:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Եկեք grid-template-columns և grid-template-rows հատկությունների միջոցով ստեղծենք ինը բջիջներից բաղկացած աղյուսակ, տեղակայված երեք տողերում: Ընդ որում, երկրորդ և երրորդ տողերը կունենան նույն լայնությունը, իսկ յուրաքանչյուր սյունակ՝ տարբեր լայնություն:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Օրինակ

Այժմ նախորդ օրինակի աղյուսակում անենք այնպես, որ վերևի տողը լինի երկու ֆրակցիայի լայնությամբ, իսկ առաջին սյունակը՝ կես ֆրակցիայի:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 2fr 1fr 1fr;
  grid-template-columns: 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Տես նաև