Grid Özelliği

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

grid kullanılarak tek bir 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.

Sözdizimi

öğe {
	grid: ızgara özellikleri;
}

Örnek

grid özelliği kullanarak 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: 400px;
	height: 200px;
}

#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Örnek

Şimdi de ikinci ve üçüncü satırlara aynı genişliği verelim ve her sütuna farklı genişlikler atayalı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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Örnek

Şimdi bir önceki örnekteki tabloda üst satırın genişliğini iki fraksiyon, ve ilk sütunun genişliğini yarım fraksiyon 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: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ayrıca Bakınız

grid-template özelliği,
öğe için sütun ve satırların sayısını ve genişliğini belirler
grid-template-rows özelliği,
ızgaradaki satırların sayısını ve genişliğini belirler
grid-template-columns özelliği,
ızgaradaki sütunların sayısını ve genişliğini belirler
grid-template-areas özelliği,
öğelerin ızgarada yerleşimini belirler
grid-auto-flow özelliği,
öğelerin ızgarada otomatik yerleşimini belirler