Grid Item di CSS: Properti dan Codenya

Section Artikel

1 Elemen Anak (Item)
2 Properti grid-kolom:
3 Properti grid-row
4 Properti grid-area
5 Memberi Nama Item Grid
6 Urutan Item

Elemen Anak (Item)

Sebuah kontainer grid berisi item grid.

Secara default, sebuah kontainer memiliki satu item grid untuk setiap kolom di setiap baris, tetapi kita bisa mengatur gaya item grid sehingga bisa menjangkau beberapa kolom dan / atau baris.

Properti grid-kolom:

Properti grid-column menentukan kolom mana untuk menempatkan item.

Kit bisa menentukan di mana item akan dimulai dan di mana item akan berakhir.

Catatan: Properti grid-column adalah properti singkatan untuk grid-column-start dan grid-column-end properties.

Untuk menempatkan item, kita bisa merujuk ke nomor baris atau menggunakan kata kunci “span” untuk menentukan berapa banyak kolom yang akan direntang item tersebut.

Contoh
Buat “item1” dimulai dari kolom 1 dan diakhiri sebelum kolom 5:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / 5;
}
</style>
</head>
<body>

<h1>The grid-column Property</h1>

<p> Gunakan properti <em> grid-column </em> untuk menentukan tempat meletakkan item. </p>
<p> Item1 akan dimulai di kolom 1 dan diakhiri sebelum kolom 5: </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>
</html>

Contoh
Buat “item1” dimulai dari kolom 1 dan kolom rentang 3:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 3;
}
</style>
</head>
<body>

<h1>The grid-column Property</h1>

<p> Gunakan properti <em> grid-column </em> untuk menentukan tempat meletakkan item. </p>
<p> Item1 akan dimulai pada kolom baris 1 dan kolom rentang 3: </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

</body>
</html>

Contoh
Buat “item2” dimulai dari kolom 2 dan rentang 3 kolom:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item2 {
  grid-column: 2 / span 3;
}
</style>
</head>
<body>

<h1>The grid-column Property</h1>

<p> Gunakan properti <em> grid-column </em> untuk menentukan tempat meletakkan item. </p>
<p> Item2 akan dimulai pada kolom baris 2 dan kolom span 3: </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

</body>
</html>

Properti grid-row

Properti grid-row menentukan baris mana untuk menempatkan item. Kita akan menentukan di mana item akan dimulai, dan di mana item akan berakhir.

Catatan: Properti grid-row adalah properti singkatan untuk grid-row-start and grid-row-end properties.

Untuk menempatkan item, kita bisa merujuk ke nomor baris atau menggunakan kata kunci “span” untuk menentukan berapa banyak baris yang akan direntang item:

Contoh
Buat “item1” dimulai di baris-baris 1 dan diakhiri di baris-baris 4:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row: 1 / 4;
}
</style>
</head>
<body>

<h1>The grid-row Property</h1>

<p> Gunakan properti <em> grid-row </em> untuk menentukan tempat meletakkan item. </p>
<p> Item1 akan dimulai di baris-baris 1 dan berakhir di baris-baris 4: </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

</body>
</html>

Contoh
Buat “item1” dimulai pada baris 1 dan rentang 2 baris:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row: 1 / span 2;
}
</style>
</head>
<body>

<h1>The grid-row Property</h1>

<p> Gunakan properti <em> grid-row </em> untuk menentukan tempat meletakkan item. </p>
<p> Item1 akan dimulai pada baris 1 dan rentang 2 baris: </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
  <div class="item17">17</div>
</div>

</body>
</html>

Properti grid-area

Properti grid-area dapat digunakan sebagai properti singkatan untuk grid-row-start, grid-column-start, grid-row-end dan properti grid-column-end.

Contoh
Buat “item8” dimulai pada baris-baris 1 dan kolom-baris 2, dan diakhiri pada baris-baris 5 dan kolom baris 6:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p> Kita bisa menggunakan properti <em> grid-area </em> untuk menentukan tempat meletakkan item. </p>

<p> Sintaksnya adalah: </p>
<p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p> Item 8 akan dimulai pada baris-baris 1 dan kolom-baris 2, dan berakhir pada baris-baris 5 kolom-baris 6: </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>
</html>

Contoh
Buat “item8” dimulai pada baris-baris 2 dan baris-kolom 1, dan rentang 2 baris dan 3 kolom:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p> Anda dapat menggunakan properti <em> grid-area </em> untuk menentukan tempat meletakkan item. </p>

<p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p> Item8 akan dimulai pada baris-baris 2 dan kolom-baris 1, dan rentang 2 baris dan 3 kolom: </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
</div>

</body>
</html>

Memberi Nama Item Grid

Properti grid-area juga bisa digunakan untuk menetapkan nama ke item grid.

Item grid bernama dapat dirujuk oleh properti grid-template-area dari kontainer grid.

Contoh
Item1 mendapatkan nama “myArea” dan mencakup kelima kolom dalam tata letak kisi lima kolom:

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p> Kita bisa menggunakan properti <em> grid-area </em> untuk memberi nama item grid. </p>

<p> Anda bisa merujuk ke nama tersebut saat menyiapkan tata letak kisi, dengan menggunakan properti <em> grid-template-area </em> pada kontainer grid. </p>

<p> Item 1, disebut "myArea" dan akan menggantikan kelima kolom: </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

Setiap baris ditentukan oleh apostrof (”)

Kolom di setiap baris ditentukan di dalam apostrof(”), dipisahkan oleh spasi.

Catatan: Tanda titik mewakili item grid tanpa nama.

Contoh
Biarkan “myArea” menjangkau dua kolom dalam tata letak grid lima kolom (tanda titik mewakili item tanpa nama):

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p> Kita bisa menggunakan properti <em> grid-area </em> untuk memberi nama item grid. </p>

<p> kita bisa merujuk ke nama tersebut saat menyiapkan tata letak grid, dengan menggunakan properti <em> grid-template-area </em> pada penampung grid. </p>

<p> Item1, disebut "myArea" dan akan menggantikan dua kolom (dari lima): </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
</div>

</body>
</html>

Untuk menentukan dua baris, tentukan kolom dari baris kedua di dalam kumpulan apostrof(”) lainnya:

Contoh
Buat “item1” mencakup dua kolom dan dua baris:

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p> Anda dapat menggunakan properti <em> grid-area </em> untuk memberi nama item grid. </p>

<p> kita bisa merujuk ke nama tersebut saat menyiapkan tata letak grid, dengan menggunakan properti <em> grid-template-area </em> pada konotainer grid. </p>

<p> Item1, disebut "myArea" dan akan menggantikan dua kolom (dari lima), dan akan mencakup dua baris: </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

</body>
</html>

Contoh
Beri nama semua item dan buat template halaman web yang siap digunakan:

<!DOCTYPE html>
<html>
<head>
<style>
.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: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p> Anda dapat menggunakan properti <em> grid-area </em> untuk memberi nama item grid. </p>

<p> kita bisa merujuk ke nama tersebut saat menyiapkan tata letak grid, dengan menggunakan properti <em> grid-template-area </em> pada konotainer grid. </p>

<p> Tata letak grid ini berisi enam kolom dan tiga baris: </p>

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

</body>
</html>

Urutan Item

Grid Layout memungkinkan kita untuk memposisikan item dimanapun kita suka.

Item pertama dalam kode HTML tidak harus muncul sebagai item pertama di grid.

Contoh 1 :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
</style>
</head>
<body>

<h1> Sort the items </h1>

<p> Item tidak harus ditampilkan dalam urutan yang sama seperti yang tertulis di kode HTML. </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

Kita bisa mengatur ulang urutan untuk ukuran layar tertentu dengan menggunakan kueri media:

Contoh 2 :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}
</style>
</head>
<body>

<h1> Atur Ulang Pesanan pada Perangkat Kecil </h1>

<p> Ubah ukuran jendela menjadi 500 piksel untuk melihat efeknya. </p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

CSS css grid