grid

Properti CSS grid adalah properti singkatan untuk berbagai properti grid.

Yaitu, grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns dan grid-auto-flow.

Properti grid merupakan cara mudah untuk mengatur beberapa properti grid sekaligus dalam kode HTML.

Dengan cara ini, kamu tidak harus menulis setiap nama properti secara individual.

Properti grid menetapkan properti berikut:

Properti Grid Eksplisit

• grid-template-rows
• grid-template-columns
• grid-template-areas

Properti Grid Implisit

• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

Properti Gutter

• grid-column-gap
• grid-row-gap

<div class="grid__container">
  <header id="pageHeader" class="grid__header">Header</header>
  <article id="mainArticle" class="grid__article">Article</article>
  <nav id="mainNav" class="grid__nav">Nav</nav>
  <div id="siteAds" class="grid__ads">Ads</div>
  <footer id="pageFooter" class="grid__footer">Footer</footer>
</div>

.grid__container {
display: grid;
grid: "header header header"
"nav article ads"
"footer footer footer"
/ 20% 1fr 15%;
grid-gap: 10px;
}

.grid__header,
.grid__footer,
.grid__article,
.grid__nav,
.grid__ads {
padding: 20px;
background: #FFE082;
}

#pageHeader {
grid-area: header;
}

#pageFooter {
grid-area: footer;
}

#mainArticle {
grid-area: article;
}

#mainNav {
grid-area: nav;
}

#siteAds {
grid-area: ads;
}

Catatan: Kamu hanya dapat mengatur properti eksplisit atau implisit dalam deklarasi grid tunggal. Setiap subproperti yang tidak kamu tentukan diatur ke nilai awalnya.

Contoh

Berikut ini contoh kode untuk menunjukkan cara kerja shorthand properti grid.

/* 3 columns, 'auto-flow' the rows */
grid: auto-flow 20vh / repeat(3, 30vw);

/* The above code is equivalent to this */
grid-template-rows: auto-flow 20vh;
grid-template-columns: repeat(3, 30vw);
grid-template-areas: none; /* Initial value */
grid-column-gap: 0; /* Initial value */
grid-row-gap: 0; /* Initial value */

Menggunakan Fungsi repeat()

Kamu dapat menggunakan fungsi repeat() untuk mengulangi definisi baris atau kolom sebanyak yang diperlukan.

Parameter pertama menentukan berapa banyak kemunculan definisi yang harus ditampilkan, dan parameter kedua menentukan daftar trek.

3 Kolom

Dalam contoh ini, saya menggunakan fungsi repeat() untuk menyatakan berapa banyak kolom yang harus ditampilkan, dan saya menerapkan auto-flow ke baris.

Menerapkan nilai auto-flow ke baris sama dengan menggunakan grid-auto-flow: row.

grid: auto-flow 20vh / repeat(3, 30vw);

Hasilnya grid berisi 3 kolom, dan memiliki baris sebanyak yang dibutuhkan untuk memenuhi semua item grid.

<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: auto-flow 20% / repeat(3, 30%);
grid-gap: 10px;
}

#grid>div {
background-color: #80CBC4;
color: white;
font-size: 4vw;
padding: 10px;
}

3 Baris

Contoh ini sama dengan contoh di atas, tetapi saya menentukan berapa banyak baris yang dimiliki grid, dan saya mengatur aliran otomatis pada kolom.

grid: repeat(3, 20vh) / auto-flow;

<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: repeat(3, 20vh) / auto-flow;
grid-gap: 10px;
}

#grid>div {
background-color: #80CBC4;
color: white;
font-size: 4vw;
padding: 10px;
}

CSS Syntax

grid: none | grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow]
grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit;

JavaScript Syntax

object.style.grid="250px / auto auto auto"

Attribute Value