Kursus IT Dasar CSS 031_Tata letak grid Grid

Tata letak grid Grid

Grid terdiri dari serangkaian garis horizontal dan vertikal yang membentuk pola tata letak. Berdasarkan grid, kita dapat mengatur elemen desain, membantu kita mendesain serangkaian halaman dengan elemen posisi dan lebar tetap, membuat halaman website kita lebih seragam.

Sebuah grid biasanya memiliki banyak kolom (columns) dan baris (rows), serta spasi antara baris dan kolom, spasi ini umumnya disebut selokan (gutter).

Efek contoh

Konsep dasar

Tata letak Grid terdiri dari konsep dasar berikut:

Kontainer grid (grid container): Tata letak grid terdiri dari kontainer grid dan item grid. Kontainer grid adalah wadah yang menempatkan item grid ke dalam grid. Kontainer grid dapat berupa elemen apa pun, tetapi biasanya menggunakan elemen div.
Item grid (grid item): Item grid adalah elemen yang ditempatkan dalam kontainer grid. Item grid dapat berupa elemen apa pun, tetapi biasanya menggunakan elemen div.
Garis grid (grid line): Garis grid adalah garis yang membagi kontainer grid menjadi baris dan kolom. Garis grid dapat berupa garis horizontal atau vertikal.
Kolom grid (grid column): Kolom grid adalah garis vertikal dalam kontainer grid.
Baris grid (grid row): Baris grid adalah garis horizontal dalam kontainer grid.

Properti umum

Properti kontainer grid

Kontainer grid memiliki properti berikut untuk mengontrol tata letak grid:

display: Mengatur mode tampilan kontainer grid. Kontainer grid harus diatur ke display: grid atau display: inline-grid untuk menggunakan tata letak grid.
grid-template-columns: Mengatur jumlah kolom dan lebar kolom kontainer grid (menggunakan unit seperti fr, px, em, dll.).
grid-template-rows: Mengatur jumlah baris dan tinggi baris kontainer grid (menggunakan unit seperti fr, px, em, dll.).
grid-template: Mengatur grid-template-columns dan grid-template-rows secara bersamaan.
grid-auto-columns: Mengatur lebar kolom kontainer grid.
grid-auto-rows: Mengatur tinggi baris kontainer grid.

Properti item grid

Item grid memiliki properti berikut untuk mengontrol tata letak item grid dalam grid:

grid-column: Mengatur kolom tempat item grid berada.
grid-row: Mengatur baris tempat item grid berada.
grid-column-start: Mengatur posisi awal item grid dalam kolom.
grid-column-end: Mengatur posisi akhir item grid dalam kolom.
grid-row-start: Mengatur posisi awal item grid dalam baris.
grid-row-end: Mengatur posisi akhir item grid dalam baris.
grid-area: Mengatur area tempat item grid berada.
grid-gap: Mengatur jarak antara garis grid.

Tata letak grid

Mendefinisikan lebar kolom dan tinggi baris tetap dan adaptif

Contoh:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* Kolom pertama 100px, kolom kedua 200px, ruang tersisa dialokasikan ke kolom adaptif */
5
    grid-template-rows: 100px 200px auto;
6
    /* Baris pertama 100px, baris kedua 200px, ruang tersisa dialokasikan ke baris adaptif */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demo Grid</div>
3
        <div class="item">Demo Grid</div>
4
        <div class="item">Demo Grid</div>
5
        <div class="item">Demo Grid</div>
6
        <div class="item">Demo Grid</div>
7
        <div class="item">Demo Grid</div>
8
        <div class="item">Demo Grid</div>
9
        <div class="item">Demo Grid</div>
10
        <div class="item">Demo Grid</div>
11
    </div>

Efek:

Efek contoh Menggunakan persentase untuk mendefinisikan lebar kolom dan tinggi baris

Contoh:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* Kolom pertama menempati 30%, kolom kedua menempati dua bagian ruang tersisa, kolom ketiga menempati satu bagian ruang tersisa */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* Baris pertama menempati 30%, baris kedua menempati dua bagian ruang tersisa, baris ketiga menempati satu bagian ruang tersisa */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demo Grid</div>
3
        <div class="item">Demo Grid</div>
4
        <div class="item">Demo Grid</div>
5
        <div class="item">Demo Grid</div>
6
        <div class="item">Demo Grid</div>
7
        <div class="item">Demo Grid</div>
8
        <div class="item">Demo Grid</div>
9
        <div class="item">Demo Grid</div>
10
        <div class="item">Demo Grid</div>
11
    </div>

Efek:

Efek contoh Pembagian rata (alokasi rata-rata) lebar kolom dan tinggi baris

Contoh:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Tiga kolom sama, setiap kolom menempati satu bagian ruang tersisa */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* Tiga baris sama, setiap baris menempati satu bagian ruang tersisa */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demo Grid</div>
3
        <div class="item">Demo Grid</div>
4
        <div class="item">Demo Grid</div>
5
        <div class="item">Demo Grid</div>
6
        <div class="item">Demo Grid</div>
7
        <div class="item">Demo Grid</div>
8
        <div class="item">Demo Grid</div>
9
        <div class="item">Demo Grid</div>
10
        <div class="item">Demo Grid</div>
11
    </div>

Efek:

Efek contoh Menggunakan minmax untuk mendefinisikan lebar dan tinggi minimum dan maksimum kolom dan baris

Contoh:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* Kolom pertama lebar minimum 100px, menempati satu bagian ruang tersisa; kolom kedua lebar minimum 200px, menempati dua bagian ruang tersisa */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* Baris pertama tinggi minimum 100px, menempati satu bagian ruang tersisa; baris kedua tinggi minimum 200px, menempati dua bagian ruang tersisa */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demo Grid</div>
3
        <div class="item">Demo Grid</div>
4
        <div class="item">Demo Grid</div>
5
        <div class="item">Demo Grid</div>
6
    </div>

Efek:

Efek contoh

Jarak grid

Jarak grid dikontrol oleh dua properti grid-row-gap dan grid-column-gap. Selain itu, CSS Grid Level 2 memperkenalkan properti gap, yang dapat mengontrol grid-row-gap dan grid-column-gap secara bersamaan.

Contoh:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* Jarak baris 50px */
6
    grid-column-gap: 30px; /* Jarak kolom 30px */
7
    /* gap: 50px 30px; Jarak baris 50px, jarak kolom 30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">Demo Grid</div>
3
        <div class="item">Demo Grid</div>
4
        <div class="item">Demo Grid</div>
5
        <div class="item">Demo Grid</div>
6
        <div class="item">Demo Grid</div>
7
        <div class="item">Demo Grid</div>
8
    </div>

Efek:

Efek contoh

Penempatan grid

Penempatan grid biasanya mengacu pada penggunaan properti seperti grid-column, grid-row, dan grid-area untuk memposisikan item dalam tata letak grid. Properti ini digunakan untuk menentukan kolom dan baris yang ditempati item dalam grid, atau untuk langsung menentukan area tempat item berada.

grid-column adalah properti untuk mengatur kolom yang dilewati oleh item grid. Ini adalah singkatan dari grid-column-start dan grid-column-end. Dengan grid-column, Anda dapat lebih mudah mendefinisikan posisi dan jumlah kolom yang dilewati oleh item grid dalam arah horizontal.
grid-row adalah properti untuk mengatur baris yang dilewati oleh item grid. Ini adalah singkatan dari grid-row-start dan grid-row-end. Dengan grid-row, Anda dapat lebih mudah mendefinisikan posisi dan jumlah baris yang dilewati oleh item grid dalam arah vertikal.
Properti grid-area adalah properti singkat untuk mengatur properti grid-row-start, grid-column-start, grid-row-end, dan grid-column-end secara bersamaan. Dengan grid-area, Anda dapat lebih intuitif mendefinisikan posisi dan ukuran item grid dalam tata letak grid.

Contoh:

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Mendefinisikan 3 kolom, setiap kolom menempati 1 bagian ruang */
5
    grid-template-rows: repeat(2, 150px);
6
    /* Mendefinisikan 2 baris, setiap baris memiliki tinggi 150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* Penempatan dengan grid-column dan grid-row */
17
.item1 {
18
    grid-column: 1 / 3; /* Dari kolom 1 hingga kolom 3 (1+2 kolom) */
19
    grid-row: 1 / 2;    /* Dari baris 1 hingga baris 2 (1 baris) */
20
}
21
/* Penempatan dengan grid-area */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* Dari baris 2, kolom 2 hingga baris 3, kolom 4 (2 baris) (2+3 kolom) */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

Efek:

Efek contoh

Contoh:

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* Mendefinisikan dua kolom, kolom pertama menempati satu bagian, kolom kedua menempati dua bagian */
10
    grid-template-rows: auto;
11
    /* Mendefinisikan tinggi baris, baris pertama dan ketiga tinggi ditentukan oleh konten, baris kedua menempati ruang tersisa */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* Mendefinisikan tata letak area, setiap area diwakili oleh string, spasi memisahkan sel, baris baru mewakili baris baru */
17
    min-height: 100vh;
18
    /* Mengatur tinggi minimum, memastikan footer tetap terlihat bahkan ketika tinggi konten lebih kecil dari viewport */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* Menempatkan .header ke area bernama "header" */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* Menempatkan .sidebar ke area bernama "sidebar" */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* Menempatkan .main ke area bernama "main" */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* Menempatkan .footer ke area bernama "footer" */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>

Efek:

Efek contoh

Tata letak grid Grid

Konsep dasar

Properti umum

Tata letak grid

Jarak grid

Penempatan grid

Komentar