Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Modul Tata Letak Kotak CSS


tajuk

Tidak bisa

Utama

Benar

catatan kaki


Tata Letak Kotak

Modul Tata Letak Grid CSS menawarkan sistem tata letak berbasis grid, dengan baris dan kolom, sehingga memudahkan untuk mendesain halaman web tanpa harus menggunakan float dan positioning.


Dukungan Peramban

Properti grid didukung di semua browser modern.

57.0 16.0 52.0 10 44

Elemen kisi

Tata letak kisi terdiri dari elemen induk, dengan satu atau lebih elemen anak.

Contoh

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

1

2

3

4

5

6

7

8

9


Tampilkan Properti

Elemen HTML menjadi wadah kisi ketika displaypropertinya disetel ke gridatau inline-grid.

Contoh

.grid-container {
  display: grid;
}

Contoh

.grid-container {
  display: inline-grid;
}

Semua anak langsung dari wadah kotak secara otomatis menjadi item kotak .


Kolom Grid

Garis vertikal item grid disebut kolom .


Baris Grid

Garis horizontal item kisi disebut baris .


Kesenjangan Grid

Spasi antara setiap kolom/baris disebut gap .

Anda dapat menyesuaikan ukuran celah dengan menggunakan salah satu properti berikut:

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

Contoh

Properti grid-column-gapmengatur jarak antar kolom:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

Contoh

Properti grid-row-gapmenetapkan jarak antara baris:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

Contoh

Properti grid-gapadalah properti singkatan untuk grid-row-gapdan grid-column-gapproperti:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Contoh

Properti grid-gapini juga dapat digunakan untuk mengatur celah baris dan celah kolom dalam satu nilai:

.grid-container {
  display: grid;
  grid-gap: 50px;
}


Garis Grid

Garis antar kolom disebut garis kolom .

Garis antar baris disebut baris baris .

Lihat nomor baris saat menempatkan item kisi dalam wadah kisi:

Contoh

Tempatkan item kotak di baris kolom 1, dan biarkan berakhir di baris kolom 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Contoh

Tempatkan item kotak di baris baris 1, dan biarkan berakhir di baris baris 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}


Semua Properti Grid CSS

Property Description
column-gap Specifies the gap between the columns
gap A shorthand property for the row-gap and the column-gap properties
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size
grid-column A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end Specifies where to end the grid item
grid-column-gap Specifies the size of the gap between columns
grid-column-start Specifies where to start the grid item
grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end Specifies where to end the grid item
grid-row-gap Specifies the size of the gap between rows
grid-row-start Specifies where to start the grid item
grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas Specifies how to display columns and rows, using named grid items
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout
row-gap Specifies the gap between the grid rows