CSS Grid Özelliklerinin Kısaltılmış Yazımı

grid özelliği, grid konteynerinin tüm sütun ve satır özelliklerinin kısaltılmış yazım şeklidir. Tüm değerler tek satırda eğik çizgi ile ayrılarak yazılır.

grid ile tek satırda yalnızca bir tür özellik tanımlanabilir - açık (grid-template-rows, grid-template-columns, grid-template-areas) veya örtük (grid-auto-rows, grid-auto-columns, grid-auto-flow). Belirtilmeyen özellikler varsayılan değerlerini alır.

Örnek

grid özelliği ile bir tablo yapalım:

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Örnek

Şimdi de ikinci ve üçüncü satırlara aynı genişliği, her sütuna ise farklı genişlik verelim:

<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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Örnek

Şimdi bir önceki örnekteki tabloda üst satırı iki fraksiyon genişliğinde, ilk sütunu ise yarım fraksiyon genişliğinde yapalım:

<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: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Pratik Görevler

Aşağıdaki örneği uygulayın: