Articles
Pengenalan ke CSS
Properti CSS yang terkait dengan tata letak grid

Properti CSS yang terkait dengan tata letak grid

Artikel ini menjelaskan properti CSS yang terkait dengan tata letak grid.

Anda dapat mempelajari cara mendeskripsikan grid dan grid inline.

YouTube Video

HTML untuk Pratinjau

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

Tata Letak Grid

grid 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

Grid adalah sistem tata letak untuk menyelaraskan elemen dalam baris dan kolom dua dimensi. Dengan menggunakan grid, Anda dapat dengan mudah dan fleksibel membangun tata letak kompleks yang sulit dilakukan dengan metode tradisional seperti float atau position. Flexbox unggul dalam tata letak satu dimensi, sementara grid cocok untuk tata letak dua dimensi.

  • Kelas grid-box menerapkan tata letak grid dengan menentukan grid dalam properti display. Elemen ini disebut sebagai grid container.
  • Properti grid-template-columns menentukan lebar kolom grid. Dalam contoh ini, kolom pertama adalah 100px, kolom kedua adalah 200px, dan kolom ketiga mengambil sisa ruang (auto).
  • Properti grid-template-rows menentukan tinggi baris grid. Baris pertama adalah 100px, baris kedua otomatis (auto), dan baris ketiga setinggi 50px.
  • Properti gap menentukan jarak antar item di dalam grid. Menambahkan jarak 10px antara kolom dan baris.

Terminologi Dasar

  1. Grid container adalah elemen dengan properti display yang diatur ke grid, dan elemen anaknya menjadi item grid.
  2. Item grid adalah elemen anak yang ditempatkan langsung di bawah grid container.

Properti utama grid

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • Properti grid-template-columns dan grid-template-rows menentukan ukuran setiap kolom dan baris.
  • Satuan seperti px dan %, serta fr (fraksi) untuk menentukan proporsi dari sisa ruang, dapat digunakan.
    • Dalam contoh ini, ada tiga kolom, dan kolom kedua memiliki lebar dua kali dari kolom lainnya.
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column dan grid-row menentukan kolom atau baris tempat item grid akan ditempatkan.
    • Dalam contoh ini, item mencakup dari kolom ke-2 hingga kolom ke-4 dan dari baris ke-1 hingga baris ke-3.
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows dan grid-auto-columns adalah properti yang mengendalikan ukuran baris dan kolom yang secara otomatis dihasilkan ketika garis atau kolom dalam tata letak grid tidak didefinisikan secara eksplisit.
    • Dalam contoh ini, 2 baris dan 2 kolom didefinisikan secara eksplisit, tetapi jika lebih banyak elemen ditambahkan, baris atau kolom baru akan dihasilkan secara otomatis sesuai dengan grid-auto-rows dan grid-auto-columns.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Menyesuaikan item grid secara horizontal (justify-items) dan vertikal (align-items).
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area menentukan secara langsung area dalam grid container tempat item grid harus ditempatkan.
    • Dalam contoh ini, artinya mencakup dari baris ke-1 hingga baris ke-3 dan dari kolom ke-2 hingga kolom ke-4.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap menambahkan jarak antara kolom dan baris. Anda juga dapat menentukan jarak antara kolom dan baris secara individu menggunakan column-gap dan row-gap.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow adalah properti yang mengatur arah di mana item ditempatkan, baik berdasarkan baris maupun kolom.

Contoh tata letak yang kompleks 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

Dengan cara ini, grid memungkinkan Anda untuk membuat tata letak seluruh halaman web dengan kode sederhana.

  • Dalam contoh ini, ada tiga kolom (sidebar, konten utama, dan iklan) dan tiga baris (header, konten, dan footer).
  • Header dan footer mencakup seluruh lebar halaman, dengan konten di tengah, serta sidebar dan iklan di kedua sisi.

Keuntungan dari Grid

Keuntungan menggunakan grid mencakup poin-poin berikut:.

  • Tata letak dua dimensi yang mudah: Mengelola tata letak pada baris dan kolom memungkinkan tata letak yang kompleks dibuat dengan lebih sedikit kode.
  • Kompatibel dengan desain responsif: Sistem grid memudahkan untuk membuat desain responsif yang dapat menyesuaikan dengan berbagai ukuran layar.

Properti gap 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

Properti gap digunakan dalam tata letak grid dan flexbox untuk mengatur jarak (gap) antara elemen-elemen. Dengan menggunakan properti ini, Anda dapat dengan mudah menempatkan ruang antara elemen-elemen anak.

  • Di dalam kelas gap-grid-container, celah sebesar 30px secara vertikal dan 10px secara horizontal diterapkan di antara setiap elemen. Karena grid 3 kolom dibuat dengan grid-template-columns, celah diterapkan secara vertikal dan horizontal di antara setiap elemen. Di dalam kelas gap-flex-container, celah sebesar 50px diterapkan di antara tiga item pada flexbox.

Sintaks Dasar 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap menentukan celah antara baris-baris. Ini adalah jarak vertikal dalam tata letak grid atau flex.
  • column-gap menentukan celah antara kolom-kolom. Ini adalah jarak horizontal.

Jika dua nilai tidak ditentukan, satu nilai akan diterapkan pada row-gap dan column-gap.

Keuntungan dari properti gap

Manfaat dari properti gap meliputi hal-hal berikut:.

  • Pengaturan celah yang sederhana: Kode untuk mengatur celah antara elemen anak menjadi lebih sederhana, menghilangkan kebutuhan untuk mengatur margin atau padding tambahan di antara elemen.
  • Adaptasi yang fleksibel: Dengan mudah mendukung desain responsif, memungkinkan penyesuaian desain yang fleksibel.

Properti grid-template-areas 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

Properti grid-template-areas menyediakan cara untuk memberikan nama area dalam wadah grid dan menggunakan nama-nama tersebut untuk dengan mudah memposisikan elemen grid. Menggunakan properti ini memungkinkan pengaturan tata letak yang intuitif secara visual.

Elemen-elemen yang diposisikan pada area bernama yang ditentukan oleh properti grid-template-areas harus memiliki nama yang sama yang ditetapkan dengan properti grid-area. Meskipun elemen mencakup beberapa sel, elemen-elemen tersebut secara otomatis diposisikan dengan benar.

Dalam contoh ini, grid dibuat sebagai berikut:.

  • Pada baris pertama, "header" ditempatkan di sepanjang dua kolom.
  • "Sidebar" ditempatkan di sebelah kiri dan "content" di sebelah kanan pada baris kedua.
  • "Footer" ditempatkan di sepanjang dua kolom pada baris ketiga.

Penggunaan Dasar 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

Pada properti grid-template-areas, nama area ditentukan untuk setiap baris. Dengan menempatkan elemen ke dalam wilayah dengan nama yang ditetapkan, Anda dapat dengan mudah membuat tata letak. - Dalam contoh ini, grid dengan 2 baris dan 3 kolom dibuat, dan setiap sel dinamai area1, area2, dll.

Mendefinisikan sel kosong menggunakan . 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

Jika Anda ingin memiliki sel kosong dalam tata letak Anda, Anda dapat merepresentasikan sel kosong menggunakan . (titik). - Seperti dalam contoh ini, dengan menyertakan . di antara sidebar dan content, kolom kedua menjadi kosong.

Keuntungan dari properti grid-template-areas

Keuntungan dari properti grid-template-areas meliputi poin-poin berikut.

  • Tata letak visual: Memungkinkan Anda mengekspresikan tata letak secara visual, sehingga lebih mudah memahami desain.
  • Pemindahan elemen yang mudah: Anda dapat dengan mudah menyesuaikan tata letak elemen dengan mengubah definisi area di CSS tanpa mengubah HTML.

Catatan

Ketika menggunakan properti grid-template-areas, penting untuk memperhatikan poin-poin berikut.

  • Jumlah nama dalam setiap baris harus sesuai dengan jumlah kolom yang didefinisikan.
  • Memberikan nama yang sama ke beberapa sel akan menggabungkan sel-sel tersebut, tetapi ketika diberikan pada baris atau kolom yang berbeda, area harus berbentuk persegi.

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid adalah salah satu nilai untuk properti display dalam CSS. Menerapkan properti ini membuat elemen berperilaku sebagai container level inline, menciptakan konteks format grid secara internal. Berbeda dengan display: grid, elemen ini berperilaku sebagai elemen inline dalam aliran dokumen.

Kasus penggunaan inline-grid

inline-grid tidak seumum grid, tetapi dapat digunakan secara efektif dalam skenario tertentu.

  • Grid dalam konteks inline: Berguna ketika Anda ingin menempatkan grid di samping konten teks atau elemen inline lainnya. Misalnya, ini berguna ketika struktur grid diperlukan untuk tombol, lencana, label, dll., tetapi Anda ingin menampilkannya secara inline tanpa mengganggu aliran teks.

  • Kontrol tata letak dalam elemen inline: Bahkan ketika tata letak kompleks diperlukan dalam elemen inline seperti tautan, tombol, atau span, inline-grid dapat mengelola struktur internal dengan tata letak grid sambil menghindari tampilan blok.

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

Dalam kasus ini, tombol menampilkan ikon dan teks dalam grid, sambil tetap berada dalam aliran dokumen secara inline.

  • Komponen inline responsif: inline-grid dapat digunakan untuk komponen kecil yang merupakan bagian dari konten inline dan membutuhkan tata letak grid. Misalnya, ini cocok untuk formulir inline, lencana, label produk, dll., di mana Anda ingin menyesuaikan tata letak dengan grid sambil tetap mempertahankan karakteristik inline.

Penyelarasan dan ukuran inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Seperti elemen inline lainnya, inline-grid menghormati penyelarasan vertikal relatif terhadap konten di sekitarnya. Anda dapat mengontrol penyelarasan grid menggunakan properti vertical-align.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • Mengenai ukuran, elemen inline-grid hanya menempati lebar yang diperlukan oleh konten grid-nya. Jika perlu, Anda dapat secara eksplisit mengatur lebar, tinggi, dan dimensi minimum/maksimum.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Tata letak grid itu sendiri juga dapat menentukan ukuran kontainer inline-grid, dan kecenderungan ini lebih kuat saat menggunakan unit fleksibel seperti fr, auto, dan persentase.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS terkait FlexboxProperti CSS Terkait Tata Letak Kolom