Pelajari cara menggunakan kisi CSS untuk membuat tata letak yang kompleks dengan mudah.

Memposisikan elemen pada halaman web bisa menjadi sangat rumit ketika bekerja dengan tata letak yang rumit. Di sinilah grid CSS berguna. Ini adalah sistem tata letak yang dirancang untuk menyederhanakan proses pembuatan tata letak yang kompleks.

Apa manfaatnya bagi Anda? Tidak seperti metode tata letak tradisional yang hanya memungkinkan Anda memposisikan elemen di baris atau kolom, kisi CSS menawarkan yang terbaik dari kedua dunia—pendekatan 2D menggunakan baris dan kolom.

Kontainer dan Item Grid

Anda dapat menerapkan properti kisi CSS ke dua tipe elemen utama: induk dan turunan. Saat Anda menyetel properti tampilan ke "kisi" untuk elemen induk, elemen tersebut akan diubah menjadi wadah kisi. Setiap elemen anak dalam wadah kisi ini menjadi item kisi, mewarisi properti kisi yang diterapkan.

Berikut cara penyajiannya:

Item grid juga bisa menjadi wadah grid. Anda kini dapat mengacu pada tata letak sebagai kisi bertumpuk—kisi di dalam kisi. Kontainer grid utama sekarang disebut sebagai grid luar, sedangkan kontainer item-berubah-grid menjadi grid dalam.

instagram viewer

Masing-masing grid ini beroperasi secara independen satu sama lain, artinya properti yang ditetapkan untuk grid dalam tidak mempengaruhi tata letak grid luar, dan sebaliknya.

Berikut tampilannya:

Menguasai hubungan antara wadah grid dan barang sangat penting membangun tata letak dua dimensi secara efektif.

Perlu diingat bahwa ada properti grid untuk wadah grid, sementara yang lain untuk item grid.

Garis Kisi dan Lintasan

Sebelum Anda mulai menggunakan grid CSS, ada dua istilah utama yang harus Anda pahami:

  1. Garis kisi: Garis kisi mengacu pada garis horizontal dan vertikal yang membentuk kisi dalam tata letak kisi CSS. Mereka menentukan titik awal dan akhir baris dan kolom, membantu mengatur ke mana segala sesuatunya berjalan di grid. Garis-garis ini seperti tepi kotak; mereka memiliki nomor yang membantu Anda mereferensikan elemen saat menentukan posisi. Di sini garis putus-putus merah melambangkannya:
  2. Jalur kisi: Merupakan celah antara garis kisi yang menentukan baris dan kolom. Mereka seperti blok bangunan tata letak grid. Pada gambar di atas, area berwarna dalam setiap item mewakili jalur kisi.

Bayangkan garis kisi dan lintasan sebagai blok penyusun tata letak kisi, seperti garis pada selembar kertas grafik. Jika garis kisi horizontal berpotongan dengan garis kisi vertikal, maka akan terbentuk sel berbentuk kotak. Sel-sel ini bertindak sebagai wadah tempat Anda dapat menempatkan item kisi Anda.

Properti Kontainer Kotak CSS

Ini adalah properti yang dapat Anda terapkan pada wadah kisi untuk mengatur tata letak dan membantu memposisikan elemen di dalamnya. Seperti disebutkan sebelumnya, salah satunya adalah properti tampilan yang disetel ke grid. Berikut selengkapnya:

Templat Kotak

Properti ini menentukan ukuran baris dan kolom. Anda dapat mengukur properti ini menggunakan piksel, persentase, atau satuan pecahan (fr). Anda juga dapat menggunakan kata kunci seperti mobil, minmaks(), Dan mengulang() untuk meningkatkan fleksibilitas.

  • baris templat kisi: Mengatur ketinggian baris.
  • kolom-templat-kisi: Mendefinisikan lebar kolom.

Berikut beberapa contohnya:

Menggunakan Piksel:

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

Menggunakan Persentase:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Menggunakan fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Menggunakan Kata Kunci auto dan minmax():

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Menggunakan repeat() untuk Ukuran yang Konsisten:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Penempatan Otomatis dan Area Templat Grid

Penempatan Otomatis: Penempatan otomatis seperti membiarkan grid memutuskan di mana akan meletakkan item. Jika Anda tidak menentukan posisi pastinya, kisi akan secara otomatis menempatkan item sesuai urutan kemunculannya di markup. Ini berguna ketika Anda memiliki banyak item dan ingin item tersebut memenuhi grid secara merata.

Area Templat Grid: Bayangkan area templat kisi seperti membuat tata letak menggunakan zona bernama. Ini seperti memberi nama ruangan pada denah lantai. Anda dapat mengacu pada nama area ini saat memposisikan item kisi. Contohnya:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Tata letak ini seperti kotak dengan tiga kolom dan empat baris. Ada dua baris untuk area konten utama. Area yang diberi label mencakup "header", "sidebar", "konten", dan "footer". Di bagian selanjutnya, Anda akan mempelajari cara menggunakan label area ini di properti setiap item kisi.

Penyelarasan dalam CSS Grid

Anda dapat menggunakan properti perataan untuk mengontrol posisi item kisi di dalam sel kisinya. Propertinya adalah:

  • membenarkan-item: Mengontrol perataan horizontal item dalam sel kisinya.
    • Nilai-nilai: awal, akhir, tengah, dan regangan.
  • menyelaraskan-item: Mengontrol perataan vertikal item dalam sel kisinya.
    • Nilai-nilai: awal, akhir, tengah, dan regangan.
  • membenarkan konten: Menyelaraskan seluruh grid di dalam wadah sepanjang sumbu horizontal.
    • Nilai-nilai: awal, akhir, tengah, regangan, ruang antara, ruang sekeliling, dan ruang rata.
  • menyelaraskan konten: Menyelaraskan seluruh grid di dalam wadah sepanjang sumbu vertikal.
    • Nilai-nilai: awal, akhir, tengah, regangan, ruang antara, ruang sekeliling, dan ruang rata.

Berikut ini contohnya:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

Dalam contoh ini, item akan dipusatkan secara horizontal dan vertikal di dalam selnya. Ruang akan didistribusikan secara merata di antara kolom-kolom seluruh grid, dan grid akan terpusat secara vertikal di dalam wadah.

Kesenjangan Jaringan

Kesenjangan grid mengacu pada ruang antara baris dan kolom dalam tata letak grid. Ini membantu menciptakan pemisahan visual dan menambahkan ruang di antara item kisi.

Itu celah jaringan properti memungkinkan Anda mengatur jarak antara baris dan kolom. Anda dapat menggunakan berbagai satuan untuk mendefinisikannya, seperti piksel (px), persentase (%), satuan em (em), dan lainnya.

.grid-container {
grid-gap: 20px;
}

Dalam contoh ini, wadah kisi memiliki dua kolom dengan jarak 20 piksel di antaranya. Jarak ini secara visual memisahkan kolom dan menyempurnakan tata letak.

Properti Item Kotak CSS

Berikut adalah beberapa properti utama yang mengontrol perilaku masing-masing item kisi dalam tata letak kisi CSS, beserta contohnya:

awal baris grid dan akhir baris grid:

  • Mendefinisikan garis baris awal dan akhir untuk suatu item.
  • Nilai dapat berupa nomor baris, "span n", atau "auto". 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Kode ini menempatkan Butir Kotak 1 dari baris baris kedua ke baris keempat.

awal kolom grid dan akhir kolom grid:

  • Mendefinisikan baris kolom awal dan akhir untuk suatu item.
  • Nilai dapat berupa nomor baris, "span n" atau "auto". 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Kode ini menempatkan Butir Kotak 2 dari baris kolom pertama ke baris kolom ketiga.

area jaringan:

  • Menentukan ukuran dan posisi item petak di dalam petak dengan mereferensikan garis petak yang diberi nama area templat-grid.
  • Seperti disebutkan sebelumnya, nama area yang telah ditentukan sebelumnya sudah digunakan dengan area templat-grid Properti. Berikut ini contoh cara menggunakannya bersama-sama area jaringan. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Inilah hasilnya:

membenarkan diri sendiri:

  • Menyelaraskan masing-masing item secara horizontal di dalam selnya.
  • Nilai dapat berupa awal, akhir, tengah, dan bentangan. 
.grid-item-5 {
justify-self: center;
}

Kode ini memusatkan secara horizontal Butir Kotak 5 di dalam selnya.

menyelaraskan diri:

  • Sejajarkan masing-masing item secara vertikal di dalam selnya.
  • Nilai dapat berupa awal, akhir, tengah, dan bentangan. 
.grid-item-1 {
align-self: end;
}

Kode ini selaras Butir Kotak 1 ke bagian bawah selnya.

Jangan ragu untuk menggabungkan dan menyesuaikan properti ini untuk membuat tata letak dan tampilan yang Anda inginkan untuk setiap item kisi di Grid CSS Anda.

Membuat Tata Letak Responsif Menggunakan CSS Grids

Menggunakan grid CSS untuk membuat tata letak responsif penting untuk memastikan laman web Anda beradaptasi secara lancar dengan berbagai ukuran layar dan perangkat. Anda dapat menerapkan metode ini:

  • Pertanyaan Media: Anda dapat menggunakan kueri media untuk menerapkan tata letak kisi yang berbeda tergantung pada ukuran layar. Misalnya, Anda mungkin perlu mengatur ulang item kisi atau menyesuaikan lebar kolom untuk layar yang lebih kecil.
  • Unit Fleksibel: Gunakan satuan relatif seperti persentase dan fr untuk memungkinkan item kisi dan kolom menyesuaikan secara proporsional dengan ruang yang tersedia.
  • minmaks(): Menggunakan minmaks() berfungsi untuk menentukan rentang ukuran kolom atau baris kisi. Ini memastikan bahwa item tidak akan tampak terlalu kecil atau terlalu besar di layar yang berbeda.

Ingatlah untuk menyesuaikan kolom dan elemen lain seperti jarak antara item kisi, ukuran font, dan margin. Ini memastikan tata letak yang konsisten dan dirancang dengan baik yang berfungsi dengan baik di berbagai perangkat.

Jelajahi Kemungkinan Tata Letak Grid CSS

Merangkul fleksibilitas dan kekuatan grid CSS akan memungkinkan Anda membuat tata letak yang tidak hanya tampak hebat tetapi juga beradaptasi secara mulus dengan tuntutan desain web modern. Jadi, selami dunia grid, jelajahi berbagai kemungkinan, dan tingkatkan keterampilan pengembangan web Anda.

Saat mempelajari sistem tata letak, Anda mungkin ingin membandingkan metode tata letak lainnya dengan kisi CSS. Anda dapat melakukannya dengan modul CSS Flexbox. Ini akan membantu Anda belajar mengambil keputusan saat mengerjakan suatu proyek.