Properti Singkatan CSS Grid
Properti grid merupakan
bentuk singkat untuk menulis semua properti kolom
dan baris grid container. Semua
nilai ditulis dalam satu baris dipisahkan oleh garis miring.
Melalui grid, dalam satu baris hanya dapat dijelaskan
satu jenis properti -
eksplisit (grid-template-rows,
grid-template-columns,
grid-template-areas)
atau implisit (grid-auto-rows,
grid-auto-columns,
grid-auto-flow).
Properti yang
tidak ditentukan
akan mengambil nilai default.
Contoh
Mari buat sebuah tabel
menggunakan properti 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: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Contoh
Dan sekarang mari kita berikan lebar yang sama untuk baris kedua dan ketiga, dan lebar yang berbeda untuk setiap kolom:
<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;
}
:
Contoh
Dan sekarang dalam tabel dari contoh sebelumnya mari buat baris atas dengan lebar dua fr, dan kolom pertama - setengah fr:
<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;
}
:
Tugas Praktik
Implementasikan contoh berikut:
Implementasikan contoh berikut:
Implementasikan contoh berikut: