Pada artikel ini, kita melihat sekilas grid dan bagaimana Anda sanggup menggunakannya untuk membuat halaman web. Ada banyak aspek tata letak grid CSS. Istilah grid akan tercantum di sini, bersama dengan deskripsi singkat dan pola kotak pada simpulan artikel ini, beserta arahan untuk membuatnya.
Berikut yaitu banyak sekali komponen grid:
grid: Tata letak grid yaitu rangkaian garis horisontal dan vertikal berpotongan yang membagi ruang peti kemas ke area grid. Ini terdiri dari item grid. Ada dua pasang garis grid. Satu set yaitu sumbu kolom; yang lainnya yaitu untuk baris, memilih sumbu inline.
Inilah gambar dari tampilannya (dari CSS Snapshot 2017).
Gambar 1. Layout Grid
area grid: Area grid dipakai untuk meletakkan kotak grid. Ini terdiri dari sel grid dan terikat oleh empat garis grid, masing-masing di sisi area grid.
Sel grid: Sel grid terbentuk dimana barisan grid dan kolom saling berpotongan. Ini yaitu unit terkecil dari sebuah grid.
kolom grid: Kolom berjalan sepanjang sumbu blok grid.
wadah grid: Wadah kotak berisi pemformatan untuk isinya. Garis grid membentuk batas setiap blok berisi item grid.
konteks format grid: Sebuah wadah grid membuat konteks format grid baru.
item grid: Ini yaitu kotak yang mewakili isi arusnya.
algoritma penempatan item grid: Algoritma penempatan item grid menempatkan posisi otomatis item grid ke posisi yang pasti. Ini memastikan setiap item grid diletakkan di dalam area grid yang terdefinisi dengan baik.
Tata letak grid: Dalam grid, ada dua set garis grid, terdiri dari kolom yang berjalan di sepanjang sumbu blok dan satu set baris yang berjalan di sepanjang sumbu inline.
Tingkat grid: Item kotak yaitu kotak tingkat grid. Ini yaitu bab dari konteks pemformatan kotak kontainer.
urutan grid: Urutan grid yaitu bagaimana item grid ditemukan dikala bergerak melalui sel grid. Jika dua item ditemui sekaligus, mereka terlihat sesuai urutan kemunculannya.
penempatan grid: Lokasi area grid yaitu penempatan. Ini ditentukan oleh posisi dan rentang grid.
properti penempatan grid: Ditulis di longhand, ini adalah: grid-row-start, grid-row-end, grid-column-start, grid-column-end. Versi singkatannya adalah: grid-row, grid-column, dan grid-area-allow. Ini memungkinkan pengembang memilih penempatan item grid.
Posisi grid: Ini sanggup jadi niscaya (secara eksplisit ditentukan) atau otomatis (ditentukan oleh penempatan otomatis).
Baris grid: Ini yaitu penempatan sepanjang sumbu inline.
Baris baris grid: Garis grid yaitu garis horizontal dan vertikal dalam kotak dan ada di kedua sisi kolom atau baris. Anda sanggup memakai nomor untuk merujuk ke mereka, atau dengan nama yang ditentukan oleh penulis.
Algoritma grid sizing: Algoritma grid sizing, memilih ukuran semua track grid dan keseluruhan grid. Setiap lintasan telah memilih fungsi ukuran minimum dan maksimum. Setiap fungsi ukuran adalah:
Dalam pola ini, Adobe Dreamweaver digunakan. Pilihan lainnya yaitu Bootstrap, yang mengatakan banyak fleksibilitas.
Seperti yang Anda lihat, grid yaitu salah satu blok bangunan tata letak CSS yang paling penting alasannya yaitu mereka mengatakan banyak kontrol atas tampilan dan nuansa tata letak. Kisi cairan akan memberi Anda hasil terbaik alasannya yaitu sanggup menskalakan secara proporsional.
Tentang Penulis
Nathan Segal telah bekerja sebagai penulis lepas selama 18 tahun. Pada dikala itu, beliau telah menerbitkan lebih dari 1.000 artikel dan telah menulis 9 buku. Anda sanggup mencar ilmu lebih banyak wacana beliau di http://NathanSegal.org.
Sumber Artikel : https://www.htmlgoodies.com/beyond/css/using-the-css-grid-layout-to-create-web-pages.html
Berikut yaitu banyak sekali komponen grid:
grid: Tata letak grid yaitu rangkaian garis horisontal dan vertikal berpotongan yang membagi ruang peti kemas ke area grid. Ini terdiri dari item grid. Ada dua pasang garis grid. Satu set yaitu sumbu kolom; yang lainnya yaitu untuk baris, memilih sumbu inline.
Inilah gambar dari tampilannya (dari CSS Snapshot 2017).
Gambar 1. Layout Grid
Sel grid: Sel grid terbentuk dimana barisan grid dan kolom saling berpotongan. Ini yaitu unit terkecil dari sebuah grid.
kolom grid: Kolom berjalan sepanjang sumbu blok grid.
wadah grid: Wadah kotak berisi pemformatan untuk isinya. Garis grid membentuk batas setiap blok berisi item grid.
konteks format grid: Sebuah wadah grid membuat konteks format grid baru.
item grid: Ini yaitu kotak yang mewakili isi arusnya.
algoritma penempatan item grid: Algoritma penempatan item grid menempatkan posisi otomatis item grid ke posisi yang pasti. Ini memastikan setiap item grid diletakkan di dalam area grid yang terdefinisi dengan baik.
Tata letak grid: Dalam grid, ada dua set garis grid, terdiri dari kolom yang berjalan di sepanjang sumbu blok dan satu set baris yang berjalan di sepanjang sumbu inline.
Tingkat grid: Item kotak yaitu kotak tingkat grid. Ini yaitu bab dari konteks pemformatan kotak kontainer.
urutan grid: Urutan grid yaitu bagaimana item grid ditemukan dikala bergerak melalui sel grid. Jika dua item ditemui sekaligus, mereka terlihat sesuai urutan kemunculannya.
penempatan grid: Lokasi area grid yaitu penempatan. Ini ditentukan oleh posisi dan rentang grid.
properti penempatan grid: Ditulis di longhand, ini adalah: grid-row-start, grid-row-end, grid-column-start, grid-column-end. Versi singkatannya adalah: grid-row, grid-column, dan grid-area-allow. Ini memungkinkan pengembang memilih penempatan item grid.
Posisi grid: Ini sanggup jadi niscaya (secara eksplisit ditentukan) atau otomatis (ditentukan oleh penempatan otomatis).
Baris grid: Ini yaitu penempatan sepanjang sumbu inline.
Baris baris grid: Garis grid yaitu garis horizontal dan vertikal dalam kotak dan ada di kedua sisi kolom atau baris. Anda sanggup memakai nomor untuk merujuk ke mereka, atau dengan nama yang ditentukan oleh penulis.
Algoritma grid sizing: Algoritma grid sizing, memilih ukuran semua track grid dan keseluruhan grid. Setiap lintasan telah memilih fungsi ukuran minimum dan maksimum. Setiap fungsi ukuran adalah:
- Fungsi ukuran tetap (<length> atau putolvable <percentage>).
- Fungsi ukuran intrinsik (min-content, max-content, auto, fit-content ()).
- Fungsi ukuran fleksibel (<flex>).
Rentang grid: Ini yaitu berapa banyak trek dalam item grid. Rentang selalu niscaya dan defaultnya yaitu 1 kalau tidak sanggup ditentukan.
lintasan grid: Ini yaitu istilah umum untuk kolom grid atau baris grid. Ini yaitu ruang antara dua garis grid yang berdekatan. Setiap jalur grid berisi fungsi ukuran yang mengontrol lebar dan tinggi kolom atau baris dan seberapa jauh jarak garis batasnya.
Berikut yaitu pola arahan yang dipakai untuk membuat grid sederhana. Ini dibentuk memakai Adobe Dreamweaver dan merupakan salah satu template yang mereka tawarkan.
Kode 1. Kode yang dipakai untuk membuat grid sederhana
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Light Theme</title> <link href="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/css/simpleGridTemplate.css" rel="stylesheet" type="text/css"> </head> <body> <!-- Main Container --> <div class="container"> <!-- Header --> <header class="header"> <h4 class="logo">GRID</h4> </header> <!-- Hero Section --> <section class="intro"> <div class="column"> <h3>JOHN DOE</h3> <img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/profile.png" alt=" kita melihat sekilas grid dan bagaimana Anda sanggup menggunakannya untuk membuat halaman we Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web" class="profile"> </div> <div class="column"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</p> </div> </section> <!-- Stats Gallery Section --> <div class="gallery"> <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt=" kita melihat sekilas grid dan bagaimana Anda sanggup menggunakannya untuk membuat halaman we Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web" width="2000" class="cards"/></a> <h4>TITLE</h4> <p class="tag">HTML, CSS, JS, WordPress</p> <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt=" kita melihat sekilas grid dan bagaimana Anda sanggup menggunakannya untuk membuat halaman we Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web" width="2000" class="cards"/></a> <h4>TITLE</h4> <p class="tag">HTML, CSS, JS, WordPress</p> <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt=" kita melihat sekilas grid dan bagaimana Anda sanggup menggunakannya untuk membuat halaman we Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web" width="2000" class="cards"/></a> <h4>TITLE</h4> <p class="tag">HTML, CSS, JS, WordPress</p> <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt=" kita melihat sekilas grid dan bagaimana Anda sanggup menggunakannya untuk membuat halaman we Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web" width="2000" class="cards"/></a> <h4>TITLE</h4> <p class="tag">HTML, CSS, JS, WordPress</p> <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="gallery"> <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt=" kita melihat sekilas grid dan bagaimana Anda sanggup menggunakannya untuk membuat halaman we Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web" width="2000" class="cards"/></a> <h4>TITLE</h4> <p class="tag">HTML, CSS, JS, WordPress</p> <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt=" kita melihat sekilas grid dan bagaimana Anda sanggup menggunakannya untuk membuat halaman we Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web" width="2000" class="cards"/></a> <h4>TITLE</h4> <p class="tag">HTML, CSS, JS, WordPress</p> <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt=" kita melihat sekilas grid dan bagaimana Anda sanggup menggunakannya untuk membuat halaman we Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web" width="2000" class="cards"/></a> <h4>TITLE</h4> <p class="tag">HTML, CSS, JS, WordPress</p> <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="thumbnail"> <a href="#"><img src="file:///C|/Users/mexic/AppData/Roaming/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eamD3F6.tmp/images/bkg_06.jpg" alt=" kita melihat sekilas grid dan bagaimana Anda sanggup menggunakannya untuk membuat halaman we Menggunakan Tata Letak Grid CSS untuk Membuat Halaman Web" width="2000" class="cards"/></a> <h4>TITLE</h4> <p class="tag">HTML, CSS, JS, WordPress</p> <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <!-- Footer Section --> <footer id="contact"> <p class="hero_header">GET IN TOUCH WITH ME</p> <div class="button">EMAIL ME </div> </footer> <!-- Copyrights Section --> <div class="copyright">©2015 - <strong>GRID</strong></div> </div> <!-- Main Container Ends --> </body> </html> Seperti yang Anda lihat, grid yaitu salah satu blok bangunan tata letak CSS yang paling penting alasannya yaitu mereka mengatakan banyak kontrol atas tampilan dan nuansa tata letak. Kisi cairan akan memberi Anda hasil terbaik alasannya yaitu sanggup menskalakan secara proporsional.
Tentang Penulis
Nathan Segal telah bekerja sebagai penulis lepas selama 18 tahun. Pada dikala itu, beliau telah menerbitkan lebih dari 1.000 artikel dan telah menulis 9 buku. Anda sanggup mencar ilmu lebih banyak wacana beliau di http://NathanSegal.org.
Sumber Artikel : https://www.htmlgoodies.com/beyond/css/using-the-css-grid-layout-to-create-web-pages.html
Komentar
Posting Komentar