Sifat grid
Sifat grid merupakan
bentuk penulisan ringkas untuk semua sifat lajur
dan baris kontena grid. Semua
nilai ditulis dalam satu baris melalui slash.
Melalui grid dalam satu baris hanya boleh digambarkan
satu jenis sifat sahaja -
eksplisit (grid-template-rows,
grid-template-columns,
grid-template-areas)
atau implisit (grid-auto-rows,
grid-auto-columns,
grid-auto-flow).
Sifat-sifat yang
tidak dinyatakan,
mengambil nilai lalai.
Sintaks
elemen {
grid: sifat grid;
}
Contoh
Mari buat jadual
dengan menggunakan sifat grid:
<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;
}
:
Contoh
Sekarang mari tetapkan untuk baris kedua dan ketiga lebar yang sama, dan untuk setiap lajur - lebar yang berbeza:
<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;
}
:
Contoh
Sekarang dalam jadual dari contoh sebelumnya buat baris atas dengan lebar dua pecahan, dan lajur pertama - separuh pecahan:
<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;
}
:
Lihat juga
-
sifat
grid-template,
yang menetapkan bilangan dan lebar lajur dan baris untuk elemen -
sifat
grid-template-rows,
yang menetapkan bilangan dan lebar baris dalam grid -
sifat
grid-template-columns,
yang menetapkan bilangan dan lebar lajur dalam grid -
sifat
grid-template-areas,
yang menetapkan penempatan elemen dalam grid -
sifat
grid-auto-flow,
yang menetapkan penempatan automatik elemen dalam grid