Judul : CSS Grid Layout
link : CSS Grid Layout
CSS Grid Layout
Pada postingan kali ini saya akan membahas tentang CSS Grid Layout di mana CSS Grid Layout adalah sistem tata letak paling powerful yang tersedia di CSS. CSS Grid Layout adalah sistem 2 dimensi, yang berarti dapat menangani kolom dan baris, tidak seperti flexbox yang sebagian besar merupakan sistem 1 dimensi. Anda bekerja dengan Tata Letak Grid dengan menerapkan aturan CSS baik ke elemen induk/parent (yang menjadi Penampung Kotak) dan children untuk elemen induk tersebut (yang menjadi Item Grid).
Untuk mulai menggunakan css grid, Anda harus mendefinisikan elemen penampung sebagai parent elemen dengan
display: grid, tetapkan ukuran kolom dan baris dengan grid-template-columns dan grid-template-rows, dan kemudian tempatkan elemen children ke dalam grid dengan grid-column dan grid-row. Demikian pula untuk flexbox, urutan sumber dari item grid tidak masalah. CSS Anda dapat menempatkannya dalam urutan apa pun, yang membuatnya sangat mudah untuk mengatur ulang grid Anda dengan media queries. Bayangkan mendefinisikan tata letak seluruh halaman Anda, dan kemudian menata ulang sepenuhnya untuk mengakomodasi lebar layar yang berbeda dengan hanya beberapa baris CSS. Sebagian besar browser mengirim dukungan native tanpa prefix untuk CSS Grid: Chrome (termasuk di Android), Firefox, Safari (termasuk di iOS), dan Opera. Internet Explorer 10 dan 11 di sisi lain mendukungnya, tetapi ini merupakan implementasi lama.
Mendefinisikan Grid
Mari kita lihat tata letak grid standar 12-kolom . Tata letak 12 kolom klasik sangat populer karena angka 12 dapat dibagi oleh 2, 3, 4 dan 6, dan karena itu berguna untuk banyak desain. Mari terapkan tata letak ini:Mari kita mulai dengan kode markup kita:
Dalam stylesheet kita, kita mulai dengan memperluas body sehingga mencakup seluruh viewport dan mengubahnya menjadi penampung grid:html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Langkah selanjutnya adalah mengimplementasikan baris dan kolom grid. Kita bisa menerapkan semua 12 kolom di mockup kita, tetapi karena kita tidak menggunakan setiap kolom, melakukan hal ini akan membuat CSS kita tidak berantakan. Demi kesederhanaan, kita akan menerapkan tata letak dengan cara ini:
Header dan footer memiliki lebar variabel dan isinya variabel di kedua dimensi. Nav akan menjadi variabel di kedua dimensi juga, tetapi kita akan memaksakan lebar minimum 200px di atasnya. (Mengapa? Untuk memamerkan fitur CSS Grid, tentu saja.)
Dalam CSS Grid, himpunan kolom dan baris disebut trek. Mari mulai dengan menentukan rangkaian trek pertama kita, baris:body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows mengambil urutan ukuran yang menentukan baris individu. Dalam hal ini, kita memberikan baris pertama tinggi 150px dan yang terakhir 100px. Baris tengah diatur ke otomatis yang artinya akan menyesuaikan dengan ketinggian yang diperlukan untuk mengakomodasi item grid (anak-anak dari kontainer grid) di baris itu. Karena elemen body direntangkan di seluruh viewport, trek yang berisi konten (kuning pada gambar di atas) setidaknya akan mengisi semua ruang yang tersedia, tetapi akan membesar (dan membuat dokumen scroll) jika itu diperlukan.Untuk kolom kita ingin mengambil pendekatan yang lebih dinamis: kita ingin nav dan konten untuk membesar (dan menyusut), tetapi kita ingin nav tidak pernah menyusut di bawah 200px dan kita ingin konten menjadi lebih besar dari nav. Di Flexbox kita dapat menggunakan flex-grow dan flex-shrink, tetapi di Grid hal ini sedikit berbeda:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Kita mendefinisikan 2 kolom. Kolom pertama didefinisikan menggunakan fungsi minmax (), yang mengambil 2 nilai: Minimum dan ukuran maksimum trek tersebut. (Ini seperti min-width dan max-width jadi satu.) Lebar minimum adalah, seperti yang telah kita bahas sebelumnya, 200px. Lebar maksimum adalah 3fr. fr adalah unit khusus grid yang memungkinkan Anda mendistribusikan ruang yang tersedia ke elemen grid. (fr mungkin singkatan dari "fraction unit", tetapi mungkin juga berarti "free unit".) Nilai-nilai yang kita berikan menunjukkan bahwa kedua kolom akan membesar untuk mengisi layar, tetapi kolom konten akan selalu 3 kali lebih lebar daripada kolom nav (asalkan kolom nav tetap lebih lebar dari 200px).Meskipun penempatan item grid belum benar, ukuran baris dan kolom sudah benar dan menghasilkan perilaku yang kita inginkan:
Menempatkan Item Grid
Salah satu fitur Grid yang paling kuat adalah dapat menempatkan item tanpa memperhatikan urutan DOM. Jika tidak ada penempatan manual yang dilakukan, elemen ditempatkan di Grid dalam urutan DOM, diatur ke kiri ke kanan dan atas ke bawah. Setiap elemen menempati satu sel. Urutan tempat kisi diisi dapat diubah menggunakan
grid-auto-flow.Jadi, bagaimana kita menempatkan elemen? Mungkin cara termudah untuk menempatkan item grid adalah dengan menentukan kolom dan baris mana yang mereka tutup. Grid menawarkan dua sintaks untuk melakukan ini: Dalam sintaks pertama Anda menentukan titik awal dan akhir. Pada yang kedua Anda menentukan titik awal dan rentang:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Kita ingin header mulai di kolom pertama dan berakhir sebelum kolom ke-3. Nav harus mulai di baris kedua dan menjangkau 2 baris secara keseluruhan.Secara teknis, kita telah selesai menerapkan tata letak, tetapi saya ingin menunjukkan kepada Anda beberapa fitur kenyamanan yang Grid sediakan bagi Anda untuk membuat penempatan lebih mudah. Fitur pertama adalah Anda dapat menamai track Anda dan menggunakan nama-nama itu untuk penempatan:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
Kode di atas akan menghasilkan tata letak yang sama dengan kode sebelumnya.
Bahkan Anda dapat menggunakan fitur penamaan di seluruh bagian di grid Anda:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas mengambil string nama yang dipisahkan dengan spasi, memungkinkan pengembang untuk memberikan setiap sel nama. Jika dua sel yang berdekatan memiliki nama yang sama, mereka akan digabung ke area yang sama. Dengan cara ini Anda dapat memberikan semantik lebih banyak ke kode layout Anda dan membuat kueri media lebih intuitif. Sekali lagi, kode ini akan menghasilkan tata letak yang sama seperti sebelumnya.Mungkin itu saja yang dapat saya berikan pada postingan kali ini, jika Anda ingin informasi lebih detail tentang css Grid silahkan kunjungi gridbyexample.com.
Demikianlah Artikel CSS Grid Layout
Sekianlah artikel CSS Grid Layout kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel CSS Grid Layout dengan alamat link https://duniainternet66.blogspot.com/2018/10/css-grid-layout.html
0 Komentar