Grid-template-columns հատկությունը

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

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

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

ընտրիչ {
	grid-template-columns: սյունակի լայնություն;
}

Օրինակ

Եկեք սահմանենք մեր տարրերի սյունակների լայնությունը ցանցում.

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

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

Օրինակ

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

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

#parent {
	display: grid;
	grid-template-columns: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Օրինակ

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

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

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

Օրինակ

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

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

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

Օրինակ

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

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

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

Օրինակ

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

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

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

Օրինակ

Եկեք առաջին երկու սյունակներին նշանակենք կոնտեյների մեկ ֆրակցիայի լայնություն իսկ վերջին երկու սյունակներին՝ երկու ֆրակցիայի.

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

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

Օրինակ

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

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

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

Օրինակ

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

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

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Օրինակ

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

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

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

Օրինակ

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

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

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

Օրինակ

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

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

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

Օրինակ

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

<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>

#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 հատկությունների միջոցով ստեղծենք ինը բջիջներից բաղկացած աղյուսակ, որը տեղակայված է երեք շարքով: Ընդ որում, երկրորդ և երրորդ շարքերը կունենան նույն լայնությունը, իսկ յուրաքանչյուր սյունակ՝ տարբեր լայնություն.

<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>

#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;
}

Օրինակ

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

<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>

#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;
}

Տես նաև

grid-template-rows հատկությունը,
որը սահմանում է ցանցում շարքերի քանակը և լայնությունը
grid-auto-columns հատկությունը,
որը սահմանում է անուղղակի ցանցում սյունակների քանակը և լայնությունը