Properti CSS grid-area adalah singkatan untuk penempatan item grid berbasis garis dalam grid.

Properti grid-area berfungsi seperti ini: grid-row-start / grid-column-start / grid-row-end / grid-column-end

Jadi properti ini memungkinkan kamu untuk menentukan baris mana yang memulai item grid, dan berapa banyak trek yang terbentang.

<div id="grid">
  <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>

#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1px;
}

#grid>div {
background-color: #A5D6A7;
color: white;
font-size: 1.9em;
padding: 10px;
}

#grid>div:first-child {
grid-area: 2 / 2 / 4 / 4;
background: #FFE082;
}

Yuk kita lihat kode yang relevan dari contoh di atas:

#grid > div:first-child {
grid-area: 2 / 2 / 4 / 4;
background: orangered;
}

Kode tersebut menghasilkan item grid pertama yang ditempatkan mulai dari row line 2, column line 2, dan membentang dua baris ke bawah dan dua kolom.

Dua nilai pertama menentukan posisi awal, dan dua nilai terakhir menentukan posisi akhirnya.

Garis miring (/) memisahkan nilai untuk masing-masing properti.

Nama Grid Area

Kamu juga bisa merujuk ke nama grid area apa pun yang kamu buat dengan properti grid-template-areas:

/* Menentukan nama grid area */
grid-template-areas:
"a b c"
"d e f"
"g h i";

/* Sekarang merujuk ke nama grid area (bukan nomor indeks) */
#grid > div:first-child {
grid-area: e / e / i / i;
background: orangered;
}

Baris Bernama Implisit

Kamu juga bisa merujuk ke setiap baris bernama implisit (dan eksplisit) yang telah didefinisikan pada grid.

Baris bernama implisit dibuat secara otomatis setiap kali kamu membuat area grid bernama.

Jadi, setiap kali kamu membuat area kotak bernama (seperti dalam contoh sebelumnya), seluruh rangkaian garis bernama implisit dibuat di belakang layar.

Untuk setiap grid area bernama foo, empat garis bernama implisit dibuat. Dua nama foo-start menamai baris baris-awal dan kolom-awal dari area grid bernama, dan dua bernama foo-end sebagai baris-akhir dan kolom-akhir dari area grid bernama.

Jadi kita bisa mengambil contoh di atas, dan menambahkan -start untuk kedua nilai e dan -end ke kedua i, dan sekarang kita akan merujuk ke baris bernama implisit:

/* Menentukan grid area bernama */
grid-template-areas:
"a b c"
"d e f"
"g h i";

/* Sekarang merujuk ke baris bernama implisit */
#grid > div:first-child {
grid-area: e-start / e-start / i-end / i-end;
background: orangered;
}

Jadi, saya sebenarnya tidak mendefinisikan e-start atau e-end dimana pun dalam kode.

Ini secara otomatis dihasilkan dari area grid bernama.

Misalnya, jika kamu memanggil area grid teh dan manis, maka garis bernama implisit kamu akan disebut teh-start dan manis-end.

Baris Bernama Eksplisit

CSS juga memungkinkan kamu menentukan nama sendiri pada baris grid. Ini disebut baris bernama eksplisit.

Kamu dapat membuat nama-nama ini ketika menentukan trek, lalu merujuknya seperti dengan baris bernama implisit:

/* Menentukan nama grid area */
grid-template-areas:
"a b c"
"d e f"
"g h i";

/* Sekarang merujuk ke nama grid area */
#grid > div:first-child {
grid-area: e / e / i / i;
background: orangered;
}

Kata Kunci span

Kata kunci span dapat digunakan untuk membuat item grid span beberapa trek.

<div id="grid">
  <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>10</div>
  <div>11</div>
  <div>12</div>
</div>

#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 1px;
}

#grid>div {
background-color: #9FA8DA;
color: white;
font-size: 1.9em;
padding: 10px;
}

#grid>div:first-child {
grid-area: 1 / 2 / span 2 / span 2;
background: #FFE082;
}

CSS Syntax

grid-area: <grid-line> [ / <grid-line> ]{0,3}

Dimana:

<grid-line> =
  auto |
  <custom-ident> |
  [ <integer> && <custom-ident>? ] |
  [ span && [ <integer> || <custom-ident> ] ]

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

  .item1 {
    grid-area: header;
  }

  .item2 {
    grid-area: menu;
  }

  .item3 {
    grid-area: main;
  }

  .item4 {
    grid-area: right;
  }

  .item5 {
    grid-area: footer;
  }

  .grid-container {
    display: grid;
    grid-template-areas:
      'header header header header header header'
      'menu main main main right right'
      'menu footer footer footer footer footer';
    grid-gap: 10px;
    background-color: #009688;
    padding: 10px;
  }

  .grid-container>div {
    background-color: #B2DFDB;
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }

CSS Syntax

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

JavaScript Syntax

object.style.gridArea="1 / 2 / span 2 / span 3"

Attribute Value