 So welcome to the most any howly CSS grid workshop you'll ever attend in your life. How many people have actually used CSS grid before? But you've heard of CSS grid. Flexbox have you all used before? So how do you all feel when you use flexbox? Is it very confusing to move from floats to flexbox? Was it very confusing? That's good because flexbox and grid are similar. Not the same because they are used for different purposes. But if you are familiar with flexbox, grid shouldn't be that hard to understand. So this workshop is going to assume that you have a reasonably good grasp of CSS and how to handle specificity and cascade. So all that I'm not going to cover. I'm just going to assume you already know all this. Jika you happen to be a bit more novice on the CSS front, the pace might be a little fast. But you can ask the nice people wearing the blue t-shirt for help, I suppose. So actually at the end of the day, there's no one right way to do layout. So there will be cases where you would still want to use floats. There'll be cases where you still want to use even the oldest inline block or even position absolute. There will always be use cases for those. So don't assume that now that there is CSS grid, I must use CSS grid for everything. No, context is everything. You really need to examine the use case that applies to you. So I just want you all to keep this in mind. You don't think of CSS grid as a replacement for anything. It's an addition to what you already know. So if you all could navigate to this, all of you get the Wi-Fi. Because it's Shangri-La, it's very fast, no password needed. So everybody has Wi-Fi, right? So can you navigate to here, there's a bunch of starter files that I prepared. So if you want to write your own markup, that's great. In these starter files, the marker is written for you. So most of the code you'll be writing is just CSS. And if you have any trouble downloading, just let me know. Can you all see? Is this a horrible font? Sorry guys. Can I zoom? I cannot zoom because this is Java script. What can I use to reveal? KNDW6O. KNDW6O, bukan KNDW0. Bukan apa? Biar saya klik saya sendiri dan lihat. Sial! Mereka mungkin ada alternatif. Tunggu 5 menit. 1 menit. Saya melihat ini. Bagaimana car saya? Baiklah. Saya suka mempunyai nama chinese. Apa pun. Bagaimana saya mempunyai satu yang teruk? Saya hanya cuba mencari URL. Bagaimana? Bagaimana kita dapat mendengar semuanya yang berlaku di depan? Bagaimana? Tunggu. Tunggu di sini. Ini adalah URL yang teruk. Tunggu. Biar saya menipu. Saya tidak dapat menunjukkan. Kamu sedang buat sesuatu. Saya cuba menipu. Coba. Kita hanya tidak dapat menunjukkan. Bro, saya tidak dapat menunjukkan. Bagaimana dengan saya? Jika saya bawa ujian, saya akan membuat ujian. Mereka akan membuat ujian. Saya akan membuat ujian. Saya akan membuat ujian. Saya akan membuat ujian. Saya tak boleh. Kedua ini kamu menggunakan 6999? Okay, ketika dia buat semua ini, URL adalah bit.lyanyhowly-gwitt Kemudian anda press download Dan kemudian akan ada button download, jadi anda scroll- scroll- scroll Di sini, semoga ini di-download Adakah ia berlaku? Okey, jemput Saya akan bercakap tentang 10 minit dulu Jadi jika anda masih belum download, jelaskan bagaimana untuk download Dan beritahu saya dalam latihan Jadi, semua orang mempunyai Nightly Sebenarnya saya sedar bahawa walaupun anda tidak mempunyai Nightly, Firefox adalah baik Jadi semua orang mempunyai Firefox, kan? Jelaskan semua kota dan apa-apa pun, menggunakan Firefox Ada sebab untuk ini Sementara, Firefox DevTools Mereka akan mempunyai gerak-gerak yang tiada bagi browser lain Jadi saya akan menunjukkan kemudian Jadi, jika anda mempunyai Firefox, tidak perlu mempunyai Nightly lagi Tetapi ia bagus jika ia Nightly Kerana ada lebih banyak kemampuan dalam kemampuan Nightly Ada sebuah kemampuan yang tidak ada, tidak ada set-up, tidak ada apa-apa Jadi, jika anda mempunyai starter file, anda hanya memperkenalkan ke dalam browser anda Dan ia akan baik, anda hanya perlu memperkenalkan Pembu dan pencah di depan anda untuk sebabnya Saya akan menjelaskan sebab saya akan mencari contohnya di belakang Sebelum saya memulai, ia adalah sebuah masa sejarah Ada sesiapa yang berjaya dalam perjalanan sebelumnya? Perjalanan perjalanan Tidak ada sesiapa? Oh, anda mempunyai hidup yang baik Biar saya jelaskan, saya pernah bekerja di perjalanan perjalanan Dan perjalanan sebagai dua kerja pertama saya Jadi, banyak kali, terutamanya di Singapura, Kita tidak begitu digital, tetapi perjalanan di general Jadi, banyak kali, desainer-desainer biasanya datang dari penghantaran Dan ia bagus, mereka sangat talentur Anda melihat bahan-bahan yang baik, atau perkara di sisi loris Orang yang sangat baik, desainer-desain Desainer-desainer saya datang dari penghantaran itu Ia sangat baik di perjalanan perjalanan Ia sangat baik di perjalanan perjalanan itu Tetapi satu perkara tentang desain ini adalah, mereka semua static Mereka tidak menghubungi dengan baik di web Apabila perjalanan berusaha untuk berjalanan digital Kerana ia seperti perkara yang penting untuk dibuat Mereka akan mendapat klien yang akan berkata Baiklah, saya perlukan website atau apa-apa Dan ia akan berkata, ada perkara ini yang mengenai responsif Ia berjumpa dengan baik, kita mahu itu Saya akan berkata, okey, baik Dan desainer-desainer tidak mengenai web di general Mereka akan berkata, oh, itu mengenai responsif Saya akan berikan satu besar dan satu yang sedap Mereka akan berikan kemahiran yang besar Mereka akan berikan kemahiran desktop dan kemahiran mobil Dan anda akan merenangkan bahawa Anda tidak dapat menghubungi mereka Kerana elemen di tempat yang semua di tempat Mereka tidak faham bahawa untuk membuat sesuatu yang berkata-kata responsif Mereka sebenarnya berkata-kata Kerana sebuah medium astetik seperti foto atau sketch Atau hanya mencari penjara dan papier Anda mempunyai segera Maksud saya, jika saya mahu sesuatu di jalan-jalan, saya mahu sesuatu di jalan-jalan Saya mahu sesuatu di jalan-jalan, saya mahu sesuatu di jalan-jalan Tetapi apabila ia beri kemahiran web, ia tidak berjalan-jalan Dan ada sebuah model mental yang mereka Sebelum orang beritahu mereka, mereka sudah mendapat Jadi anda akan mendapatkan banyak kemahiran dengan mereka Ini tidak dapat dibuat Sebenarnya tidak, ia adalah desain yang sangat baik Ia hanya sangat susah untuk dibuat di web Jadi, saya rasa bahawa Lekas faham bagaimana penjara berkata-kata Ia adalah masalah untuk semua masalah Jadi apa yang saya mahu lakukan, saya akan menjelaskan Seperti yang saya boleh, bagaimana penjara Menjelaskan elemen di tempat Jika anda sudah tahu ini, saya tidak tahu Perlukan Facebook atau sesuatu Jadi, grafik ini yang anda lihat di sini Ia digunakan Lady Lin Clark Dia bekerja di Mozilla dan membuat sesuatu yang dipakai kota-kata Dan ia menjelaskan untuk menjelaskan banyak Pada konsep komputer sains Bukan hanya untuk browser Tapi konsep komputer sains menggunakan kata-kata Ia sangat bagus Sebenarnya, saya akan menjelaskan kemahiran ini Jika anda lihat, jika mereka tidak menjelaskan Saya akan menjelaskan dengan anda Tapi anda harus menjelaskan dan melihat kemahiran dia Ia sangat teruk Jadi, bagaimana sebuah browser yang membuat kemahiran Kerana html dan css Walaupun beberapa orang mungkin tidak bersyukur Ia adalah kota-kata manusia Mereka dapat menjelaskan html dan css Tapi browser anda tidak dapat menjelaskan semua kata-kata Mereka harus menjelaskan kota-kata Jadi, bagaimana browser yang membuat kemahiran Ia akan menjelaskan html dan css Untuk sesuatu yang browser anda faham Mereka akan menjelaskan kemahiran di sisi Jadi, apabila browser pertama menjelaskan html dan css Mereka akan menjelaskan setiap kata-kata Untuk kata-kata yang browser anda faham Jadi, pada saat ini, dalam proses menjelaskan Dom akan tahu bagaimana kata-kata ia menjelaskan Dan semua kata-kata kata-kata Tetapi, dia tidak tahu bagaimana kata-kata ini harus menjelaskan Selepas itu, ia menjelaskan kata-kata Kata-kata kata-kata yang berlaku Selepas itu, browser akan menjelaskan Apabila semua kata-kata ia menjelaskan Kata-kata yang berlaku, bagaimana kata-kata akan menjelaskan Pada kemahiran css Dan pada saat ini, pergerakan layar Memulai untuk menjelaskan Dimensi yang adalah kata-kata Untuk kata-kata yang berlaku dan di mana Di mana kata-kata yang berlaku, mereka perlu pergi Jadi, ini... Jika anda fikir tentangnya Apabila browser pertama menerima html Sebenarnya, ia tidak tahu Tidak tahu segala kata-kata Ia hanya tahu bahawa mereka di sana Jadi, saya rasa itu kata-kata yang tidak mendengar Kerana mereka fikir bahawa Saya benar-benar memdesainya untuk menjadi kata-kata Sebenarnya, ia harus menjadi kata-kata Tapi sebenarnya, ada proses untuk browser Bagaimana perkara ini sebenarnya harus menjadi Jadi, setelah itu, ada dua proses Anda dapat menjadi kata-kata Kata-kata yang akan kata-kata Kata-kata yang akan kata-kata Dan ini dapat berlaku pada kata-kata Jadi, ia sedikit seperti animasi Jika anda menerima dan menerima Jadi, semua kata-kata yang berlaku Di kata-kata yang berlaku Dan kadang-kadang, ia dapat berlaku Ia dapat menjadi kata-kata Jadi, anda dapat mengubah Dari persembahan, anda dapat mengubah Kata-kata yang berlaku tanpa memungkinkan Kata-kata yang lain Jadi, kata-kata seperti Z-index Kadang-kadang ini berlaku Dan akhirnya, terakhir, ada kata-kata dan kata-kata Jadi, semua kata-kata yang berlaku Mereka akan menjadi kata-kata menjadi kata-kata Sebelum itu, ia akan menjadi kata-kata Sebelum anda melihat sesuatu di browser anda Ia berlaku dengan banyak kata-kata Ia hanya segera yang tidak dapat anda beritahu Ada sebabnya Apabila anda melakukan animasi Mereka selalu berkata, ada beberapa perkara yang anda dapat animasi Dan beberapa perkara yang anda tidak dapat animasi Kerana jika anda animasi Kata-kata layar-layar seperti Kata-kata yang berada di bawah-b bawah Anda mengalami ke-3 Jadi, anda menggunakan browser untuk kembali ke-3 Kali-kali semua layar-layar Kali-kali kata-kali Tapi, jika anda menggunakan Kata-kata seperti CSS, ke-transform dan opasiti Ia hanya menggunakan ke-akhir Jadi, ia lebih berlaku Jika anda hanya animasi ke-transform Dan ke-transform dan opasiti Kerana anda tidak menggunakan Kata-kata layar-layar Jadi, ia hanya daripada stand-point performa Jadi, ia adalah bagaimana Macam mana browser berlaku Ia adalah baik untuk tidak ada informasi Akhirnya Ia mungkin akan menyebabkan Saya hanya beritahu anda 10 minit Untuk bahagian yang tidak berlaku Tapi, bagaimana saya ingin Beritahu sekarang Bagaimana layar-layar Ia berubah selama beberapa tahun Apabila anda memulakan layar-layar Dan kemudian Bukan CSS pada masa Jadi, orang menggunakan tabel Kerana mereka adalah kreatif Apabila CSS datang Orang-orang menggunakan flow Kerana itu adalah perkara yang anda dapat menggunakan Untuk menjelaskan Kerana menjelaskan Kerana menjelaskan Tetapi, flow sebenarnya Kerana menjelaskan Untuk membuat Perlukan teks Itu adalah perkara yang berlaku Itu masih perkara yang berlaku Tetapi, kami menjelaskan Untuk membuat layar-layar Sebab itu, ia sangat susah Untuk membuat layar-layar yang benar Sebab itu, apabila anda cuba membuat Layar-layar yang berlaku Mereka akan tidak akan berlaku Sebab itu, yang berlaku Mereka tidak akan menjelaskan Jadi, akhirnya, orang menggunakan tabel Kerana seseorang Memulakan tabel Mereka mempunyai tabel Jadi, mereka mempunyai tabel Mereka mempunyai tabel Mereka mempunyai tabel Memulakan tabel Sebenarnya, ia berlaku Dengan Grit CSS Kita sekarang mempunyai Layar-layar yang benar Di mana semuanya berlaku Sebab itu, grit CSS Mereka sangat berlaku Kerana, kita akhirnya Mereka mempunyai tabel yang benar Kita telah membuat Bagaimana-bagaimana, selama 20 tahun Sekarang, kita sebenarnya mempunyai Layar-layar yang benar Jadi, ada beberapa terminologi basikal yang saya akan bercakap Selepas ini, mari kita dapatkan Semuanya pada pakaian yang sama Untuk grit Lines Kita berlaku Untuk Kita dapat beritahu Lines yang berlaku Lines yang berlaku Lines yang berlaku Dan anda dapat berlaku Dengan pakaian yang benar Anda juga dapat berlaku Saya akan berlaku Lines yang berlaku Dan pakaian yang benar Jadi, setiap pakaian Itu adalah tempat anda Jadi, horizontal atau vertikal Setiap pakaian Orang atau roll adalah pakaian yang berlaku Orang yang berlaku Orang yang berlaku Orang yang berlaku Mereka menjadi area grit Dan satu yang benar Kita berlaku Ini Orang yang berlaku Orang yang berlaku Kalau anda memakai pakaian yang benar Dan anda membuat layar Pakaian yang benar Kita tidak boleh mempunyai Semua yang lain-lain Pakaian yang berlaku Ia hanya Sangat berlaku Saya pernah melihat beberapa orang memakai Pakaian yang berlaku Pakaian yang berlaku Tapi sekarang Pakaian yang berlaku Terima kasih Semuanya hanya mempunyai Pakaian yang berlaku Jadi, ini Pakaian yang benar Kalau anda tidak mahu memakai apa-apa Pakaian penjual tidak suffakin untuk anda Secara menceritakan Seperti tadi Pakaian dan penjual Sementara pengacara yang ditenangkan Ppakaian yang diperingkatkan Dan anda masih mem Collect Tetapi, anda mempunyai Mempunyai Pakaian yang berlaku Pakaian yang berlaku Mereka tak guna For grid, go onto the parent. For flexbox, you still, in order to create grid with flexbox, you still hit the child. So wait, you'll be clearer when you get to the actual code. But this sentence actually sums it up very well. In that grid works from the container in, in the sense that you need to have a big picture view of how your layout is going to look like from the beginning if you're using grid. All the other layouts actually work on the item, meaning I have to set a width on the item. It could be a percentage, it could be a fixed width. But you have to sort of control the size of the items. Then sort of cross your fingers and hope that the browser renders all of them correctly in the correct place. So if you're going to think about it, right? It's like for grid, you sort of think landscaping. Or plan out, okay, my oak tree is going to be here. My bougainville's are going to be here. And then my orchid is at the corner. You can plan that using grid. With layout, you sort of just throw the seeds around and hope that they grow in the correct places. So I think that's why grid is so much more, so much more useful for layouts as opposed to the other methods. You have more control. Can you load the index HTML in the base folder in your browser? I'm going to attempt to do this. And I obviously never practised this. So this is going to be very heavy. Where's my pressure? Oh no. Why is my styles already there? My God. It will not look like this. It will eventually look like this, but not now. Joke. So if you also... Ideally, you should already have CSS file that is already linked. So you can just type inside. And the classes are already scaffolded there. If you want to type from scratch, go ahead, like not stopping you. So it should be just like unlaid out. So what I wanted to demonstrate in this beginning part is the fact that if you want to create a three column grid using inline block, your styles all go onto the item. So you have to define the width of your item. So it's very blur, but I use cup 100% divide by 3 to get three columns. You want to try, it's fine. Actually, you don't want you can skip this section. Float. Exactly the same. Also have to apply a width onto each item. Calculation is also the same. For flex box, code is slightly different because you have to apply flex to the parent but for the actual three column alignment, you still have to set your flex basis to a three column set. So if you think about it, lay inline block float, flex, all these columns, the grid doesn't exist. The only reason it looks like a grid is because we force the items to line up in this way. There's actually no grid. The grid is imaginary. But when it comes to CSS grid, the grid is actually real. And grid is the only layout technique that establishes a relationship between rows and columns. This is the key difference between grid and flex box. Because flex box actually only works on a single dimension, meaning you can set the flex direction to row or to column and it will display but in a single dimension. So if it's row, it will lay it out one after another. But when you wrap it around, there is no relationship between the rows and the columns. So to get them to line up, that's why you're forced to apply a width to each flex item. You're forcing them to line up but by default, the browser actually doesn't really know that if I have a three-column grid, my fifth item is actually supposed to be directly below my second item. No, the browser doesn't know this. We actually sort of trick the browser into displaying it this way by setting a width. But for grid, you actually can do that because the grid is real. So I'm going to cover the properties on the grid container first because if you're going to design using grid, that's the first step. You have to define your grid first, the big picture view. So in order to define a grid, this will be the code from here onwards. So I'm going to introduce three properties. In this example, we have grid template column, grid template rows and grid template columns and rows have S. No S, no work. So it's actually quite straightforward to define a grid. And this is... What did he do to my... He's horrible. I can't even see anything. Can you see it on the back? PMD. Okay, never mind. Plan B. Just... Okay. I don't know why you are at this session. This is the most poorly run session in the whole conference. Why are you all here at 9am? Oh my God. I wouldn't be here if I were you. Anyway... Okay, let me make the form big. Food. Form size. 200. Wah sale, cannot. This is a stupid idea. Tax, edi. Hai. 720. No, but it's the screen issue, not my issue. Taxa is large. What? That's the largest. I'm sorry, can you see or not? This is ridiculous. Can you see or not? Can you show your... Like, I can't see. I can't even see from 5 feet. Can you show the full side? Ya, it looks great. And... Wait, wait, I change... No, no, no. Can I change the color scheme? It works out and you get the screen from outside in here. Ya. I have no flow, it's any howly. I see if I can change the lighter theme. And then I just directly use the tax editor. Ya, give me... We ask them about the projector. Wait, wait. Actually, I also cannot see. Cialat, wait. Are you joking? Okay, is this visually better in any way at all? This one can see from the back. This one's better, right? Okay. Okay, and then I just going to keep flip. We are... Logistical issues. Okay, not that. Is this what I feel like when I'm at work? Dash. Wah, LED. I think Thank you. No problem, we can fix lah. Says the German. Any howly, any howly. Thanks boss. You have HDMI adapter? I got. It's a bit wet. Don't use the second one. Oh, they're button-set. That's it. Ah Niao. Ayo. Gampang. Serai sifu ah. Serai sifu. A little bit, a little bit. Okay. Actually, Matt, you need to put the screen a bit closer here too. So, can you move this in front? I think we should take a wire out under. No, no. Can you not let the wire be under the rostrum? Thank you. Let me put this on the rostrum. Side to side. Or on the rostrum, okay. Sorry. Can. Due to technical difficulties, it's fun. On the floor. My life, my life is certainly so clear. So much clarity. I was blind and now I see. Title jaw, title jaw. Can everybody see? Serai sifu. I oneself cannot see. Ayo, hi. Ayo. I'm gone. You can't see, right? Okay. Can you see? Do you want to shift or not? Can I just squat on the ground? Then I can sit there. We have another power plug here. Wait, wait. No, I got a new plan. I got plan B. You will lose power. Rostrums are not for people like me. Now we can push it a bit further away. I don't want to see my screen. You don't need to see me. You all can hear me. I'll let you fix it. He's part of the guys. Really? I don't know. Go back to Rostrum. Go back to Rostrum. Colour is nice. Fire watch. Yes, sir. Sorry. Sponsored coffee. Sponsored by? Microsoft. I sincerely apologise for this haphazard workshop. If you ever see my name as a mentor, don't sign up. Eh, if you ever take the Anglain photo, then my mother think I'm not doing a good job. She does. Then my mother think I'm a monkey in real life. Saat Marau? Ya. Can you reach me? But here, I can see. Then it's easier for me. Yang ini? Mereka bermain CEO. Saya akan bincang dengan ini. Saya harap saya sudah berada di sini. Wow. Sangat jelas. Terima kasih. Jika kamu berdua berada di sini, kamu akan jadi seorang seorang seorang seorang monkey. Jangan risau. Ya. Saya mahu monitor 4K yang berjaya. Itu yang terbaik. Okey. Jika kamu berdua menggunakan yang pertama, saya mengatakan yang kamu berdua mahu menggunakan timbulan grid dengan column S. Untuk penggunaan ini, mari kita membuat layanan yang terbaik. Kerana lebih mudah untuk faham. Mungkin... Kamu bersedia lagi? Ya, kenapa? Sejak kita ada lapangan sekarang. Ada kopi natil di luar. Sebaik-baik saja, kamu boleh tinggalkan masa lagi. Sebenarnya? Baguslah. Jika kamu berdua menggunakan pakaian seperti saya, pakaian yang terbaik untuk plug-in CSF3, tapi jika kamu tidak mempunyai pakaian dengan tangan, jangan berlaku. Jadi, bagaimana timbulan grid? Kamu mesti menggunakan grid. Sudah tentu. Sudah tentu? Bagus. Baiklah. Apa yang berlaku? Ini mungkin tidak berlaku betul-betul. Ibu-ibu. Okey, pakaian yang terbaik di luar. Jadi, kamu mesti dapat sesuatu seperti ini. Dan kamu tidak perlu mengikuti pakaian yang saya menggunakan. Kamu juga boleh menggunakan pakaian sendiri. Kerana... Ya. Kenapa 150 pakaian? Saya tidak ada jawapan. Jadi, menggunakan apa-apa yang kamu mahu. Jika kamu tidak mahu, kamu mahu menggunakan pakaian yang saya mahu. Jadi, kamu mahu menggunakan pakaian yang tidak terbaik. Pakaian seperti itu. Jadi, itu adalah cara kamu menggunakan grid. Jadi, jika kamu melihat pakaian yang saya mahu, ia sedikit visual. Jadi, jika kamu mempunyai 3 pakaian, ia adalah 3 kolummen. Jika kamu mempunyai 4 pakaian, ia adalah 4 kolummen. Ini sebenarnya apa yang saya suka menggunakan grid CSS. Kerana, ia sebenarnya visual dalam pakaian kamu. Ada beberapa pakaian yang berlainan untuk menggunakan pakaian yang terbaik. Tapi, ini adalah pilihan saya. Sablantex tidak tahu tentangnya. Jadi, jami adalah salah. Jika kamu mempunyai grid, jadi, kamu tidak perlu melalui pakaian yang terbaik atau tidak. Tetapi, perkara yang terbaik adalah universal. Jadi, saya tidak boleh berkata, saya mahu grid-gap 1M, tidak lagi. Saya rasa ia akan datang nanti dan kamu mungkin dapat mempunyai kolummen grid-gap. Tapi sekarang, saya tidak dapat mempunyai grid-gap. Sekarang, saya rasa ia akan diberikan nanti. Jadi, ini adalah pilihan yang terbaik yang kamu mempunyai. Apa yang saya plan? Jadi, kamu juga boleh mempunyai grid-gap. Jika kamu ingat jauh-jauh-jauh, saya berkata, ini adalah sebabnya saya mempunyai semua orang untuk memperkenalkan pakaian yang baru jika kamu tidak sudah menggunakan Firefox. Jadi, jika kamu mempunyai dev-tools untuk Firefox, Firefox mempunyai pakaian ini. Tiada siapa yang mempunyai. Dan kamu boleh melihat ia akan menunjukkan setiap element pada pakaian yang mempunyai grid-gap. Jadi, ada dua sebabnya di bawah saya mempunyai satu lagi. Tetapi, jika kamu mempunyai 8 grid-gap, kamu akan melihat semua 8 grid-gap. Dan ia menolak kamu berubah supaya kamu tidak memperkenalkan diri kamu. Jadi, jika kamu tidak memperkenalkan pakaian pakaian, kemudian kamu boleh memperkenalkan pakaian, dan kemudian, ya. Jadi, jika kamu memperkenalkan, kamu dapat melihat. Kamu dapat melihat pakaian grid-gap, kamu dapat melihat pakaian pakaian. Jadi, saya fikir saya beritahu bahawa pakaian grid-gap ini memiliki pakaian yang boleh saya melihat pakaian pakaian. Sebenarnya saya tidak tahu mengapa saya mahu mengambilnya, sepatutnya saya sedang menikmati pakaian pada saya. Anda dapat juga melihat pakaian pakaian pakaian yang akan saya menutup selepas. Yang salah adalah keputusan pakaian director untuk melihat pakaian pakaian. Tetapi sekarang, anda tidak dapat melihat pakaian pakaian. Jadi, kesan yang digunakan perkala sebab ini adalah ujian yang penting, seperti, oh, ianya hanya 3 kolam dan 2 ujian, dan nombor saya hanya berjalan ke 4, betul? Jadi, imagine jika anda mempunyai sebuah ujian yang cukup komplik yang mungkin berjalan ke, seperti, oh, saya mahu 20 kolam. Jadi, dan jika saya mahu mempunyai sesuatu di tengah-tengah, saya akan berkata, oh, kamu tidak akan menyebabkan setiap kolam untuk dapatkan ke lantai. Jadi, apa yang anda boleh lakukan, ujian yang menyebabkan anda untuk mempunyai lantai. Jadi, sebuah ujian yang menyebabkan. Jadi, anda boleh berkata, oh, saya terlalu penat untuk fikirkan nama ini, okey, Apple Star. Tolong fikirkan nama yang lebih intelligent daripada saya. Sudah tentu, iQ saya adalah di dalam sebuah digit sekolah sekarang. Dan anda, tidak ada lima untuk berapa nama, anda boleh menyebabkan lantai anda. Jadi, bagaulah, kenapa ini menyebabkan? Kerana, saya boleh buat begini. Jadi, berdua, Apple N dan Banana Star melewati dengan selama-lamanya. Jadi, anda akan membuat kota anda lebih membuat perang. Biar saya menyebabkan alat yang bermula. Kita lihat. Krem Mary. Adakah anda menyebabkan alat? Okey, anda menyebabkan. Adakah anda menyebabkan alat? Okey, ini adalah alat yang menarik. Okey, anda tidak akan dapat melihat alat itu sebab tidak ada di sana. Akhirnya, Firefox akan menyebabkan alat yang boleh digunakan. Apabila anda sebenarnya dapat menyebabkan alat yang menyebabkan. Sebenarnya, dari perspektif UI, ia sedikit menarik. Kerana jika anda mempunyai orang yang menyebabkan. Ia akan menyebabkan 5 alat dan semua alat yang sangat lama. Semuanya adalah sebuah hipopotamas. Itu sangat susah untuk menyebabkan. Jadi, saya rasa mereka hanya memikirkan alat itu sekarang. Jadi, apa yang kita boleh lakukan selepas kita menyebabkan alat yang menyebabkan adalah apabila anda menyebabkan alat itu. Saya akan menyebabkan alat ini lebih detail nanti apabila saya menyebabkan alat yang menyebabkan alat yang menyebabkan. Tetapi, biasanya anda akan menyebabkan alat F untuk di sini. Saya akan menyebabkan alat itu sebagai 3-4. Jadi, ia seperti alat dan alat. Jadi, tanpa alat 3-4, saya boleh mengatakan alat cucumber-cucumber n. Itu sebabnya alat yang menyebabkan. Jadi, anda boleh menyebabkan alat ini dengan minuman dulu. Kita akan menggunakan alat ini sedikit nanti. Menyebabkan alat ini yang anda boleh menyebabkan alat itu. Okey, mari kita bergerak. Oh, ini adalah alat yang menyebabkan. Okey, mari kita mahu menyebabkan alat ini. Tidak. Wah, kita mencari alat ini. Ya Tuhan. Tidak, tidak alat ini. Tidak alat ini. Okey, menyebabkan alat ini. Alat 2. Jadi, jika anda tidak dalam alat ini, anda boleh menyebabkan alat ini. Dan... Alat, alat, alat. Jika anda dapat melihat ini, jika anda perlu zoom, saya akan zoom. Anda dapat melihat alat ini yang menyebabkan alat ini. Anda dapat mencari alat ini. Jadi, anda tidak perlu pergi ke alat ini. Anda dapat melakukan dari sini. Anda hanya perlu mencari alat ini. Ya. Jadi, saya akan menyebabkan alat ini. Jadi, anda dapat melihat. Jadi, jika saya mengubah alat ini untuk... Gama dan... Kemudian alat ini, anda hanya menyebabkan alat ini. Jadi, saya tidak perlu menggunakan alat ini. Saya boleh menggunakan alat ini. Ini adalah alat yang mencari. Mula-mula. Jadi, daripada menyebabkan alat ini, saya boleh menyebabkan alat ini. Jadi, saya akan menyebabkan alat ini. Jadi, saya akan menyebabkan alat ini. Di alat ini, saya ada 4 alat dan 2 alat. Saya akan menyebabkan alat ini. Saya akan menyebabkan alat ini. Okey, menyebabkan alat ini. Jadi, anda dapat melihat saya ada 4 alat. Di mana ibu berdua. 4 alat, 3 alat. Jadi, apa yang anda boleh lakukan? Ada alat ini yang lebih berkawasan, namun alat tempat yang ditambahkan. Jadi, apa yang anda boleh lakukan? Anda boleh menyebabkan alat ini. Jadi, alat ini... alat ini sepatutnya menyebabkan alat dan alat. Jadi, anda dapat melihat 4 alat dan 3 alat juga. Dan jika saya mahu mempunyai... saya tidak mahu apa-apa untuk di dalam alat itu, saya menggunakan alat ini. Jadi, untuk alat ini, saya ada 3 alat. Jadi, apa yang anda lakukan selepas anda menyebabkan alat ini adalah bahawa anda boleh menyebabkan alat ini kepada alat ini. Jadi, saya ada 3 alat untuk alat ini. Jika anda menyebabkan alat anda, alat anda berbeza, ia berbeza. Jadi, anda akan menyebabkan alat ini sepatutnya. Jadi, anda boleh menyebabkan alat ini kepada alat yang menjadikan. Jadi, alat ini adalah... jika saya mahu mengubah alat ini, mungkin jika saya membuat keputusan responsif, dan saya mahu mengubah alat ini pada alat yang berbeza, saya tidak sebenarnya perlu pergi ke alat yang menjadikan dan menyebabkan alat yang baru untuknya pada alat yang berbeza. Anda boleh langsung mengubah alat yang menjadikan. Dan anda dapat melihat, okey, sekarang ia membuat 4 alat. Oleh itu, saya mahu B untuk lebih lama. Okey, saya boleh melakukan ini. Oleh itu, saya mahu C untuk menjadikan. Saya boleh melakukan ini. Jadi, anda sebenarnya hanya perlu mengubah alat ini untuk... anda boleh langsung mengubah alat anda pada setiap poin berbeza yang berbeza. Untuk... saya rasa ini lebih berbeza jika anda membuat keputusan responsif. Satu satu alat yang pertama anda akan meletakkan nanti akan menggunakan alat ini. Tetapi, saya menyebabkan ini sedap untuk apabila saya membangun alat yang berbeza untuk aplikasi. Kerana tiba-tiba, itu alat saya sekarang. Ini sangat sedap. Kerana saya boleh menyebabkan semua alat yang berbeza dan kemudian saya tidak perlu memikirkan alat yang berbeza. Saya hanya boleh mengikirkan alat yang berbeza. Jadi, saya rasa ini membuat alat yang berbeza sangat berguna. Jadi, itu yang bergerak. Okey, alat yang berbeza sangat lama. Okey, sekarang saya akan memahami. Ada sesiapa yang sebenarnya menyebabkan alat yang berbeza sebelumnya? Ah, sangat bagus. Jadi, anda hanya perlu percayakan saya apabila saya katakan alat yang berbeza adalah seperti... saya tidak tahu... jika anda menyebabkan alat yang berbeza, ia seperti alat yang berbeza. Saya tidak tahu. Tetapi ia adalah banyak bapak. Tetapi, apa yang itu membuat ia adalah alat yang baru yang terkenal disebabkan alat FR. Dan ia menyebabkan alat yang berbeza dalam alat yang berbeza. Jadi, ini tidak menyebabkan alat yang baik. Jadi, alat yang baik di kota. Jadi, menyebabkan alat yang berbeza. Alat FR 1.3. I.O. Okey, alat 3. Okey. Jadi, untuk... untuk apa yang kita boleh lakukan adalah, dengan kolom templek untuk melihat keadaan, mari kita katakan 1 FR dan kemudian kemudian yang terakhir kita akan membuatnya membuatkan, okey, dan anda tidak sebenarnya perlu mempunyai rosu, satu dimensi jika anda perlukan, jadi saya akan menjadi lezik, saya hanya beritahu seperti itu, saya hanya mengalami sesuatu yang salah, oh maaf, saya lupa perkaraan yang paling penting semuanya hanya berlaku, anda dapat display grid, tidak ada display grid, tidak berlaku, perkaraan saya teruk okey, mari saya ambil ini, ambilnya okey, ini terlalu kecil, saya mahu zoom, saya mahu zoom iya, tapi zoom terlalu kurang, okey, jadi apa yang saya lakukan? saya ada tiga, saya ada tiga item, saya memasukkan mereka dalam tiga kolom, dua kolom terakhir saya terakhir, ada 300 piksel, terlebih dahulu kolom 1 FR, jadi anda hanya mengambil semua tempat yang tersebut, setelah browser beri, okey, item B dan item C, anda setiap adalah 300 piksel, semuanya tersebut, item A dapat mengambil semuanya, itu adalah permisian basikal, itu adalah ratio, mari kita katakan saya membuat yang kedua, dua FR, kita dapat lihat apa yang berlaku, itu, sekarang item C akan selalu menjadi 300 piksel, kerana memutuskan, tetapi sekarang tempat yang tersebut akan dikatakan dalam ratio 1-2 untuk item B dan item C, dan orang menyebabkan kenapa pembelajaran mempunyai browser 1,000 kali sepanjang hari, inilah, untuk melihat efek, jadi ini sangat digunakan untuk desain responsif, kerana anda boleh, anda biar browser membuat keputusan untuk anda, anda biar browser mempunyai bagaimana item B dan item C, kerana pada akhirnya, anda tidak akan tahu, anda tidak akan tahu, bagaimana hal yang digunakan oleh penggunaan, bagaimana hal yang digunakan oleh penggunaan, bagaimana hal yang digunakan oleh penggunaan, dan kemudian anda akan membuat sebuah keputusan, jika anda menggunakan keputusan segar seperti ini, bahkan percantajannya adalah keputusan segar, ia adalah sebabnya, bagaimana bagaimana bagaimana keputusan, FR adalah mengguna sebabnya, lebih berguna dari percantajannya, percantajannya memang sangat mudah, kerana ia adalah selalu sebuah percantajannya, dan saya rasa untuk WIF, ia tak apa-apa, tapi setiap kali ia datang untuk membuat keputusan, ia hanya seperti, 100% keputusan tidak berfungsi, hanya jangan lakukannya, tetapi anda tahu anda mempunyai banyak keputusan segar, sekarang anda mempunyai percantajannya, anda juga mempunyai keputusan segar, saya mungkin bercakap sedikit tentangnya nanti, tetapi sebenarnya, saya rasa kita patut bergerak menggunakan keputusan segar lebih segar, kerana kita hanya melihat keputusan untuk browser, yang dapat tentu-tentu mengguna lebih baik daripada anda, itu adalah unit FR, saya patut kembali ke dalam keputusan saya, keputusan di dalam keputusan, ah okey, jadi ini adalah salah satu perkara yang baik yang anda boleh lakukan, anda akan melihat keputusan ini, yang saya akan bercakap dengan segera, tetapi, mari kita jelaskan keputusan ini, dalam keputusan ini, ia berkata, keputusan tersebut adalah 3, 2, jadi anda dapat melihat, keputusan ini di atas keputusan 3 adalah 2, jadi anda akan berakhir dengan sesuatu seperti ini, kerana, ia adalah sebuah keputusan tersebut, jadi apabila saya mengguna keputusan, sebuah keputusan tersebut mengguna, dan sebuah keputusan akan mengguna semua keputusan saya, menurut kawasan, jadi anda dapat melihat keputusan ini, jadi jika anda melihat, saya menggunakan keputusan 3, dan keputusan tersebut bergerak 3 kali, jadi itu adalah keputusan tersebut, yang akan digunakan nanti, jadi tak mengapa, kita bergerak ke keputusan tersebut, jadi keputusan tersebut, saya rasa sangat baik, kerana kita tak pernah dapat melakukan ini sebelum ini, kita selalu dapat mempunyai, seperti sebuah keputusan, sebuah keputusan untuk membuat, jadi ia mungkin sebuah keputusan tersebut, tapi ia selalu ada keputusan 1, tapi sekarang anda dapat mengguna, anda boleh beritahu bahawa, saya mahu item saya membuat antara ini dan itu, yang kita tak pernah dapat melakukan sebelum ini, saya rasa ia adalah sebuah keputusan tersebut, juga apabila ia datang ke keputusan tersebut, jadi bergerak, mari kita melakukan ini, saya sedia, jadi saya akan mempunyai, anda boleh menggunakan jika anda mahu, saya sangat maaf ke depan, saya sangat lapar, maaf ke depan, seharusnya ia lebih lembut, jadi jika anda dapat melihat sekarang, dalam sebuah keputusan tersebut, sangat similiti untuk sebuah keputusan tersebut, ia hanya saya sedia ke ke-1, untuk membuat 200 piksel 1fr, jadi apa maksudnya? Ini bermaksud bahawa, ke-1, ke-1, adalah 200 piksel, ia tidak akan kurang, daripada 200 piksel, tapi, jika lebih daripada 200 piksel, ia akan membuat semua ke-3, jadi, mulai memasukkan jemput, lah lah lah, lihat, sebab sebab sebab ia memasukkan 200, ia tidak akan memasukkan lagi, kemudian, semua orang akan memasukkan jemput, jadi, 200, 300, 300, jadi saya memasukkan jemput, sebab saya memasukkan ke-800, tapi jika saya mempunyai banyak ke-1, anda akan terus memasukkan jemput. Jadi, itu penting, bagaimana fungsi Minmax. Jadi, tetapi, anda tidak dapat memasukkan ke-1, dan anda dapat memasukkan ke-1. Jadi, penting, ia sedikit similiti, jika anda memasukkan ke-1, memasukkan ke-1. Tetapi, jika anda memasukkan ke-1, dalam kolom anda, jika anda memasukkan ke-1, anda dapat hanya memasukkan ke-1, anda akan memasukkan ke-1, melewati ke-1, digunakan di bidang ini, ia sebenarnya melewati ke-1, jadi semua ke-1, di dalam ke-1, dapat terasa juga. seperti ini. Walaupun anda bertanya, bagaimana kita perlukan ke-1, ke-1, ke-1 sebab kita memasukkan ke-1? Jadi, ke-1, ke-1, yang saya memasukkan ke-1, ia untuk memasukkan, sebuah peluang yang terlalu banyak untuk menggunakan sebuah pattern yang sama. Jadi, ia tidak sepatutnya saya hanya perlu, seperti saya katakan 4, 75 pixel, saya hanya boleh mempunyai sebuah pattern yang terlalu banyak. Sebenarnya, sebuah pattern. Jadi, mari kita katakan mungkin anda mempunyai sebuah pattern 3. Anda seperti, oh, saya mahu mempunyai sebuah pattern 1, 2, 3, 100. Sebuah pattern 3 saya mahu mempunyai beberapa kali. Dan saya memang tidak mahu mempunyai beberapa kali. Anda dapat menggunakan fungsi repeat. Jadi, sebuah argument pertama adalah sebuah kali yang anda mahu mempunyai dan kemudian sebuah pattern. Jadi, anda dapat menggunakan ini. Di sebuah contoh ini, ia mempunyai 4, 75, 20. Jadi, anda dapat melihat, oh, saya ada 8 kolummen. Saya rasa itu sangat menarik. Jadi, semua orang mungkin mempunyai sebuah penggunaan. Jadi, sebaiknya yang menjelaskan sebuah kali yang anda mahu mempunyai. Kemudian, sebaiknya yang lebih jauh di biarkan sebuah penggunaan mengambil desain anda adalah kemudian, hanya sebuah penggunaan akan tahu bagaimana, bagaimana kemungkinan anda apabila sebuah penggunaan melihatnya. Jadi, ia adalah alat-alat yang anda dapat menggunakan sebagai sebuah argument. Sebaiknya, sebuah penggunaan yang mempunyai 3 atau 4, ia adalah penggunaan yang mempunyai. Anda dapat menggunakan otofil atau otofil. Mereka sangat berbeza dalam bahawa anda beritahu sebuah penggunaan yang, oh, okey. Ini adalah penggunaan penggunaan penggunaan atau penggunaan penggunaan, kan? Minimum dengan 100, maksimal dengan apa-apa pun yang digunakan. Kemudian anda beritahu penggunaan, okey, penggunaan anda akan menghasilkan seberapa penggunaan yang anda inginkan. Jadi, penggunaan anda tahu sebuah penggunaan sendiri. Jadi, apabila penggunaan anda mempunyai sebuah penggunaan untuk KTV, anda tahu ia akan mempunyai lebih banyak penggunaan daripada jika saya melihat ini di telefon saya. Jadi, sebuah penggunaan ini hanya menunjukkan perbezaan antara 2 penggunaan otofil dan otofil. Jadi, apabila ia adalah otofil, jika anda melihat penggunaan penggunaan yang digunakan, kerana sekarang, penggunaan penggunaan minimum adalah 100. Penggunaan penggunaan dapat menggunakan lebih daripada 6 penggunaan. Jadi, anda akan menghubungi bahawa saya sebenarnya boleh mempunyai 2 penggunaan. Mari kita lihat jika saya boleh menunjukkan ini. Kita mahu menunjukkan. Ketua, apa? Ketua, apa? Menunjukkan. Jadi, jika anda dapat melihat, penggunaan menghubungi bahawa anda boleh mempunyai 2 penggunaan. Jadi, ia menunjukkan perbezaan yang benar. Tapi jika saya menunjukkan penggunaan, anda akan menghubungi penggunaan otofil. Jadi, jika saya menggunakan penggunaan otofil, anda akan menghubungi semua penggunaan yang digunakan. Otofil akan menghubungi penggunaan otofil. Itu adalah perbezaan. Jadi, ini adalah sebuah bahagian yang paling menarik menggunakan sebuah mekanisman untuk menghasilkan kegunaan yang biasa untuk saya. Jadi, jika anda membuat kegunaan kecil, atau kegunaan yang sangat popular, untuk banyak hal, ia berguna untuk anda membuat banyak kegunaan media. Kerana, itu sebuah pemeriksaan yang biasa kita lihat. Mungkin e-commerce website dan sebagainya. Jadi, pemeriksaan saya akan berkata, Hey, saya mempunyai 6 kolom. Boleh anda mempunyai 6, 5, 4, 3, 2, 1? Saya akan berkata tidak. Sebenarnya, ya. Sebenarnya, ya, saya boleh mempunyai 6, 5, 4, 3, 2, 1. Tapi saya akan mempunyai banyak kegunaan media. Dan pemeriksaan saya akan sangat berguna. Jadi, saya menghubungi sebuah kegunaan ini. Saya akan berkata, Anda perlu beri saya banyak kegunaan. Jadi, saya dapat mengguna 4, 2, 1. Saya dapat mengguna 6, 3, 1. Saya tidak dapat mengguna 6, 5, 4, 3, 2, 1. Saya tidak dapat mengguna 6, 5, 4, 3, 2, 1. Saya mengguna kegunaan kegunaan itu sepanjang masa. Kerana ia terlalu banyak kegunaan. Ia terlalu banyak kegunaan. Tetapi, dua kegunaan saya dapat mengguna 6, 5, 4, 3, 2, 1. 5, 5, 5, 4, 3, 2, 1. Tapi menggunakan kegunaan autofill. Jadi, kegunaan autofill, lagi, saya akan menyebabkan untuk contoh ini, saya akan menyebabkan. Saya akan menyebabkan sebuah browser. Saya mahu mempunyai kegunaan minimum 10A. Dan, untuk mempunyai browser, anda sendiri akan menyebabkan. Browser akan menyebabkan berapa banyak kegunaan yang saya perlukan. Jadi, jika anda melihat contohnya, di atas kawasan, saya dapat mengguna 5 kegunaan. Jadi, ia akan menyebabkan 5 kegunaan. Sudah tentu. Tapi jika anda berfikir tentangnya, jika saya mempunyai 5 kegunaan, untuk mengguna sempurna, ia akan menjadi 50A. Tetapi, jika saya mempunyai lebih besar daripada 5 kegunaan, tetapi tidak hanya 6 kegunaan, jika anda tidak menggunakan kegunaan, anda akan mempunyai sebuah kegunaan yang mengguna. Saya akan menyebabkan contohnya adalah 55A. Dan setiap kegunaan adalah 10A. Mereka akan mempunyai 5A untuk kegunaan yang mengguna. Biasanya ia sangat susah untuk berguna. Tetapi dengan kegunaan FR yang anda perlukan, sebab saya berkata, jika ada kegunaan minimum 10A, tetapi jika ada kegunaan yang lebih daripada 10A, anda boleh menyebabkan. Jadi, 1 FR akan menyebabkan 5A kegunaan yang sama di antara 5 kegunaan. Jadi, jika anda dapat melihat sebuah kegunaan, ia selalu mempunyai kegunaan-kegunaan dengan sebuah kegunaan. Tanpa saya mempunyai kegunaan yang lebih berlainan, anda akan mempunyai kegunaan yang menarik. Selepas itu, saya akan mempunyai kegunaan. 100% menyebabkan dengan 5% berapa banyak kegunaan untuk mengambil sebuah kegunaan untuk kegunaan yang mempunyai kegunaan. Tidak, tidak perlu. Anda hanya dapat membuat kegunaan. Dua kegunaan sangat bersih. Dan ia selalu mempunyai kegunaan. Dan bila-bila anda tidak mempunyai kegunaan untuk mengguna 5 kegunaan lagi, saya akan memperlukan kegunaan ke 4. Jika anda mempunyai kegunaan, ok, anda tidak mempunyai kegunaan untuk 4. Mari kita pergi ke 3. Saya sebenarnya boleh mempunyai kegunaan 5, 4, 3, 2, 1. Jadi, saya akan mempunyai kegunaan yang menarik. Anda mungkin tidak begitu menarik kerana anda tidak pernah mempunyai kegunaan sebelum ini. Tapi jika anda mempunyai kegunaan sebelum ini, anda sangat menghargai kegunaan ini. Hanya berkata, itu sangat berguna. Bergerak. Selepas itu, kita ada kegunaan yang berlaku kepada kegunaan kegunaan. Jadi, dua kegunaan untuk menggunakan kegunaan CSS itu i.o. Ia adalah, anda pertama mempunyai kegunaan anda. Jadi, anda fikir tentang kegunaan yang anda ingin membuat, anda telah mempunyai kegunaan. Selepas anda mempunyai kegunaan anda, anda ingin memulai kegunaan kegunaan. Jadi, kegunaan yang saya suka adalah kegunaan kegunaan. Anda mempunyai kegunaan kegunaan anda, dan kemudian anda memulai kegunaan kegunaan anda tergantung dengan kegunaan anda. Jadi, kegunaan kegunaan anda, seperti yang saya beritahu, ia menggunakan kegunaan kegunaan. Itu adalah kegunaan. Jadi, apa yang anda akan lakukan, anda akan, ini sangat mudah. Saya akan meletakkan kegunaan. Ini sangat berguna. Saya tidak mempunyai kegunaan ini. Saya akan meletakkan semua kegunaan saya. Kerana saya tidak dapat melihat... Ayo, saya rasa saya salah. Di sini. Jangan menggunakan kegunaan kegunaan. Okey, jadi anda dapat melihat, untuk kegunaan ini, anda dapat melihat kegunaan kegunaan. Jadi, saya meletakkan kegunaan kegunaan saya pada kegunaan kegunaan. Jadi, untuk kegunaan, mulai pada 4, 4, 5, 2, 3. Jadi, itu cara saya meletakkan semua kegunaan. Anda dapat meletakkan kegunaan atau apa-apa saja. Apa-apa pun yang anda mahu. Jadi, anda sebenarnya hanya beritahu, bagaimana anda mahu kegunaan anda menjadi. Kegunaan kegunaan dan kegunaan ini sudah sedia. Untuk kegunaan yang lama, ia sebenarnya kegunaan kegunaan. Untuk kegunaan kegunaan. Jadi, dengan kegunaan, setiap kegunaan akan menjadi sebuah kegunaan. Jadi, jika saya tidak lakukan apa-apa, sebuah kegunaan saya akan segera mengambil sebuah kegunaan. Jadi, ok, saya memasukkan kegunaan, jadi saya mengambil kegunaan kegunaan. Tapi, semua orang tahu kegunaan kegunaan adalah perkara pertama. Jadi, saya dapat membuatnya banyak kegunaan. Seperti ini. Ok, perkara pertama saya adalah actually the apple. Jadi, ia tidak perlu mengambil sebuah kegunaan. Kerana, tergantung dengan kegunaan anda, anda mungkin ada perkara yang lebih lama atau lebih jauh. Jadi, kegunaan ini, kegunaan yang pertama adalah di mana anda mahu memulang dan kegunaan yang terakhir adalah di mana anda mahu memulang. Jadi, jika saya tidak memulang apa-apa, kegunaan adalah kegunaan. Jika saya tidak memulang kegunaan yang pada komparable untuk memulang kegunaan kegunaan yang satu. Jadi, ia ialah perkara kegunaan yang berkulam dan kegunaan yang yang terakhir dan hanya memulang kegunaan yang satu, memulang kegunaan yang satu dan kegunaan yang dua. Tapi anda pun mesti memする untuk membuat kegunaan yang tujuan dan bagaimana anda mahu. Saya memilih menggunakan kegunaan kegunaan yang terakhir istimewa memulang kegunaan kegunaan yang terakhir Column N6, kerana saya sedia. Jadi saya sediakan bahawa anda lakukannya juga. Jadi, daripada menggunakan nombor, jika anda ingat, awal-awal kita bincangkan panggilan nama. Jadi itu cara anda boleh menggunakan panggilan nama anda juga. Jadi, ya. Jadi itu basically bagaimana anda mulai mengembangkan item-items di grid dan bagaimana anda mulai mengembangkan desain yang anda mempunyai di minit. Bergerak. Saya sudah beritahu ini. Jadi, ya. Bergerak. Jadi selepas... Okey-okey, ini akan menjadi menarik. Apabila saya membuat panggilan ini, anda lihat saya mempunyai panggilan nama saya. Dan biasanya, ramai orang tidak mahu... Anda mahu dapat mengajar panggilan anda. Seperti... Saya rasa penggantungnya adalah sebuah konsep desain yang sangat popular. Semua orang mahu menggantung semuanya, jadi saya tidak tahu mengapa. Jadi, apa yang anda ada adalah... Anda mempunyai beberapa panggilan yang mempunyai... mengembangkan desain yang anda mempunyai di dalam panggilan di dalam panggilan yang anda mempunyai dan sebagainya. Jadi... Punggilan... Panggilan desain yang mempunyai... Jadi, jika anda mempunyai panggilan panggilan, mereka akan mempunyai... berapa banyak orang tidak dapat ingat... mempunyai desain yang anda mempunyai dan mempunyai desain yang anda mempunyai? Jadi, ini adalah... ini adalah pilihan saya sendiri yang mempunyai. Saya tidak tahu jika ia berfungsi untuk anda, tetapi ia berfungsi untuk saya. Semua orang mempunyai panggilan di dalam hidup anda. Semua orang mempunyai. Jadi, anda Helempung fort changer wake-up mempunyai panggilan di dalam hidup anda. Henry jelas apa prove价 di GPUs, dan anda lepaskan program yang disambung іHelepًah menjadikannya. Jangan mementuhi akibat saluran dalam panggilan yang글도.ukurnya, quasi peribadi dalam panggilan. Jadi, dapat man triple-up. Jangan mementuhi hal yang disambungi. Colort tumbuhan panggilan di se nostalgia ialah... ke arah ini dan tidak lupa. Ini untuk saya. Ini tidak berlaku untuk anda. Saya tidak tahu apa-apa lain. Untuk saya, jika anda mempercayai kawasan yang cukup terlalu tepat, tetapi dalam jika anda mempercayai kawasan yang terlalu tepat, ada tiga perkataan, iaitu konten, jika anda mempercayai kawasan dan item. Konten, anda perlu faham bagaimana ia berlaku. Kemudian anda akan ingat konten yang terpercayai adalah apabila perangku kontainer anda lebih besar daripada daripada beberapa perkataan anda. Selain ini akan berlaku jika anda mempercayai kawasan yang cukup terlalu tepat kerana jika ia lebih tepat, anda akan mempercayai kawasan yang cukup terlalu tepat, kemudian perkataan ini tidak menggunakan lagi untuk mempercayai kawasan. Untuk saya, konten kawasan yang cukup terlalu tepat saya ada tiga perkataan tetapi setiap perkataan adalah 200 perkataan. Sebenarnya, di sebuah matematikal, jika anda mempercayai kawasan, 3 x 200 perkataan adalah 600 perkataan. Jika kawasan saya adalah 800 perkataan dan kawasan saya adalah 600 perkataan, saya ada 200 perkataan yang dipercayai. Jika anda dapat melihat kawasan ini, jika anda mempercayai kawasan yang lebih tepat, anda dapat mengadakan kawasan yang cukup terlalu tepat pada mana anda mahu mempercayai kawasan. Jadi, anda dapat mengadakan konten yang terpercayai untuk mempercayai konten di dalam perkataan. Untuk mempercayai kawasan, jika anda melihat kawasan yang cukup terlalu tepat konten di dalam kawasan yang cukup terlalu tepat, sebab sesuatu, tidak sepatutnya konten di dalam kawasan akan mengambil kawasan. Kadang-kadang anda akan mempunyai kawasan yang cukup terlalu tepat dan kawasan yang cukup terlalu tepat untuk mempercayai dalam perkataan. Kemudian anda mempercayai kawasan. Kawasan mempercayai kawasan untuk kawasan kawasan. Kawasan konten untuk kawasan seluruh dan mempercayai kawasan yang cukup terlalu tepat untuk mengadakan aplikasi untuk kawasan sama-sama jadi anda dapat membuat semua kawasan kawasan di atas So items, it's like everybody all together, then self is for individual or you could just try to memorise this table, I don't know. So that's what you can do. So in this example, we can see how it looks like. Justify and align content can do content distribution as well. So just now what I describe is positional alignment, meaning I can make all my columns centre, start, end. But I can also distribute my grid items using the justify and align content properties. So for positional, the values is start, centre and end. But to distribute properties, you have also three other properties. You have space between. Space between means that all your items, yes, they are evenly distributed, but they will meet the age of your parent. So that space between, we have space evenly whereby let's highlight it easier to see. And I'm going to remove the grid gap. So when we're at space between, it goes to the space between each item is equal. And the age, there's no space between the age of the item and the age of the container. For evenly, everything has an equal amount of space around it. So you can see this width is half, this distance is half of this distance. Because it's evenly, the space is evenly. And then we also have space around. Space around, this is a half width of, there's a handy table I'll show you later. This is just confusing to say in words. So for the first three, those are the positional values for justify content and align content. So start, end and centre will shift the whole thing. Space around, so I use two different colors. For space around, the amount of space around each column is the same. So it becomes a double space in the middle. But for space evenly, the space is distributed. So depending on your design, what effect you want to achieve, you can use these three properties accordingly. Okay, so this is for justify and align self. By default, the default property is that the grid item will stretch and take up the entire space of the grid item that you align. So for example, in the very first exercise that we did, it was 150 pixels and 100 pixels. So that's the size of my grid item. If it was the case, that means that by default, the space allocated is stretched, fill up the whole area. But I can also align it. So for this one, you can see, the moment I set a value of start, centre or end, the amount of space given to my grid item, it will shrink to fit. Shrink to fit. So B actually only takes up this much space. Actually A also only takes up this much space. So by default, it's stretched. So the moment I give it a value, it will shrink to fit. So for B, I assign it to start. So I put align self start. So we all remember align is along this axis. So start is at the very top. For C, I gave it end. So it's all the way at the bottom. For D, I gave it centre. So it's in the centre. But for all these three, they shrunk to fit. So that's what happens when you use these properties. For items, it's just everybody altogether. So if I was going to do something like start, everybody justifies to the start, everybody justifies to the centre. So items is for universal pattern. Oh, so fast demo lewa. Okay, great. Eh, you'll need a break or not? No need? No need? Great. So the first example is in the dashboard folder. Let me try and open it. So this is how it should look if you downloaded it. Like it's just like that. Some colours on it because I was feeling particularly colourful when I created this. The end result should look like this. Hold on. Yeah, end result should look something like this. That's the end result. So starting result got nothing. So I think if you look at your styles folder, it's perfectly empty. I know the front part is just resets and some colours. So the classes set for you already. So how do we turn it from nothing to that? So the markup is pretty simple. Just stack, stack, stack, stack. So we want to define the grid first. So that's actually why it got pencil and paper. Let's just look at the end result. So on a large screen, how would you draw this on paper? Like how many columns would you use? How many columns would you use for this? 2, right? Rose eh? 3. Right? So it's actually very straight forward called you draw. So this actually spans 2 rows which is perfectly acceptable. It's not 4,4. For every adish, depending on your design, you have to count the most number of rows and use that. So for this, it's actually a 2x3. 2x3. Ya, 2x3. But then when it's less than, when it's like, after it becomes smaller than a square, so it's kind of semi-portrait-ish, it will become like this. So like this columns is straight forward, 2 columns. But rows becomes 4. So that's the difference. And ideally when you draw it out, then it makes it easier to plan. So what we do is, that's why there's a media query written already. I want to introduce one because most people for media queries, the with query, mean, with, max, with, that's everybody has sort of seen before. Has anybody heard of this particular media query called mean-aspect ratio? Okay, I'll type it up. Ya. So this media query I find it quite useful as well because how you define it is a ratio. The syntax is, it has to be 2 numbers. You cannot just ratio 1. That's a syntax thing. So you can, the ratio is with height. So let's say a landscape would be something like 8, 5. That's a landscape view. Then like 1, 2. So it would be like 1 is to 2. So this is the aspect ratio media query. So for this particular design, the moment that it's less than it becomes portrait mode, let's say portrait mode I want it to switch. Landscape mode. I want it to be the white one. So I rather than actually defining a defining a width because I'm not sure what's the height of my user's viewport because sometimes it could be that it's it's really short but with query we don't know the height. I think this is more useful because for something like a dashboard, it could be really small but as long as it's rectangular it might still work that sort of thing. So for this particular use case maybe can use mean aspect ratio. I mean if you want to use width you can also free to use width. This is not a this is not a dictatorship you can do whatever you want. But for this example, I choose to use the mean aspect ratio media query so that the landscape and the portrait layout is different. So for this one it's a mean aspect ratio. So the code for this one is for landscape mode and then the code the default code can be portrait mode. So I cannot remember my markup. Hold on. Okay so we can just define display grid on the body first then we just now we already mention that we wanted it to be two columns and two rows. Okay So depending on you so I'm not going to limit how you want to size your column me being lazy I just make it equal with as for rows right? I'm going to introduce a new value called mean content. I will explain mean content very soon. Wait let me switch back Okay before and after So another keyword value that grid that grid introduces is mean content and max content. So it just means the minimum content with and the maximum content with. Okay let me mess around and see for example mean content just means So for inline elements right? So a line of text is a inline element the mean content is actually the length of the longest word. So for my first column the longest word is dashboard so it will shrink to fit until dashboard If I do max content this line is the longest this ah ah ah lefrak lefrak BA because I obviously am not very creative it will it will take the maximum content to size the column So you want anything? No? What's happening? Okay So these values are useful when you are dealing with text content I feel you can think about let's say there's a particular line that you just you don't you don't want it to wrap but you want that column to always be able to contain that line you can use mixed content So for example I want up up down down lefrak lefrak BA to just be a single line If I apply max content it will the entire that will be the biggest so it will take that it will take that length if everybody else is okay your extra space but it will always fit this just nicely So conversely for mean content it will go for the the longest word so everybody else just wrap and follow so dashboard because I cannot break the word dashboard it's a word right? I can two word I can break it but I cannot break the word itself I cannot make it like dashboard R then D bring down cannot the browser will not do that so it will take the longest word so that's the difference between mean content and max content so if you think about it from a high perspective it also works how's it? go and drink tea come back later 20 minit can feel it easy 20 minit can come back 11 call ah see on the floor it's warmer down here I'm not going to sit on the floor like stop try to fool me on the rostrum guys okay hi everybody got back right so when we left off when we left off we just started finding the grid so I did it right most of the time when I'm doing grid I will almost always have it on have this on because so when we just define the grid right now it's very basic it's just a grid I have 2 columns that are both 1fr each so what this means is that it will always be half half of whatever right and so just mention the mean content max content property so it always it also works for rows so if you if you notice for the this is a H H1 I think I put it as a H1 can't remember can tell can tell okay it's a H1 so by default the browser probably makes it 2M the one at the bottom is just a normal browser default so when I put mean content it will shrink to fit so I don't have to really think about how to size the height of my columns I chose to just you know browser you just go and fit the minimum height of my text and leave it so that's why I chose to go with mean content and mean content for the bottom column as well because you see it will take the biggest one and H1 is obviously bigger than a P so you will have to follow the height so you always fit so you won't get things overflowing so that's the reason why I put put these values but then as you resize this right and cause this is a wonderfully wide beautiful TV which I want to steal home this doesn't this is growing a bit too much growing a bit too much for my liking so what can we do for this I'm thinking like now in the back of my mind I'm thinking maybe we should cap we should cap the growth so we can make use of the why don't we just make use of the mean max function and I give it a minimum and a maximum because you don't necessarily have to use 1fr as the maximum if you don't want to so I just want to give it a range of growing and shrinking so I chose these arbitrary values and you can choose your own arbitrary values if you want to but the point here is that it will just grow and shrink is everybody familiar with viewport units like do all of you know what VW is everybody knows right so again I chose this arbitrary because I like 45 viewport units probably okay as it grows cause I don't want it to be fixed I want it to be kind of flexible but not too flexible so okay we think this is a bit too much let's go with go with 30 and see how it looks this is a big reason why I don't do things like because I like to code in the light and I can see my differences okay so 30 ayah never refresh 30 looks better actually so let's go with that okay but 20 doesn't look very nice cause my A got cut to the bottom actually I can also mean content let's try mean content oh no no no no no wrong wrong wrong value max content refresh eh okay this is not bad this is not bad I can live with this I can live with this let's try max content la welcome to the most any howly workshop you'll ever be so one thing you will realise is that this one FR is a mark of free space why is it not taking up the full length so another like let's start inspecting this problem this problem arise like I said right doing height doing percentages so it's not a fun one because if you notice right it is taking up all the free space but my body element only with just 300 so we should add this here and height 100% on body only works because I already added it into html if you I think if you didn't I'm not sure it will work or not eh try again ya if you didn't add it to html right height 100% doesn't work so that's the that's the quote of using percentages so let's say if we really don't want to do this right I can use instead of percentage is you just use viewport unit so it will just take up the height of the viewport the thing about viewport unit is a bit tricky to manage height or width so it's not relative to a container it's always relative to the the height and width of your window so it might be a bit trickier to manage if it's nested within many components it might end up the sizing might be a bit odd so they still use cases for percentages and they still use cases for viewports some I have done design where it's all viewport based but I had to do the calculations outside by hand meaning oh ok if this is 50 my container is 50 VW and I want it to be like 20% then I have to do the calculations I do the maths by hand outside you can do that if you want to fully viewport unit later I will show you a demo of a completely viewport unit I did a lot of maths outside but for now that's later for now so we have this we've settle on you max content so the the layout the grid is ok already so now we just need to place the items correctly what was my end result again I have a slide for this come on wait boss dashboard statistics wait wait statistics on the top score at the bottom ok so for this particular use case this is the one where I want to use grid template areas so what we can do is reference so the title title on the top the second column we have stats wait let's call it stats lah cause I lazy the syntax is each row is quoted then next one is score then stats again and then what's this call ah what do I call it I didn't call anything let's call it board and then we can call this don't know what I call it controls but and again you can name this anything you want ok go ahead and use like cucumber or whatever so if you can remember what I mentioned earlier right these corresponds to these will correspond to how it looks literally so in a set right my stats will take up the I have 4 wait ah 1 2 oh something wrong wait I'm missing 1 row mean one more one more mean content ok I add one more row because I want the score to be to be the fit the score as well so actually it's 4 rows 4 rows so because it's 4 rows so title first row score second row stats will span both rows board takes up its own space on the third row controls take up its own space on the fourth row and both board and control will span 2 columns so this is how it looks it corresponds to this so we're happy with this so after we've assigned the grid template areas we assign each element you put it into its own area using grid area so grid area singular not plural no s grid template areas yes plural got s so you have to sort of like take note of this syntax and if it doesn't work right maybe it's a spelling problem for grid area right no quotes just the raw whatever string you put here you can try with quotes cause it won't work so type type type and it so I think ideally right you would like to put your your grid template areas right don't make the spelling too complicated cause also you might mistype something and then you'll be very confused to why it doesn't work so don't spell things like necessary or you know the kind of funny words that everybody gets wrong right just a pro tip okay I hope it works so it should look different from just now refresh you all get this turn around and look at you if anybody didn't get this no response yes any problem? got problem? no problem? great so the nice part about the DevTools is that you can actually see your names you can toggle it on and off it's very irritating it's blocking your words you can turn it off but I think it's very helpful to have it so you can know if you assign your area to the correct place or not and you can also see if like let's say for example let's go back to my original mistake then I take away one of these I actually not sure what happened so let's see what happened then you can see something wrong already because it looks really weird one thing that I didn't mention just realise that instead of the the board being instead of the board being the larger area it became the stats so you realise that it doesn't correspond to what I am to what I am allocated the thing is the browser is smart enough to know that if I actually define four rows it will implicitly generate one more row it's just that because I didn't I didn't define the size of the row the browser just automatically define it for me but it will not break your layout completely it will just make it look weird anyway let's just make it normal so this part is settled already so what we want to do next is the one is the layout the white layout so let's look at how the white layout is supposed to look like play okay look like this so the layout has kind of changed a little bit this is the one with the three rows and two columns instead so what we will do is we will adjust these two remains the same don't need to copy over just copy this over into your media query okay then we can start modifying things so it looks like this so I think we can keep the columns we just need to change the rows so let's take out one row so this works but we will reject the positioning of where we want to place each item change the template areas so now we only have three rows so now we want title up top stats have moved stats have moved to this place the bottom one is score now the board takes up two cells here controls maintain save everybody can get niche right can or not no problem ah so the layout set so now the issue is alignment so we want to run through how to align things properly for the ridiculous text let me read what I've got this is supposed to be again okay we want to centre this text so off the top how will you centre this in the centre we look at the markup board so based on the alignment properties that we talked about earlier how would you centre the how you centre the rubbish text that I wrote there in the centre of the board anybody? like what properties will you use align what because there are three oh they turn off the acorn okay so we had justify content we have justify content we have justify self justify items so which one would we use someone say content someone say itself so if you don't know just try and refresh this is how web developers work folks so we will go to the board we try we try the vertical axis first align content spoiler alert nothing happens because it's not self will do something but not what we want it to ya so this is the if you remember when I showed I kept saying that once you apply a value to the align self property so in a sense it is correct it aligns it to the centre but that's not necessarily what we want because we still want the game board to take up the entire space so this is why flexbox and grid are meant to be used together so what we we will still want to use the align self property just not on its own what we want to do is we will make the board grid item itself a flex parent so once we do this we can get this whilst maintaining the size of the grid item so the grid item is still a grid item it still uses its default value of stretching the entire area of the self but then we can align items within it when it itself is a flex parent so we just do the standard flex things let's wrap then 100% then get something like this so we don't want to use align items we use align content and we do flex align center then content center so then centered okay let's talk about this situation when you use flex i know this is not part of grid lah but flexbox is relevant the alignment properties on flexbox are a little bit different from grid very similar but the behavior is different because both properties are for different things in the very beginning i mention that flex is single dimension so for this particular case when i say flex wrap it will wrap around so what align what align content does is that it will align the lines as a unit if i use align items it's actually aligning each so can you imagine the flex sign because i put width of this to 100 so the next one has to wrap down and then there's a flex line so it kind of looks like i have a slide for this wait la la la google developer day where is it yeh Beyonce so how it works is that when it wraps down right these purple lines are called flex lines right align items instead of the whole thing align content will align the whole thing but align items actually aligns along the line so if it flex it will take up the entire height so it becomes like that that's why it's very spaced out when you use align items it's actually centering also but it's centering along the flex line so that's the difference so i will use content because i want content to be treated as a whole and centre at the centre so that's why you use align content so justify content shifts you actually need to start it will be at the left simply because this text is smaller than the width of my entire cell so it will shift as a whole if i did not centre it would just be a left align to the left so in this case i want centre everything so when it's centred it will just move to the centre so the text align centre is to align everything to the centre because this is correct it takes up 100% so it doesn't shift when i use justify justify content so to centre everything centrally i will use centre three things for this particular item so that's why it's a trick question and that you have to actually make this board grid item itself a flex parent are you all confused you're not confused right very clear right great thanks love you all so for controls how should we centre the controls text anybody why you all like that actually this one not complicated just text align centre can so that's that's it that's how you get the end result so alignment is set out and it should work properly my file force is broken so i'm going to do this so i'm assuming everybody can get this effect not a lot of code everything align nicely it's responsive that's the first example the next example is this i was informed that this was very complicated so we have i don't know one hour let's see lah so this particular design kind of look like something like this something like this let's try to build this okay so the code is in here the markup the markup preparer ready the markup font and image is preparer ready so if you load it let me try and load ah okay this is how it looks like without any styling okay this is the most basic of basicness so without any styling it looks like this so at the end of the day the markup the markup structure is actually important because if you are around for the accessibility talk you will understand that screen readers follow the markup order so you would want to set up the markup in a semantic way in a sense that okay my h1 my title comes first and i think a good way to check how semantic your markup is is not have any styles to begin with you just write a markup first and you see how it looks like so this is quite reasonable i feel from a semantic perspective so first things first is to get this how would you break this down into a grid like how would you divide up everything so that's what the pen and paper is for where's my pen and paper so let's let's try and break this down my from the results of my planning 1 2 3 4 5 6 i end up with 6 columns because let me explain this is one column this is another column this probably needs to be another column and then this artist spotlight would be in his own column and then this read more is one more column so 1 2 3 4 5 6 these items because we can span multiple columns we want to reduce to the smallest how i plan the columns and maybe you might think of it differently i'm just going to share how i plan the columns in my mind it's like the smallest component each have its own column so when i see this design this is the end design that i copied when i start to plan the columns i would think that go for the smallest component so ideally you could have this as one column but then it's very hard it's going to be a bit hard to align this so i would rather have this in his own column and this full text can take up can consume 2 columns because this and this i would like them to maintain their width i just want it to i give it allocate its own space but this is a length of text that i feel can grow and shrink so i give this one its own column and let me take a for this space actually i actually gave the space its own column as well because eventually you want it to grow you don't grow too much you want to maintain a space at the widest length so actually you can choose not to give it so this part this part is actually optional it depends on how you want to code up the design because the original design is full length they had this very nice white space but when you think about it when you compress what's the first thing that you can compress from a design perspective in my mind the first thing that can be compressed is this white space because when i don't have that much space to work with i wouldn't want to immediately shrink my text i want to keep this length because it's quite a nice comfortable length as much as possible so what i chose to do is i introduce an additional column technically not necessary but from a design perspective i allow this to be a collapsible space so that's why i end up with 6 columns so this is the end result i don't know if y'all can see but it's 6 columns 1,2,3 free space 1,2,3,4,5,6 i was wrong read more is actually part of him so 5 is for text you can see because this line is actually in the 5th column so this actually one is together then this one is together so artist spotlight is his own column so 6 columns then for rows rows is a bit more straight forward just 4 1,2,3,4 so 1 for the title 2 for here this one 3, this one 4 so it's 6 columns 4 rows so this is a bit more of a this is why you need the pencil and paper because if you did if you look at this actually the first pass i didn't come out with this i took me multiple passes so the first pass i actually only had 4 i had 1,2,3,4 i didn't account for this part yet but after i thought about it i was like ok the extra column came in from here and then for this one i realised i would rather give the 2 word dates his own column but if you don't want to give 2 word dates but this column it can become 1 column also depends on how you want to shrink things so to me when i started designing with grid there was also a lot of pencil and paper so you can draw and redraw so like i mentioned in the very beginning designing layouts with CSS grid you have to have the big picture view you have to know what you want to achieve at the end of the design first up front to plan on paper first and once you plan on paper everything else becomes much easier because once you have got this final layout down the rest of it is just tweaking the sizes like we did just now so that's how i got my 6-4 alignment so let's go with the 6-4 thing i don't know if i should just pass this around and you can take a look i don't know if you want so that's the 6-4 thing so let's start doing it if you are lazy the actual colours you just go to the final and then you just copy and paste i forgot to port it over so just copy the colours and styles first my bad all this is not agree later so just copy over we take a look at the markup first so main is the whole thing the base styles i start off with is for browsers that don't support grid so we want to take care of the fallback layout first because at the end of the day there are still going to be browsers that don't support grid we don't want the layout to be completely broken we don't want it to be completely plain so we just give it a very basic style so what i did just now what i copied over this one it's just to cap we don't want the lines to go too wide so we cap it and centralise it in order to make your images responsive just put this is just standard practice max with 100% then you won't overflow so this is reasonably decent i suppose and then what we have is we can do let's do the okay this is fine h1 you know what let's just cut this short if you look at the final css you copy all the way to line 98 and just paste it over so you open this one go all the way down to 98 speed everything i'm very tired i cannot already so basically until until the support query until here hall just replace everything ya i'm sure look at this tired ah of course this part it's not grid it's just a fallback we can do this without grid it's fine so it works on opera mini it's the most basic one you can you can see the title it's kind of decorated but it's quite straight forward single column nothing special then the two days just kick to the side so once we've taken care of the fallback then we can start layering on the fancier layout so as everybody seen this particular query before ad support is this new to anybody have you never seen ad support in your life please let me know then i will explain why it is so everybody familiar with media queries right so in css the query syntax usually is like an ad media is media query is a conditional so it allows us to have if else statements inside css so one of the few things where we can have logic in the css to media queries in that if the query is true then it applies the styles within the block so for ad supports ad supports the the term we call teacher queries and the condition is within the parenthesis so inside the parenthesis i will put the property that i want the browser to test for so the browser knows itself and the browser i know okay i support grid or i don't support grid i support css shapes so browser when it says ad supports it will examine the rule inside the parenthesis and it will check okay display grid ad support grid or not if i do support grid i will apply the styles within the block if i don't support grid i will ignore everything inside the block so this is good because whatever you write inside grid it will not bleed out so it becomes if css grid is supported then everything inside the code block applies but if i don't write everything all together so your base 4back will never break your 4back code will always work it will always look like this even if your browser doesn't support grid the styles inside the grid will not bleed out if your browser does not support grid that's how it works that's why it's called a feature query so the syntax is pretty straight forward is ad supports s u p p o r t s okay and then parenthesis it will have to have the parenthesis if you don't have the parenthesis it will not work because the browser will pass for the property within a parenthesis so that's just that's how it works and that's why we use it the media query looks a bit complicated so just but it's not lah it's basically a combination so for media queries you can chain multiple media queries together we have to only use one and in total there are actually 13 properties you can query but nobody uses all of them so just now i introduced one lesser known mean aspect ratio i think there are other things like color and things like that but what you can do is you can use the n keyword to chain only apply if both are true it's like just logic so you can use and i think you can use all to apply when these two conditions are met that's why it's there and that's why i wrote it for you so you don't have to think about it so let's go and see when but even though the styles inside don't bleed out right you will still have to do a little bit of resetting on the inside so for the browsers that do support grid there are some things that you want to reset that's why if you look at it's easier to just go through max width and padding i set to none these are resets because for this fallback layout i did give it i did give it a max width and i did give it some padding but if you notice this one is edge to edge no padding so we want to reset that when we apply grid reset so that's why we have the max width none and padding zero is a reset so the next thing we do is we apply grid so after you reset so stretch up so this is the base that we work with so then let's put on the grid so just now we already i already explained through why i had columns and okay this is the very complicated part that i will go through why i made this decision so to make everybody's life easier just copy and paste guys it's going to look weird but don't worry that's cause we haven't placed the properties yet turn on grid so easier to see by default if we do not place the browser will just each element each grid item will be placed inside each grid cell they will fill up in order if we didn't specify where we want each of our grid items to go it will just fill up in order so that's why this is base on my markup so just now my markup was i can't remember what's here so on and so forth so let's look at each of the columns first column 2fr we leave that first let me separate this 6 columns right 2fr is this bit this bit here this one i set it to 2fr the second column is for my tour dates so my tour dates i really don't want it to shrink i don't want it to break so i put the max as max content just to make sure that you'll always be tour dates one line and not tour dates and then i put i put a cap on how much it would shrink oh sorry no no no i didn't want it to grow beyond cause tour dates is a very short it's a very short phrase i didn't grow and so much white space so i kept it once you hit tour dates don't grow anymore so 10m max content is to handle this particular element next line is the same concept for this cause 10 to 20 10 toronto is a bit longer so i gave it a bit more space 14m but it's the same concept max content so once it hits the longest i don't want it to grow anymore so this gives me more space for other things so that's why the third column is also min max for 10m max content so now we have the spacer column the spacer column is min max 1m and 1fr so i technically could just make it 1fr and we have the min 1fr it will shrink down to 0 but in this particular case i don't want there to be a situation where this this part touches my image so i chose to maintain a 1m min if you're okay with it kissing the side then just use 1fr that's also fine but i'm just explaining the logic behind my design decisions for my spacer this i did not explain fit content fit content is same family as min content and max content in that the official definition is actually very long and concluded in my own words fit content just means that you it's min max with regards to content so fit content means you shrink it's min content then max 28m so it will fit content but once it hits it will not grow further than 28m but it will continue to shrink as per if it was min content this does not make sense but it makes sense in my head oh no think of it as min max auto 28m how can i explain this in english this doesn't work it will not grow more than 28m the column width maximum will be 28m but it will shrink it will continue to shrink as per if the minimum was min content so i think for this right longest word maybe for photographic it will buy right shrink until photographic but it will cap at 28m so that's for this specs and lastly is this one this artist spotlight is cup 2m plus 0.5v w let me explain myself the h2 if i didn't okay h2 if you look at the official what you copied my font size is is a variable font size so this again is an optional thing but you can actually make your font size have a relationship with your viewport width by using viewport units as part of your font size so i don't use a set formula i bought it to see what it will work but when you use the cup function viewport width is dependent on your viewport width so the reason why it's 3m plus a viewport unit is that because viewport width when i shrink it it could go potentially it could resolve to a value that is really really very small so what i want to do is that i will cap it at 3m so once the viewport width value hits a very small you don't want your text to disappear because if your font size is like all these values at the browser side it will still resolve to pixels when the browser does all the passing the first thing i say in the morning is that the browser has to pass all the values it will resolve all these viewport units percentages at the end of it before rendering it resolves to a fixed unit it resolves to pixels all these elements the font sizes of the elements they all at the end of the day have to be resolved to pixels it's just that the calculation is transparent so 3m plus if you use only viewport unit is possible that you will resolve to maybe zero pixels the calculation so we don't want our text to disappear so we will cap it once the viewport unit is zero it will just be 3m that's the minimum size so even if my viewport goes any smaller i will still keep 3m my text will not disappear so it's not fully responsive text it's responsive text with a cap so that's why there are these values again i mention i have no set formula i bought this so 3m plus how much 8vw just eyeball it i settle on this because i thought the overlap look nice same for same for h2 you could make this a fixed font size that's fine also i wanted it to just do a bit of growing and shrinking because i felt like it so because i did this 1m plus 0.5vw for its font size for the column i made it 2m plus 0.5vw so that i gave it a bit more space it will have a spacing between because if i made it exactly the same as the font size there is no space so it's basically the font size plus a bit of breathing room and again this value arbitrary you can change it to whatever you like remember this grid is any hardly is based on what you want the design to be so you don't have to follow my values exactly if you don't want you can change the spacing you can change it however but that's my explanation of why this code exist so for the rows i want this design to be fully in the viewport so there's no scrolling at the when it's the full landscape view no scrolling always fit so i chose to use vh as my unit so if the max is correct if you add all this together it's 100vh so it will always fit so in a sense this is just ratio ratio of the viewport unit that is being used right now so the reason why i have a mean height query is that when you are using viewport height as your unit it will not work at all heights because it's relative to the height of my browser window if i did not have this it will shrink it will break there will be a point where this layout so the reason for the mean width query to be there is the moment it's less than 27ms because 27ms is where it shrinks any smaller than that right my text will overflow, things will already break so i will choose to not have this layout anymore this layout doesn't work if my viewport height is shorter than 27m so for myself the designs that i do whenever i do this sort of i want the design to take up the full height of the page i almost always pair it with a height query otherwise just don't use the viewport height unit because it's too variable already so that's just from my personal experience so that's how the grid came about so now that we have our grid but everything is in the wrong place so what we want to do now is we want to start placing items already so go back to here so again let's just go here copy la copy so actually this title it starts from it starts from the third column because this first two second one for two a days first one is for the image so it actually starts from the third column so the line is as follows 3 and it's 3 to 6 because it spreads this one spreads all the way to here so that's why it's 3 to 6 is 1 to 2 because the top row so basically move it to here okay we want to move the h1 over to here we want to move artist spotlight over to the end we want to move we want to move this down here we want to move tour dates over here and we want to move this date thing over here so if you don't want to use your brain to think copy now if you notice I use this a negative value because the index is not only so there's positive index and there's also a negative index so the use case applies here negative one will always give you the last grid line so for example this one is a fixed define grid that I already said 6 columns so I can choose to put the last number which is 7 but let's say you use auto fit like the browser generated however many columns and you don't know how many columns there is you wouldn't know what the last number is so what the browser vendors decided is that will give you a negative index so you can always hit the last column by using the negative one that's a use case for the negative index so I'm lazy to think just the one most at the side so just use minus one that's why it's 1 minus 1 it's the equivalent of sorry sorry column I could have use 7 I could have use minus 1 but that's the negative index so for row we move it here so this positioning will move continue going okay I have a hr element the hr element is very irritating but it's just for this thing it's a decorative element so if you don't want it there you can ignore it if you want to it's technically not important hr you can style so hr, I think if you don't do anything do it's just one line I think it's one pixel or something you can actually style it I apply background color and then I give you a weave I just style it to look like that hr is actually not important if you want to ignore it just ignore it altogether it's fine the above is here so as I'm talking I assume you are copying the code so it's just positioning and if you are wondering for this particular layout why I didn't use grid template area because grid template area you cannot overlap if you want to do overlap in your design for example my image is actually from the my image is 3 columns 3 columns but it has to overlap with my title I cannot do that if I use grid template areas if I want to have overlap in my design I have to specify the color and role and that's the only way you can get it to overlap so that's why for this use case no area no names no areas you can name the lines of course you can but you know I was lazy so I just use the numbers so that's an explanation of all the column and rows it's just to place everything in the correct place so I'm going to do my own set of copying actually I'm very lazy you all copy lah then I just continue explaining my code so once you have finished copying I'm back you all regret signing up for this Andy Howley workshop oh my god I heard the word bootstrap eh okay okay his bootstrap is real actual software bootstrapping so that's good not the framework oh my god what is this and why did I put it in there sure I don't know what this does eh not bad looks like something oh I know what that does eh not bad well done this is actually quite fun but done okay okay if you finish copying all the placement code i think the position is all correct already everything is in the correct place so let's the rest is just tweaking positionally everything is correct if I don't do anything you'll realise that it's at the back so what you can do is what the Z index it brings it on top of the image so that's why I want the H1 to be there bring it to the front padding okay margin bottom initial let's talk about this value initial i think it's from ie ie nine on words you can use initial what initial does is that it will reset so because I had some fallback styles rather than set it to a value like zero and then end up having to override it again you just set it back to initial it will be as if you didn't apply any margin term on it at all so actually I quite like using initial for resetting instead of giving it an actual value for any styles were applied so I think that's cleaner you can choose to put it to zero if you wanted to as well I suppose so that's why this is there just to reset the fallback style padding to make it look nice okay let's talk about this if you showed up for my talk yesterday I will spend half of it talking about this so this is how I made the text go do that refresh so that's that again this is so the positioning we already settle now we're just making it look pretty hr already put in for about okay let's talk about you'll notice it's actually at the top but in the ideal design is actually to the bottom so what we want to do is that and this works nice this one we don't need to use the flex trick because this one the background is white it's okay if the grid item shrink to fit because you can't see from a visual standpoint it's fine so you can just directly use the align you can use the align property so when you highlight it you can see if there was a background you will have cut off here because the grid item area has shrunk to fit but from a visual standpoint it doesn't matter because the background is still white anyway you can just align yourself to the end and then you'll just go down padding and just make things look pretty okay so this i forgot what this did but now i remember what this does this is just to create this line so if you don't want this line or you want to use an image also can but i don't want to use image so i just use a pseudo element to create that line so this is not important either location so location is this gray bead so this gray bead is on top it has overlap my image so this is this is this cut off thing is a trick the image is actually still rectangle it's just we start it to sit on top on the bottom right corner so how we do that is that these are presentation styles so z again z index to bring it on top location i want so much keep nonsense oh my god bring it to the top this one we need to do the flag trick because this one background color this is a different background color that's why for these two even though the effect is the same you don't need to use the flag trick visually you can get away with it this one visually we cannot get away with it that's why for this one we have the flag trick and that's why you apply the alignment properties to the P ah fun part about centering items if you only have one element within your flags container margin auto will center it perfectly don't have to do any justify nonsense crap just put margin auto at the center only applies if there is one flag for multiple items you imagine auto it will spread things around but if you only have one item this works so that's that's how you get it to the center and lastly this looks funny for a simple reason because we have styled it in the four back styles so these last two lines again are resets to reset it back to its original value so that it will sit nicely on my grid so that's done already this is how you this is how you get the landscape layout so okay check is everybody here? can everybody go on this right? no hard right? very simple right? excellent what else did I do? continue go up go up open stop did I change anything? nothing eh what is that extra? can let me think about this I built this very long ago what is this? mean wave 48 okay actually we are done but what I want to explain is this part if you didn't choose to do this then it's not necessary but I'm going to open the actual demo actually we are done already eh a bit early I got more examples it's fine so this is the whole thing so you notice this black line ah if I didn't do the so it's not perfect but this part not very nice so this is the problem with using viewport heights for your layout so there will be a point where it looks funny so that's why the query the query sort of once my black line hits right I switch it, I don't want it anymore so when it goes to this layout right and you turn now you look the HR is not there it's actually there it's just that the opacity was set to zero so it's actually just a visual it's just for the line the last query is just for that stupid line so if the stupid line was not there that query wouldn't exist this is just an explanation of all the code but anyway one more thing I want to talk about is the fact that the image kind of you realise that it changes so the image actually normally what you would be able to achieve this effect when you do background size background size cover and contain you'll be able to sort of change how much of the image is displayed so there's a new property called object feed that you would if you copied it over it should be here oh never copy wait so if your image doesn't do it where's my object feed you'll not talk object feed cover what it does is that it makes content images meaning the images you load into your website using the IMG tag you can let it behave exactly like a background image so it used to be we never if we wanted to do this sort of responsive images we had to do the we had to apply an image to the background you background image it the content cover thing now you can do it onto content images as well with the object feed value and it takes the same value you can do cover you can do content just like background images so object feed the support is quite good already just don't think about supporting i.e. because nothing new is going into i.e anymore people should just stop thinking i.e is now just Microsoft is just supporting internet explorer things and stuff who still have to use it so in that regard there's a good reason why we still use the fallbacks so that if you end up using an older browser it's not broken it's just a bit more plain so that's this particular demo explain if i try to follow the structure of my slides we can either try this or we can try this because this is actually CSS thing you can see the you can look at it it's quite okay the SVG is for my letters because the font is custom the flicker okay i have to flicker but CSS animation am i but the background is a grid so each of this is a grid so okay la this one i just talk la yon if you want to follow you can follow there's a code pen link does everybody have the slides or not so i think the link is there something so here you can see the code so you don't have to type but we can talk about it let's just talk about it i'm using CSS there are variables here but it's just for the colors so when i say responses right this is the when everything is fully viewport so if i resize it's always going to fit so that's one thing but the tricky part about using viewport units is that the so everything has to be calculated so for this particular case it's fine but when i apply it to here this is not you have to convert everything you have to convert everything back to a fixed unit otherwise you just for this so here right all the values will add up to 100 okay that's fine so if you want to convert as part of another you cannot 100 anymore so that's where you probably want to invest in a calculator or if your mental sums are really good you have to ratio everything to get it to fit into this size for me for this particular one i change it to a fixed but similar it's actually quite straight forward why i have to use grid for this let's see if we can find a wah i got add support everything oh my god so okay the grid template rows is straight forward because there's only one row the columns are calculated so that's how you ya that actually this is a stupid example because all you do is okay let's not look at this this is a stupid example let's look at this this is a nice example did i grid this okay this is why i really like the grid inspector 2 because even if you transform the inspector will transform with you so if you want to do funny things like this you can still visualize using the grid inspector 2 so that's quite fun so for this each of the the original if i didn't if you don't have enough space it doesn't make sense to go diagonal because diagonal actually only looks nice if you have a wide screen so that's why for this the transform only kicks in when it's diagonal let's find but to lay it out it's gridded so this is actually the header image so because at the point in time i was fun employed and i had nothing better do in my free time i was like okay let's make this in css so what we can do is a design like this will work because all this you can use all the properties we mentioned before and just place you can just place everything as whenever you need it when you see this the first thing you need to do is to design something like this you have to plan it all the work is in the planning so i'm going to see if i can find the original image then we can talk through the grid planning process because it's really a very any hardly workshop so when you first see this the reason why i felt that it will be done in css grid is because they look like they were equally spaced and then it's not exactly aligned but all these individual elements they can be spaced out along a grid because the critical request also looks like it follows a grid so based on this premise i was like okay let's try to let's try to start to plan this so when we look at the code again the original the the base grid looks like where is my grid nine columns so because it's diagonal on the original you can't really see the rest but you know i just put it in because when it's this way you don't want it empty so how much do you got nine so i was like okay nine so we do nine that's the reason why i put in nine columns because the original design say nine s so that's nine so for the roles right ah this is fun because if you look back at the design you can see that okay how we want to plan this you can actually sort of make elements they seem to be regular space so again i arbitrarily went with 2M so the first three is 2M because i knew that if i use the alignment properties i can sort of make it uneven but the grid itself can be can be the same length for the for the text itself right i went with the min max when with min max value because i change the side to match my font size and the last two this one make it even and the rest this v50 is just to make sure that it's a header is a header height because of the diagonal actually when you do diagonal it's a bit tricky because the whole thing flips out of the viewport so you actually to do a design like this you have to imagine if your designer gives you a design like this right you actually have to imagine what happens here otherwise you're going to add up with a lot of blank spaces so that's how i came up with this arbitrary values so again if i this circle right the only reason i went with 2M is because after a bit of trial and error it was how this circle will overlap the underneath so for this particular design again it's a lot of eyeballing and you play around to change the values of the row but once you have set up your grid and you choose a method of placing everything in the correct place and then you can start styling all this kind of funny things for example things like this are pseudo elements this is a pseudo element the blue circle is a pseudo element with a border all these funny decorations are just pseudo elements let's go and see so this one is a before when you use pseudo elements you can do a lot of these decorative effects without having to put additional markup into your into your html because these are purely generated by css so it doesn't pollute your html but you can still make it look pretty so at the end of the day for we want to do all these kind of funny things with css i think it's worth keeping in mind that i call this a css grid workshop but i think you will realise there are a lot of properties in addition to css grid to make the designs work so i covered things like object fit pseudo elements things like that so i feel that css is a bit different from all the other programming languages and things like that it's not modular it's the type of it's the type of language you need to use many things together to get the full effect so even though you teach them individually as a module when you apply it in your work when you apply it to design things you have to keep in mind that is how you combine all the different properties together to get the end result so there are many ways to do this you can easily use a background image or you can do it with css you can do it with pseudo elements so for css it's a bit more flowy and i think again i think some people the very very strong background programmers probably the guys in the next room probably don't like css very much because it's a very very different way of thinking it's like really everything is a global variable and i think a lot of pure software programmers just think that that's a horrible thing but my take on it is that css is not a programming language it is a file shape language that requires us to manage this whole global variable space and i have no shortcut for this other than experience because like i mentioned a lot of things is eyeball even when i went through the dashboards i had to save and look and i don't think that's a bad thing code in the dark is fun but i really wouldn't wouldn't do it we work when we design with css ya what else can i say basically as you can see now i'm feeling time right because this ended faster earlier than i imagine okay fun things we can do with css oh ya okay i had this event like 2 days before js called and we had a banner let me tell a story of the banner let me show you the banner first very fast i sincerely apologise for the anyhow leaders of this project next time see my name don't sign up this is a bad idea bad idea all around i don't know cannot my chrome is broken open firefox okay so for for all the all the promotional assets every time someone ask me i need an image i would just screenshot this because this um this is built using css the story of this is that i wanted to use this font this particular font is a web font so this is not an image it's searchable text but colour font support is not it's not supported in chrome it's not supported in safari it is supported in edge so only edge and firefox support this so what's gonna happen but colour font is one of those properties that falls back well because it's not as if the font won't load so this is safari it doesn't support colour font so the long story short is that all the image editing programs that i could afford did not support colour font so when i wanted to design my banner i couldn't get this colour font because it only works in the latest latest latest edition of photoshop and as a fun and ploy bum i really couldn't afford a subscription and the pirated version also didn't support this so ok, let's just use the browser to design this so this is the banner that got printed so how this works is that this is a trick in case anybody wants to do something as ridiculous as this right this is a good use case for viewport units so how did i get the dimensions correctly? i'm using a mac a 13 inch from 2015 so it's 2x density so if i do 100 VW when i screenshot the whole thing the resolution is about 2880 and somehow because the printer needed it a bit larger i think it needed i don't know 3000 or something and you think oh cannot because that's the maximum i can go actually no, what you can do is you can go beyond 100 if you go beyond 100 and you catch a screenshot it goes more than that this is just an accidental discovery so you're not limited to 100 that's why right now for this particular thing is overflowed which is fine because it's more than the viewport width and more than the viewport height it still works and if i print screen because Firefox has this take screenshot function okay so that's it bye everybody, you can go and eat food early but if you want to do banners you can do this straight okay thank you, good night