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:
Aşağıdaki örneği uygulayın:
Aşağıdaki örneği uygulayın: