Хосияти grid-template-columns

Хосияти grid-template-columns миқдор ва бараи сутунҳоро муайян мекунад, ки элемент дар grid ё шабака ишғол мекунад. Хосият дар элемент-падар муайян карда мешавад ва бараи сутунҳои элементҳои фарзандро муайян мекунад. Дар қимати хосият бараи сутунҳоро муайян мекунем дар ҳама гуна воҳидҳо барои андозаҳо.

Ҳангоми муайян кардани қиматҳо дар хосиятҳо бо пиксел андозаҳои сутунҳо ба дақиқ ба онҳо мувофиқат мекунанд. Агар мо калимаи auto-ро муайян кунем, сутунҳо ҳамаи фазои дастрасро пур мекунанд. Истифодаи воҳиди fr (фракция) маънои онро дорад, ки ҳамаи фазо ба қисмҳои баробар тақсим карда мешавад. Имтиёзи fr мутобиқшавии он ба контейнерҳои гуногун ё андозаҳои экран мебошад, зеро fr фақат ба миқдори муайяншудаи фраксияҳо тақсим мекунад бе пайваст кардан ба андозаи дақиқи пикселҳо.

Синтаксис

интихобкунанда {
	grid-template-columns: бараи сутун;
}

Намуна

Биёед бараи сутунҳоро барои элементҳои мо дар grid муайян кунем:

<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 муайян мекунад
хосияти grid-auto-columns,
ки миқдор ва бараи сутунҳоро дар grid-и ноаён муайян мекунад