CSS Grid

 CSS Grid

Ubah elemen HTML apa pun menjadi wadah grid dengan menyetel propertinya displayke grid. Ini memberi Anda kemampuan untuk menggunakan semua properti lain yang terkait dengan CSS Grid.

Catatan: Dalam CSS Grid, elemen induk disebut sebagai wadah dan anaknya disebut item .

Membuat elemen grid saja tidak akan membantu Anda. Anda juga perlu menentukan struktur grid. Untuk menambahkan beberapa kolom ke grid, gunakan properti grid-template-columnspada wadah grid seperti yang ditunjukkan di bawah ini:

.container {
  display: grid;
  grid-template-columns: 50px 50px;
}

Ini akan memberi kisi Anda dua kolom yang masing-masing lebarnya 50 piksel. Jumlah parameter yang diberikan ke grid-template-columnsproperti menunjukkan jumlah kolom dalam kisi, dan nilai setiap parameter menunjukkan lebar setiap kolom.

Kotak yang Anda buat pada tantangan terakhir akan mengatur jumlah baris secara otomatis. Untuk menyesuaikan baris secara manual, gunakan grid-template-rowsproperti dengan cara yang sama seperti yang Anda gunakan grid-template-columnspada tantangan sebelumnya.

~Anda dapat menggunakan satuan absolut dan relatif seperti pxdan emdi CSS Grid untuk menentukan ukuran baris dan kolom. Anda juga dapat menggunakan satuan ini:

fr: mengatur kolom atau baris ke sebagian ruang yang tersedia,

auto: mengatur kolom atau baris ke lebar atau tinggi kontennya secara otomatis,

%: menyesuaikan kolom atau baris dengan persentase lebar wadahnya.

Berikut kode yang menghasilkan output dalam pratinjau:

grid-template-columns: auto 50px 10% 2fr 1fr;

Potongan kode ini membuat lima kolom. Kolom pertama selebar kontennya, kolom kedua selebar 50 piksel, kolom ketiga selebar 10% dari wadahnya, dan untuk dua kolom terakhir; ruang yang tersisa dibagi menjadi tiga bagian, dua dialokasikan untuk kolom keempat, dan satu untuk kolom kelima.

~Sejauh ini, pada kisi-kisi yang telah Anda buat, semua kolom saling rapat. Terkadang Anda menginginkan celah di antara kolom. Untuk menambahkan celah di antara kolom, gunakan properti grid-column-gapseperti ini:

grid-column-gap: 10px;

Ini menciptakan ruang kosong sebesar 10 piksel di antara semua kolom kita. (samping)

~Anda dapat menambahkan celah di antara baris-baris kisi dengan grid-row-gapcara yang sama seperti Anda menambahkan celah di antara kolom-kolom pada tantangan sebelumnya. (atas bawah)

~grid-gapadalah properti singkatan untuk grid-row-gapdan grid-column-gapdari dua tantangan sebelumnya yang lebih mudah digunakan. Jika grid-gapmemiliki satu nilai, maka akan dibuat jarak antara semua baris dan kolom. Namun, jika ada dua nilai, maka akan menggunakan nilai pertama untuk mengatur jarak antara baris dan nilai kedua untuk kolom.

grid-gap: 10px 20px;

(samping dan atas bawah (samping 20px atas bawah 10px))

~Sampai di sini, semua properti yang telah dibahas adalah untuk kontainer grid. grid-columnProperti ini adalah yang pertama untuk digunakan pada item grid itu sendiri.

Garis-garis horizontal dan vertikal hipotetis yang membentuk kisi-kisi disebut garis . Garis-garis ini diberi nomor mulai dari 1 di sudut kiri atas kisi-kisi dan bergerak ke kanan untuk kolom dan ke bawah untuk baris, terus ke atas.

Seperti inilah tampilan garis pada grid 3x3:

Untuk mengontrol jumlah kolom yang akan dipakai suatu item, Anda dapat menggunakan grid-columnproperti tersebut bersama dengan nomor baris yang Anda inginkan untuk memulai dan mengakhiri item tersebut.

Berikut ini contohnya:

grid-column: 1 / 3;

Ini akan membuat item mulai dari garis vertikal pertama kisi di sebelah kiri dan membentang hingga baris ke-3 kisi, yang menghabiskan dua kolom.

~Tentu saja, Anda dapat membuat item menggunakan beberapa baris seperti halnya yang dapat Anda lakukan dengan kolom. Anda menentukan garis horizontal tempat item dimulai dan diakhiri menggunakan grid-rowproperti pada item kisi.

~Dalam CSS Grid, konten setiap item terletak di kotak yang disebut sel . Anda dapat menyelaraskan posisi konten di dalam selnya secara horizontal menggunakan justify-selfproperti pada item grid. Secara default, properti ini memiliki nilai stretch, yang akan membuat konten mengisi seluruh lebar sel. Properti CSS Grid ini menerima nilai lain juga:

start: menyelaraskan konten di sebelah kiri sel,

center: menyelaraskan konten di tengah sel,

end: menyelaraskan konten di sebelah kanan sel.

~Sama seperti Anda dapat menyelaraskan item secara horizontal, ada cara untuk menyelaraskan item secara vertikal juga. Untuk melakukannya, Anda menggunakan align-selfproperti pada item. Properti ini menerima semua nilai yang sama seperti justify-selfdari tantangan terakhir.

~Terkadang Anda ingin semua item di Grid CSS Anda memiliki perataan yang sama. Anda dapat menggunakan properti yang telah dipelajari sebelumnya dan meratakannya satu per satu, atau Anda dapat meratakannya sekaligus secara horizontal dengan menggunakan justify-itemspada wadah grid Anda. Properti ini dapat menerima semua nilai yang sama yang telah Anda pelajari pada dua tantangan sebelumnya, perbedaannya adalah properti ini akan memindahkan semua item di grid kita ke perataan yang diinginkan.

~Menggunakan align-itemsproperti pada wadah grid akan mengatur perataan vertikal untuk semua item di grid kita.

~Membagi Grid Menjadi Template Area

Anda dapat mengelompokkan sel-sel grid Anda menjadi satu area dan memberi area tersebut nama khusus. Lakukan ini dengan menggunakan grid-template-areaswadah seperti ini:

grid-template-areas:
  'header header header'
  'advert content content'
  'advert footer footer';

Kode di atas mengelompokkan sel-sel grid menjadi empat area: header, advert, content, dan footer. Setiap kata mewakili sel dan setiap pasangan tanda kutip mewakili baris.

~Tempatkan Item di Area Grid Menggunakan Properti grid-area

Setelah membuat templat area untuk wadah grid Anda, seperti yang ditunjukkan pada tantangan sebelumnya, Anda dapat menempatkan item di area kustom Anda dengan merujuk pada nama yang Anda berikan. Untuk melakukannya, Anda menggunakan grid-areaproperti pada item seperti ini:

.item1 {
  grid-area: header;
}

Ini memberi tahu grid bahwa Anda ingin item1kelas berada di area bernama header. Dalam kasus ini, item akan menggunakan seluruh baris teratas karena seluruh baris tersebut dinamai sebagai headerarea.

~Gunakan grid-area Tanpa Membuat Template Area

Properti grid-areayang Anda pelajari di tantangan terakhir dapat digunakan dengan cara lain. Jika grid Anda tidak memiliki templat area untuk referensi, Anda dapat membuat area secara otomatis untuk item yang akan ditempatkan seperti ini:

item1 {
  grid-area: 1/1/2/4;
}

Ini menggunakan nomor baris yang telah Anda pelajari sebelumnya untuk menentukan di mana area untuk item ini akan berada. Angka-angka dalam contoh di atas mewakili nilai-nilai berikut:

grid-area: horizontal line to start at / vertical line to start at / horizontal
  line to end at / vertical line to end at;

Jadi item pada contoh akan menggunakan baris antara baris 1 dan 2, dan kolom antara baris 1 dan 4.

RUMUS=HORIZONTAL,VERTIKAL,HORIZONAL,VERTIKAL

contoh=dengan menggunakan grid-areaproperti, tempatkan elemen dengan item5kelas di antara garis horizontal ketiga dan keempat dan di antara garis vertikal pertama dan keempat.

SOLUSI= 3/1/4/4

~Mengurangi Pengulangan Menggunakan Fungsi Ulang

Saat Anda menggunakan grid-template-columnsdan grid-template-rowsuntuk menentukan struktur kisi, Anda memasukkan nilai untuk setiap baris atau kolom yang Anda buat.

Misalnya Anda menginginkan kisi dengan 100 baris dengan tinggi yang sama. Tidaklah praktis untuk memasukkan 100 nilai satu per satu. Untungnya, ada cara yang lebih baik - dengan menggunakan repeatfungsi untuk menentukan berapa kali Anda ingin kolom atau baris Anda diulang, diikuti dengan koma dan nilai yang ingin Anda ulangi.

Berikut ini contoh yang akan membuat kisi 100 baris, tiap baris tingginya 50 piksel.

grid-template-rows: repeat(100, 50px);

Anda juga dapat mengulang beberapa nilai dengan fungsi repeat dan menyisipkan fungsi tersebut di antara nilai-nilai lain saat menentukan struktur grid. Berikut tampilannya:

grid-template-columns: repeat(2, 1fr 50px) 20px;

Ini diterjemahkan menjadi:

grid-template-columns: 1fr 50px 1fr 50px 20px;

Catatan: diulang 1fr 50pxdua kali diikuti oleh 20px.

~Batasi Ukuran Item Menggunakan Fungsi Minmax

Ada fungsi bawaan lain yang dapat digunakan dengan grid-template-columnsdan grid-template-rowsdisebut minmax. Fungsi ini digunakan untuk membatasi ukuran item saat wadah grid berubah ukuran. Untuk melakukan ini, Anda perlu menentukan rentang ukuran yang dapat diterima untuk item Anda. Berikut ini contohnya:

grid-template-columns: 100px minmax(50px, 200px);

Pada kode di atas, grid-template-columnsdiatur untuk membuat dua kolom; yang pertama lebarnya 100px, dan yang kedua memiliki lebar minimum 50px dan lebar maksimum 200px.

PERINTAH=Dengan menggunakan minmaxfungsi tersebut, ganti 1frdalam repeatfungsi dengan ukuran kolom yang memiliki lebar minimum 90pxdan lebar maksimum 1fr, lalu ubah ukuran panel pratinjau untuk melihat efeknya.

SOLUSI= grid-template-columns: repeat(3, minmax (90px, 1fr));

~Buat Tata Letak Fleksibel Menggunakan IsiOtomatis

Fungsi pengulangan dilengkapi dengan opsi yang disebut pengisian otomatis . Fitur ini memungkinkan Anda untuk secara otomatis memasukkan sebanyak mungkin baris atau kolom dengan ukuran yang diinginkan, tergantung pada ukuran wadah. Anda dapat membuat tata letak yang fleksibel saat menggabungkan auto-filldengan minmax, seperti ini:

repeat(auto-fill, minmax(60px, 1fr));

Saat wadah berubah ukuran, pengaturan ini akan terus menyisipkan kolom 60px dan meregangkannya hingga dapat menyisipkan kolom lain. Catatan: Jika wadah Anda tidak dapat memuat semua item dalam satu baris, wadah akan memindahkannya ke baris baru.

---

PERINTAH=

Pada kotak pertama, gunakan auto-fillwith repeatuntuk mengisi kotak dengan kolom yang memiliki lebar minimum 60pxdan maksimum 1fr. Lalu ubah ukuran pratinjau untuk melihat aksi pengisian otomatis.

SOLUSI= grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

~Buat Tata Letak Fleksibel Menggunakan Penyesuaian Otomatis

auto-fitbekerja hampir sama dengan auto-fill. Satu-satunya perbedaan adalah ketika ukuran kontainer melebihi ukuran semua item yang digabungkan, auto-fillakan terus memasukkan baris atau kolom kosong dan mendorong item Anda ke samping, sementara auto-fitmenciutkan baris atau kolom kosong tersebut dan meregangkan item Anda agar sesuai dengan ukuran kontainer.

Catatan: Jika wadah Anda tidak dapat memuat semua barang dalam satu baris, wadah tersebut akan memindahkan barang-barang tersebut ke baris baru.

~Gunakan Media Query untuk Membuat Tata Letak Responsif

CSS Grid dapat menjadi cara mudah untuk membuat situs Anda lebih responsif dengan menggunakan kueri media untuk mengatur ulang area grid, mengubah dimensi grid, dan mengatur ulang penempatan item.

Dalam pratinjau, saat lebar area pandang 300 piksel atau lebih, jumlah kolom berubah dari 1 menjadi 2. Area iklan kemudian menempati kolom kiri sepenuhnya.

PERINTAH=

Bila viewport berukuran 400pxatau lebih, containerkelas harus memiliki grid-template-areasproperti di mana area header dan footer menempati baris atas dan bawah masing-masing, sedangkan iklan dan konten menempati kolom kiri dan kanan baris tengah.

SOLUSI=

 @media (min-width: 400px) {

    .container {

      grid-template-areas:

      /* Only change code below this line */

        'header header'

        'advert content'

        ' footer footer';

      /* Only change code above this line */

    }

  }

~Buat Grid dalam Grid

Mengubah elemen menjadi grid hanya memengaruhi perilaku turunan langsungnya. Jadi, dengan mengubah turunan langsung menjadi grid, Anda memiliki grid di dalam grid.

Misalnya, dengan menetapkan properti displaydan grid-template-columnselemen dengan item3kelas, Anda membuat kisi di dalam kisi Anda.

PERINTAH=

• 1. item3kelas harus memiliki grid-template-columnsproperti dengan nilai autodan 1frsebagai.
• Menunggu :2. item3kelas harus memiliki displayproperti dengan nilai grid.
• SOLUSI=
• .item3 {

      background: PaleTurquoise;

      grid-area: content;

      /* Only change code below this line */

  grid-template-columns:auto 1fr;

  display: grid;

      /* Only change code above this line */

    }

-------

Subscribe to receive free email updates: