‫Selamat datang kembali.
‫Sekarang akhirnya saatnya menggunakan grid dan Anda telah melihat bagaimana menggunakan panel teknologi sebelumnya dan panel rak dan yang
‫sampai hari ini ditumpuk dengan baik dan membungkus semuanya.
‫Dan sekarang kita akan memeriksa Grid, yang memungkinkan kita untuk memposisikan sesuatu dalam grid, dan kita akan
‫memulai dengan hanya menggunakan dua kali untuk grid.
‫Dan pertama-tama, apa yang kita butuhkan untuk itu adalah definisi kolom dan gulungan sehingga kita dapat melanjutkan dan di dalam grid
‫kita.
‫Jadi buka file Zemel Anda dan kemudian di dalam kisi, buat definisi kolom titik kisi dan di sini Anda dapat menentukan
‫kolom yang berbeda.
‫Jadi pertama-tama, Anda memerlukan definisi kolom, jamak, dan kemudian Anda dapat melanjutkan dan membuat
‫definisi kolom individual Anda.
‫Misalnya, Anda dapat melanjutkan dan membuatnya di sini.
‫Aku akan tetap sederhana dalam satu baris begitu saja.
‫Dan yang ingin saya definisikan di sini hanyalah lebar dan lebar yang saya bisa, katakanlah, jadikan
‫100 dan sekarang mari buat kolom lain, yang juga akan menjadi 100 lebar.
‫Sekarang, itu tidak cukup.
‫Kami juga perlu memiliki baris, kecuali kami hanya ingin memiliki satu ruangan.
‫Jadi mari kita mulai dengan satu baris saja.
‫Dan saya hanya akan membuat tombol terlebih dahulu.
‫Dan tombol ini akan mengatakan sesuatu seperti, hai, dan itu harus di grid, kolom
‫nol itu.
‫Sekarang saya membuat tombol kedua, yang seharusnya menjadi kisi, kolom itu.
‫Sekarang, jika kita melihat desain kita sekarang, kita dapat melihat bahwa kita memiliki dua tombol.
‫Hai, yang di sana.
‫Mari kita jalankan kode kita hanya untuk melihat tampilannya.
‫Omong-omong, lebarnya hanya 100 piksel, seperti yang Anda lihat di sini.
‫Jadi lebarnya dibatasi hingga 100 piksel.
‫Jadi jika Anda menambahkan nilai total di sini, maka itu hanya akan menggunakannya sebagai piksel dalam lebarnya.
‫Seperti yang Anda lihat di sini, itulah lebar kolom.
‫Dan tentu saja, kita dapat mengatakan bahwa kita dapat menempatkan beberapa kolom lagi di sini dengan mudah.
‫Yah, kita bisa melakukannya dan kita akan melakukannya nanti.
‫Tapi sebelum kita melakukan itu, saya ingin menunjukkan sesuatu yang sangat penting.
‫Jadi jika saya menyeret Zemel saya ke sini sekarang, itu sebenarnya berguna karena kita akan melihat perbedaan di UI kita secara
‫langsung.
‫Dan saya ingin mengubah lebar dari 100 menjadi otomatis.
‫Dan seperti yang Anda lihat apa yang dilakukan otomatis, otomatis hanya membutuhkan lebar yang diperlukan untuk
‫memuat semua konten yang ada di dalam elemen.
‫Jadi dalam kasus kami, tombol memiliki teks yang disebut Hai, dan itu adalah berapa banyak ruang yang dibutuhkan atau dibutuhkan
‫di sana.
‫Dan itu juga seberapa lebar tombol kita nantinya.
‫Dan seperti yang Anda lihat untuk definisi kolom
‫pertama, jadi definisi kolom pertama di mana tombol kita ada, begitulah tombol yang diubah.
‫Seperti yang Anda lihat sekarang, itu berubah menjadi lima puluh sembilan koma lima piksel.
‫Jika saya menambahkan beberapa teks lagi, beberapa teks lagi, Anda dapat melihatnya melebar menjadi seratus lima puluh tiga koma
‫lima piksel.
‫Jadi, Anda dapat dengan mudah melanjutkan dan menggunakan otomatis jika Anda ingin semuanya pas dengan benar berdasarkan seberapa banyak ruang yang
‫sebenarnya dibutuhkan.
‫Tetapi bagaimana jika saya ingin membuat kolom dengan lebar yang sama persis?
‫Yah, tentu saja saya bisa menggunakan nilai penuh di sini atau nilai tetap di sini, tapi saya juga bisa menggunakan bintang.
‫Dan apa yang akan dilakukan Star adalah jika semuanya memiliki bintang, ia hanya akan berkata, OK, ambil
‫semua ruang.
‫Dan dalam hal ini hanya ruang yang tersedia yang dimiliki kolom khusus ini, dan itu persis sama dengan
‫yang lain.
‫Jadi ada yang menunggu sekarang.
‫Jadi yang ini beratnya satu dan yang itu juga beratnya satu.
‫Jadi sama-sama berbobot, artinya sama saja kalau kita mau mengubahnya, misalkan saya mau buat yang
‫kedua ini di sini, tombol kedua dua kali lipat dari yang pertama saya bisa menggunakan bintang
‫ganda.
‫Jadi sekarang yang ini akan menjadi dua kali lebih lebar dari yang pertama.
‫Jika saya, misalnya, ingin memiliki tiga dari seperlima di sisi kiri dan dua perlima di sisi kanan sebagai lebarnya, saya
‫cukup menggunakan pendekatan ini, seperti yang Anda lihat di sini.
‫Jadi tiga kali bintang dan dua kali untuk memulai.
‫Jadi apa sebenarnya yang menambahkan semuanya dan kemudian hanya membutuhkan banyak akun dari apa yang dikatakan di sini.
‫Jadi katakanlah kita memiliki tiga dan dua.
‫Jadi apa yang dilakukannya, dikatakan, OK, sekarang totalnya lima.
‫Unit yang tersedia dan saya akan mengambil tiga perlima dari unit itu dan saya bahkan bisa melanjutkan dan melakukan sesuatu seperti 100
‫sehingga Anda dapat melihat yang ini membutuhkan 100 dan ini tidak akan memakan waktu satu dan hanya membutuhkan dua.
‫Jadi begitulah cara Anda bisa bermain-main dengan lebar dan hal yang sama berlaku untuk ketinggian.
‫Jadi sekarang mari kita lanjutkan dan membuat definisi gulungan.
‫Begitu hebatnya definisi peran dan di sini kita dapat melanjutkan dan membuat definisi kita sendiri.
‫Jadi yang pertama dan saya akan membuatnya tetap sederhana juga, seperti dalam satu baris dan yang ini membutuhkan ketinggian.
‫Jadi saya hanya akan mengatakan, OK, saya ingin memiliki ketinggian bintang.
‫Dan sekarang kita menggunakan hal yang sama lagi untuk baris kedua.
‫Dan seperti yang Anda lihat sekarang kami memiliki dua baris.
‫Jadi satu di sini dan yang kedua di bawah.
‫Dan seperti yang Anda lihat, baris kedua belum memiliki konten apa pun.
‫Jadi sekarang mari kita ubah itu dengan katakanlah, pertama-tama, letakkan tombol ini di sini ke bawah.
‫Benar.
‫Dan bagaimana kita bisa melakukannya?
‫Yah, kami hanya menggunakan grid, dot, baris, dan kami mengatakan itu nyata.
‫Sekarang, Anda mungkin bertanya-tanya, mengapa begitu?
‫Mengapa tidak terlalu baik?
‫Seperti yang mungkin sudah Anda ketahui, dalam pemrograman kita mulai menghitung dengan nol.
‫Jadi baris pertama adalah nol, baris kedua adalah satu.
‫Jadi sekarang tinggi ada di baris kedua, yaitu baris satu.
‫Sekarang, mari kita lanjutkan dan buat dua tombol lagi dan mungkin bahkan ubah nama mereka menjadi
‫sesuatu yang bisa dikatakan lebih banyak tentang info mereka yang sebenarnya.
‫Jadi saya akan memasukkannya ke dalam kolom nol di baris satu dan yang itu, sebenarnya, saya akan
‫mengembalikannya ke nol satu.
‫Dan yang itu akan ditambahkan satu.
‫Dan sebenarnya itu akan menjadi kolom satu dan baris nol seperti itu.
‫Jadi sekarang kita memiliki semua tombol dan itu akan menjadi satu.
‫Satu akan menjadi tombol ke tombol tiga dan tombol empat.
‫Besar.
‫Jadi sekarang jika kita memulainya, Anda akan melihat bahwa, itu juga penting untuk Whitesell.
‫Jadi satu, dua, tiga, empat.
‫Baiklah.
‫Sekarang, sedikit tantangan bagi Anda karena Anda telah melihat bagaimana menggunakan kolom dan baris yang bagus.
‫Silakan lanjutkan dan buat kotak tiga kali tiga di sini dengan delapan tombol.
‫Jadi satu, dua, delapan harus menjadi tombol dan posisi kesembilan.
‫Jadi posisi tangan kanan bawah atau elemen grid harus berupa blok teks.
‫Jadi tolong posting video dan coba lakukan itu.
‫Baiklah, saya harap Anda mencobanya, jadi yang akan saya lakukan adalah menambahkan kolom lain dengan menambahkan definisi kolom
‫di sini, dan itu akan sama lebarnya dan sama tingginya.
‫Tingginya akan sama.
‫Dan sekarang, seperti yang Anda lihat, tombol-tombolnya terlihat agak aneh, tapi itu hanya karena saya belum memperkecilnya.
‫Jadi sekarang kita bisa melihatnya dengan benar.
‫Sekarang kita memiliki tombol dengan nol satu dan seterusnya.
‫Jadi saya akan menyalin tombol itu di sini dan saya juga akan memposisikan kolom.
‫Jadi Rosero dan kolom dua.
‫Sekarang, Anda tentu saja dapat berdebat bahwa lebih masuk akal untuk memulai dengan baris dan kemudian masuk
‫ke kolom selagi Anda bisa melakukannya.
‫Tapi dalam kasus saya, itu sebaliknya.
‫Pada akhirnya, yang penting adalah Anda menggunakan keduanya dengan benar.
‫Sekarang kita memiliki tiga tombol di atas.
‫Sekarang mari kita lanjutkan dan buat baris kedua atau selesaikan baris kedua.
‫Dan itu juga kolom.
‫Dan saya akan menyalinnya lebih dari tiga kali, sebenarnya.
‫Dua kali sudah cukup.
‫Dan yang itu akan menjadi baris ke posisi nol dan baris ke posisi satu atau kolom satu.
‫Sekarang, tentu saja, kita perlu mengubah nilainya.
‫Jadi satu, dua, tiga, empat, lima, enam, tujuh dan delapan.
‫Dan seperti yang saya katakan di kiri bawah, saya ingin memiliki blok teks.
‫Jadi blok teks memiliki pendekatan yang sama dengan bubur jagung.
‫Anda harus memiliki kolom dan baris.
‫Jadi saya hanya akan mengatakan ini akan menjadi kolom dua dan baris grid.
‫Dua juga.
‫Jadi sekarang kita berada di bawah, kiri atau bawah sekarang, kita bisa keluar dan memberikan beberapa teks dan saya
‫hanya akan mengatakan sesuatu.
‫Saya mengirim SMS sekarang, Anda mungkin berkata, oh, saya tidak menyukainya.
‫Teks ada di kiri atas.
‫Meskipun Anda dapat dengan mudah mengubahnya dengan ..
‫Memasukkan sesuatu seperti perataan horizontal dan gunakan pusat di sini.
‫Jadi sekarang dipusatkan secara horizontal.
‫Mari kita perbesar sehingga Anda dapat melihat.
‫Baiklah.
‫Cukup satu untuk memusatkannya secara vertikal juga.
‫Saya hanya menggunakan perataan vertikal dan saya menggunakan pusat di sini juga.
‫Jadi sekarang seperti yang Anda lihat, tombolnya berada di tengah dengan sempurna dan kita bahkan dapat melanjutkan dan mengubah ukuran
‫font hanya karena kita bisa.
‫Dan mari kita membuatnya sedikit lebih besar, seperti 32.
‫Dan sekarang dapat melihat kita memiliki tiga kali tiga grid dengan delapan tombol dan sebuah teks.
‫Sekarang, Anda dapat melanjutkan dan menyelaraskan semua jenis elemen yang berbeda di jendela Anda di sini dan jendela utama Anda di
‫kisi Anda.
‫Jadi itulah keindahan tentang menggunakan grid.
‫Dan seperti yang telah Anda lihat, Anda dapat menumpuk barang-barang.
‫Anda dapat membuat panel bertumpuk dengan beberapa kisi.
‫Dan selain itu, Anda memiliki teks di antaranya, sesuatu seperti itu.
‫Jadi Anda tidak dibatasi untuk menggunakan satu elemen saja di sini.
‫Seperti yang Anda lihat, kita dapat melanjutkan dan katakanlah memasukkannya ke dalam panel tumpukan panel bertumpuk seperti itu.
‫Jadi saya akan menyeret grid.
‫Seperti yang Anda lihat sekarang, itu mengeluh karena jendela jendela utama Zemel hanya tahu yang pertama.
‫Jadi itu hanya akan melihat panel yang ditumpuk jika kita sekarang memeriksa penampilan kita.
‫Sebenarnya, mari kita hentikan agar kita bisa melihat bagaimana dikatakan markup terbalik.
‫Jadi jika kita mengambil seluruh grid di dalam panel tumpukan kita, seperti yang Anda lihat, itu ada di sana dan mengambilnya.
‫Jadi di bagian bawah, ada banyak ruang.
‫Jadi di sini kita bisa menambahkan tombol lain.
‫Supaya Anda melihat bahwa ini mungkin dan yang ini akan berada di sini dengan ketinggian seratus.
‫Dan sekarang, seperti yang Anda lihat, semuanya menumpuk di atas sana.
‫Dan meskipun kita memiliki ketinggian yang sama, teks ini membutuhkan begitu banyak ruang
‫sehingga mengabaikannya.
‫Jadi ukuran fontnya terlalu besar.
‫Jadi kalau kita kembali ke 16, masih terlalu besar.
‫Jika kita pergi ke, katakanlah, 12.
‫Sekarang sepertinya lebih seperti itu.
‫Jadi setiap kali Anda menggunakan definisi nyata untuk cerita ini, Anda harus berhati-hati.
‫Jika suatu elemen membutuhkan lebih banyak ruang daripada yang ada, maka itu akan meluap.
‫Baiklah.
‫Jadi itu dua grid.
‫Saya akan kembali ke grid standar yang indah yang kami miliki di sana.
‫Dan secara umum apa yang selalu saya sarankan setelah Anda melihat sesuatu seperti itu dan setelah Anda mempelajari
‫sesuatu seperti itu, silakan lanjutkan dan bermain-main dengannya.
‫Hanya bermain-main dengan beberapa jenis elemen yang berbeda.
‫Anda telah melihat beberapa, dan kami akan melihat lebih banyak kontrol nanti.
‫Jadi yang kita gunakan selama ini kebanyakan tombol, kan.
‫Dan blok teks.
‫Tapi kami akan menggunakan kontrol indah yang berbeda di video mendatang.
‫Jadi saya akan melihat Anda di sana.