Одну секунду
Что-то сучилось. Попробуйте еще раз.
Css grid vs flexbox смотреть последние обновления за сегодня на .
🔥 IITM Pravartak Professional Certificate Program In Full Stack Development - MERN (India Only): 🤍 *Note: 1+ Years of Work Experience Recommended to Sign up for Below Programs⬇️ 🔥Post Graduate Program In Full Stack Web Development: 🤍 🔥Caltech Coding Bootcamp (US Only): 🤍 In this tutorial, we will discuss the differences between the CSS Grid and Flexbox layout. We will also discuss how we can use both of them together with the help of an example. ✅Subscribe to our Channel to learn more about the top Technologies: 🤍 To access the slides, click here: 🤍 ⏩ Check out the CSS training videos: 🤍 #CSSGridvsFlexBox #CSSGridvsFlexboxPerformance #CSSGridAndFlexboxTutorial #CSSGrid #CSSFlexbox #CSSGridExplained #CSSFlexboxExplained #CSSTutorial #CSSTutorialForBeginners #CSSTraining #LearnCSS #CSSForBeginners #CSSCourse #FullStackTraining #Simplilearn To learn more about this topic, visit: 🤍 ➡️ About Post Graduate Program In Full Stack Web Development This program will give you the foundation for building full-stack web apps using the Java programming language. You'll begin with the basics of JavaScript, and then venture into some of the more advanced concepts like Angular, Spring Boot, Hibernate, JSPs, and MVC. Now is the perfect time to get started on your career as a full-stack web developer! ✅ Key Features - Caltech CTME Post Graduate Certificate - Enrolment in Simplilearn’s JobAssist - Receive up to 25 CEUs from Caltech CTME - Simplilearn's JobAssist helps you get noticed by top hiring companies - Attend Masterclasses from Caltech CTME instructors - Live virtual classes led by industry experts, hands-on projects and integrated labs - Online Convocation by Caltech CTME Program Director - 20 lesson-end and 5 phase-end projects - Capstone Project in 4 domains - Caltech CTME Circle Membership - Build your own portfolio on GitHub ✅ Skills Covered - Agile - JAVA - Hibernate and JPA - Spring Core 50 - DevOps - HTML5 and CSS3 - AWS - JavaScript ES6 - Servlets - SOAP and REST - JSP 👉Learn more at: 🤍 🔥Explore Our Free Courses With Completion Certificate by SkillUp: 🤍 🔥🔥 Interested in Attending Live Classes? Call Us: IN - 18002127688 / US - +18445327688 🎓Enhance your expertise in the below technologies to secure lucrative, high-paying job opportunities: 🟡 AI & Machine Learning - 🤍 🟢 Cyber Security - 🤍 🔴 Data Analytics - 🤍 🟠 Data Science - 🤍 🔵 Cloud Computing - 🤍
Flexbox and grid are two fantastic layout tools. It can be hard to know which one to pick, but when you focus on the strengths of each one, it becomes a lot easier. 🔗 Links ✅ The easiest way to get started with Grid: 🤍 ✅ The easiest way to get started with Flexbox: 🤍 ✅ Using the Grid inspector: 🤍 ✅ Why I love grid-template-areas: 🤍 ⌚ Timestamps 00:00 - Introduction 01:13 - Comparing their behaviors 09:54 - When you should use flexbox 13:40 - When you should use grid 17:23 - Mixing flexbox and grid #css Come hang out with other dev's in my Discord Community 💬 🤍 Keep up to date with everything I'm up to ✉ 🤍 Come hang out with me live every Monday on Twitch! 📺 🤍 - Help support my channel 👨🎓 Get a course: 🤍 👕 Buy a shirt: 🤍 💖 Support me on Patreon: 🤍 - My editor: VS Code - 🤍 - I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: 🤍 Codepen: 🤍 Github: 🤍 - And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
CSS Grid or Flexbox, which one should you use? Can you use CSS Grid and Flexbox together? Learn how to use both technologies correctly and how combining them can lead to even better results than when choosing between Grid and Flexbox. Dive into our "CSS - The Complete Guide" course: 🤍 Find the article to this video on: 🤍 Starting Code: 🤍 Finished Code: 🤍 Want to learn something totally different? Check out all other courses: 🤍 • You can follow Max on Twitter (🤍maxedapps). • And you should of course also follow 🤍academind_real. • You can also find us on Facebook.(🤍 • Or visit our Website (🤍) and subscribe to our newsletter! See you in the videos! Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
Flexbox and CSS Grid are two CSS layout modules that have become mainstream in recent years. Learn when to use Flexbox vs. CSS Grid in this video. ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: 🤍 Both Flexbox and CSS Grid allow web designers to create complex layouts that were previously only possible by applying CSS hacks and/or JavaScript. Flexbox and CSS Grid share multiple similarities, and many layouts can be solved with both. When to use which is another question, however. You'll discover the answer in this video. 00:00 Introduction 01:50 One dimension vs. two dimensions 08:59 When content shapes the layout (use Flexbox) 10:21 When layout shapes the content (use CSS Grid) 14:18 Box alignment 15:35 Browser support Read more on Flexbox vs. CSS Grid on Envato Tuts+: 🤍 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Envato Tuts+ Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: 🤍 Envato Elements All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes. ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: 🤍 ► Subscribe to Envato Tuts+ on YouTube: 🤍 ► Follow Envato Tuts+ on Twitter: 🤍 ► Follow Envato Tuts+ on Facebook: 🤍 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
One of the most commonly asked questions about CSS Grid is “Does CSS Grid replace Flexbox? Is it better than Flexbox? Should I use it instead of Flexbox?” The answer is no — we will use both Grid and Flexbox on most sites, along with flow content, floats, and other CSS for layout. This video explains the differences between Flexbox and Grid, and when to use which one.
Need some quick columns and you throw a display:flex on there are you’re done, right? Well, it can work, but that doesn’t mean it won’t work for you every single time, as I explore in this video. 🔗 Links ✅ Every Layout: 🤍 ✅ Flexbox or Grid, how to decide when to use which? 🤍 ⌚ Timestamps 00:00 - Introduction 01:00 - Understanding how Flexbox is calculating the sizes of the columns 03:10 - The solution I like to use 05:38 - Responsiveness #css Come hang out with other dev's in my Discord Community 💬 🤍 Keep up to date with everything I'm up to ✉ 🤍 Come hang out with me live every Monday on Twitch! 📺 🤍 - Help support my channel 👨🎓 Get a course: 🤍 👕 Buy a shirt: 🤍 💖 Support me on Patreon: 🤍 - My editor: VS Code - 🤍 - I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: 🤍 Codepen: 🤍 Github: 🤍 - And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
When should you use flexbox? When should you use CSS grid? In this video, we lay out the similarities and differences between the tools so that you know what to use and when. Watch all videos in the "Building CSS grid layouts in Webflow" playlist: 🤍 Learn more about Grid on Webflow university: 🤍 A beginners guide to flexbox and CSS grid: 🤍 - Get started with Webflow: 🤍 🤍 🤍 🤍
🌎 Find Me Here: My Blog: 🤍 My Courses: 🤍 Patreon: 🤍 Twitter: 🤍 Discord: 🤍 GitHub: 🤍 CodePen: 🤍 #Shorts
Learn the basics of CSS Grid in 100 seconds. Grid 🍱⚡ is a powerful tool that can build layouts in the context of columns and rows. It's not easy to learn, but can dramatically simplify CSS positioning code for responsive designs. Stay tuned for a full grid project next week! 🤍 Grid Docs: 🤍 #css #tutorial #100SecondsOfCode Install the quiz app 🤓 iOS 🤍 Android 🤍 Upgrade to Fireship PRO at 🤍 Use code lORhwXd2 for 25% off your first payment. My VS Code Theme - Atom One Dark - vscode-icons - Fira Code Font
Grab the entire FREE course, starter files and finished solutions over over at 🤍. Subscribe for more web development videos like this!
🔥Get your Simple Grid Layout Cheatsheet here: 🤍 A lot of people use flexbox because it’s simpler than grid, or at least that’s what they tell me. From my experience, there are a lot of simple layouts that are easier with grid, and I look at two of them in this video, and just to prove my point, I compare them to the flexbox equivalent. 🔗 Links ✅ Get the Simple Grid Layout Cheatsheet: 🤍 ✅ I love flexbox too, and here is how I decide which to use: 🤍 ✅ Other simple CSS Grid layouts: 🤍 ⌚ Timestamps 00:00 - Introduction 00:48 - Why people love flexbox 01:47 - Custom properties with grid are amazing 04:20 - Flexbox’s flexibility makes this type of behavior harder 07:15 - When flexbox doesn’t work as easily as you’d expected it to 08:28 - Making grid more flexible with auto-fit 11:20 - Trying to replicate the auto-fit behavior with flexbox #css Come hang out with other dev's in my Discord Community 💬 🤍 Keep up to date with everything I'm up to ✉ 🤍 Come hang out with me live every Monday on Twitch! 📺 🤍 - Help support my channel 👨🎓 Get a course: 🤍 👕 Buy a shirt: 🤍 💖 Support me on Patreon: 🤍 - My editor: VS Code - 🤍 - I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: 🤍 Codepen: 🤍 Github: 🤍 - And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Learn the most important concepts of CSS Flexbox Layout in 100 seconds. #css #webdev #100SecondsOfCode Upgrade to Fireship PRO at 🤍 Use code lORhwXd2 for 25% off your first payment. My VS Code Theme - Atom One Dark - vscode-icons - Fira Code Font
CSS is confusing enough, and now in 2018 there are so many different options out there, from floats to flexbox to CSS Grid. This video takes a look at why we used floats for layout, and how things have progressed to flexbox, and now to grid to give a bit of a historical look at it all, as well as some ideas about what you should be using today. This article was heavily influenced by Modern CSS Explained for Dinosaurs by Peter Jang: 🤍 CodePen: 🤍 Timestamps Floats: 3:10 Flexbox: 12:14 Grid: 17:26 Browser Support?: 25:00 - I have a newsletter! 🤍 New to Sass, or want to step up your game with it? I've got a course just for you: 🤍 - My Code Editor: VS Code - 🤍 How my browser refreshes when I save: 🤍 - Support me on Patreon: 🤍 I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: 🤍 Twitter: 🤍 Codepen: 🤍 Github: 🤍
🚨🚨🚨 COURSES - 🤍 🚨🚨🚨 Discord - 🤍 Source code: 🤍 Grids are two dimensional, I can place things on it horizontally, vertically and both simultaneously. Actually I can position items in any way I want, even stacked. Each number represents a line, these lines are row lines and these lines are column lines. Our grid is made up of cells, each square is a cell. And finally, our grid is also made up of tracks, these are the rows and these are the columns. 0:00 Intro 0:24 Creating a grid 0:45 grid-template-rows & columns 1:17 Positioning Items 1:48 grid-row & grid-column 2:10 span keyword 3:01 grid-area 3:29 Negative numbers 3:45 Layering items 4:32 grid-auto-rows 5:29 grid-auto-flow 5:40 grid-auto-column 5:51 Fractional units 6:43 minmax() 7:10 repeat() 7:39 grid-gap 7:53 grid-template-areas 9:55 justify-items & align-items 10:53 justify-self & align-self 11:20 justify-content & align-content 12:20 auto-fit
Comparing CSS Grid layout and Flexbox and explains how you should use them together. Browser support Flexbox: 🤍 CSS Grid: 🤍
#shorts 🤍KevinPowell explained the different use cases of CSS Grid and Flexbox in less than 30 seconds. Essential JavaScript Libraries: 🤍 Programmer Girl Series: 🤍 Programmer React Series: 🤍 Short JavaScript Tutorials: 🤍 Sign up for our newsletter: 🤍 If you’re just as crazy for tech as us, we’d love to keep you around. You can also find us at: Twitter: 🤍 Blog/Website: 🤍 Instagram: 🤍 Facebook: 🤍 LinkedIn: 🤍 We’ll be waiting to catch up with a fellow techie:)
This tutorial discusses the differences and similarities between using CSS Flexbox, CSS Grids, and CSS Floats for building layouts. Live Codepen sample: 🤍
In this video, you will learn when to use CSS Grid and when to use Flexbox. Overall there is a very simple rule that you can follow. This rule will tell you whether you should use CSS Grid or CSS Flexbox
🚨🚨🚨 COURSES - 🤍 🚨🚨🚨 Discord - 🤍 Codepen for this project - 🤍 Blog post - 🤍 During the CSS stone-age developers were creating layouts with floats and positioning until one fateful day Flexbox would be introduced and the world would never be the same. 0:00 Intro 0:11 display flex 0:39 flex-direction 1:05 justify-content 1:41 align-items 2:22 key concept 3:12 flex-wrap 3:36 align-content 4:08 gap 4:20 flex-grow 5:19 flex-shrink 5:44 flex-basis 6:14 flex shorthand 6:43 align-self 7:17 order
🚨 IMPORTANT: Learn CSS Today Course: 🤍 In this video we will cover everything you need to know about CSS grid in only 20 minutes. We will cover what grid is, how grid differs from flexbox, how grid works, and the different properties you can use to layout and style your grid containers and items. CSS grid is one of the most powerful layout tools ever added to CSS. It allows you to create dynamic, responsive, and complex layouts with very little code. We will be covering all of the terminology, by going through live examples of all the different grid properties. If there is anything you feel I missed in discussing grid, or anything about grid that confused you, please let me know in the comments below. Learn Flexbox in 15 Minutes: 🤍 CodePen for this Video: 🤍 Twitter: 🤍 GitHub: 🤍 CodePen: 🤍 #CSSGrid #WebDevelopment #Programming
Build 3 responsive CSS grid examples to master the basics of this powerful layout system. 🤍 Full Tutorial: 🤍 1. Responsive 12-column bootstrap replacement. 2. Mosaic photo gallery. 3. Staggered animation grid. Featuring special guest Bob Ross. #css #grid #tutorial Install the quiz app 🤓 iOS 🤍 Android 🤍 Upgrade to Fireship PRO at 🤍 Use code lORhwXd2 for 25% off your first payment. My VS Code Theme - Atom One Dark - vscode-icons - Fira Code Font
It can be easy to get bogged down in how grid works, with a lot of new properties, values, and even units! So let's try and simplify things as much as possible, because to get started, you don't need to know *everything* about how Grid works. 🔗 Links ✅ The GitHub repo: 🤍 ✅ More videos on grid: 🤍 ⌚ Timestamps 00:00 - Introduction 01:01 - How we're approaching this 02:01 - What we are working on 02:39 - What we are starting with 03:08 - Declaring display grid 03:59 - The gap property 04:47 - Use your grid inspector 06:06 - How many columns do you need 06:59 - You probably don't need to declare rows 12:48 - Spanning columns 15:09 - Placing things in specific places on your grid 17:52 - Working with line numbers 24:56 - Working with media queries 28:21 - grid-template-areas 35:38 - auto-columns and rows #css Come hang out with other dev's in my Discord Community 💬 🤍 Keep up to date with everything I'm up to ✉ 🤍 Come hang out with me live every Monday on Twitch! 📺 🤍 - Help support my channel 👨🎓 Get a course: 🤍 👕 Buy a shirt: 🤍 💖 Support me on Patreon: 🤍 - My editor: VS Code - 🤍 - I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: 🤍 Codepen: 🤍 Github: 🤍 - And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Today we go in depth of CSS Layouts using CSS Grid and Flexbox. We talk about how you can use grid and flex ox together to create great layouts. Go from Zero to Hero with this how to code tutorial. Day 62 #100DaysOfCode // MY GEAR FOR CODING AND YOUTUBE Blue Yeti Microphone: 🤍 Microphone Stand: 🤍 Chair: 🤍 Thunderbolt Dock: 🤍 Monitor: 🤍 All of these products I own and have tested! Patreon: 🤍 Important Links Discord: 🤍 Twitter: 🤍 We cover: CSS Animations JavaScript Events JavaScript DOM Manipulation JSON Data Structure & MORE! If you read down here then HELLO! :) #webdevelopment #animations #javascript
#frontend #webdev Quando usar display: flex ou display: grid do CSS? Qual a diferença? 🌟 Links comentados no vídeo e outros interessantes 🌟 📺 Playlist Mini-curso grátis de Chrome dev tools. 🤍 ✅ 5 livros que eu indico para quem quer se tornar programador(a) front-end 🤍 ✅ EXCELENTE Técnica para Aprender Lógica de Programação MAIS FÁCIL e Programar Sozinho(a) #01 🤍 ✅ A Melhor Forma para Aprender a PROGRAMAR sozinho(a). (para iniciantes em lógica de programação) #02 🤍 ✅ Dificuldades com JavaScript? Aprenda a fazer Testes de Mesa 🤍 ✅ O que estudar para conseguir o primeiro emprego como dev front-end 🤍 ✅ Minha experiência como programador front-end 🤍 ✅ [OPINIÃO] O Programador dependente 🤍
Check out the differences between CSS Grid and Flexbox and which use cases are best fit to each layout system! Read more in the blog: 🤍 - Follow us on social and say “Hi!” 🐦Twitter: 🤍KendoUI / 🤍 👥Facebook: 🤍 #Flexbox #CSS
This crash course will teach you all of the fundamentals of CSS Grid ⭐ Sponsor: InMotion Hosting! 🤍 💻 Code: 🤍 👇 Website & Courses: 🤍 💖 Show Support Patreon: 🤍 PayPal: 🤍 👇 Follow Me On Social Media: Twitter: 🤍 Instagram: 🤍 Linkedin: 🤍 Timestamps: 0:00 - Intro 0:50 - Sponsor 1:28 - Slides 4:29 - HTML & Base CSS 7:28 - Creating a Grid 7:53 - grid-template-columns 9:16 - repeat() 9:32 - Gap Spacing 10:17 - Row Height 10:55 - grid-auto-rows 11:15 - minmax() 11:45 - grid-template-rows 13:19 - Grid Browser Tools 14:03 - Align & Justify 17:08 - Grid Column Span 18:46 - Grid Row Span 20:28 - Responsiveness 23:03 - Grid Template Areas 32:22 - Testimonials Grid Project Intro 33:40 - Testimonials HTML 37:18 - Base & Card Styling 45:40 - Grid Styling 49:52 - Media Query & Span Resets
🎓 I have a course dedicated to Flexbox! 🤍 Get the flexbox properties cheatsheet here: 🤍 🔗 Links ✅ Navigation demo - starting point: 🤍 ✅ Navigation demo - ending point: 🤍 ✅ 3 columns demo - starting point: 🤍 ✅ 3 columns demo - ending point: 🤍 ✅ Deeper dive into the math of flex-grow and flex-shrink: 🤍 ✅ Learn CSS Grid the easy way: 🤍 ⌚ Timestamps 00:00 - Introduction 01:41 - What we are starting with 02:17 - What happens when we declare display: flex 07:06 - flex-grow 11:13 - Dealing with more content 14:49 - Making even columns 20:31 - flex-direction 23:56 - justify-content 26:23 - problems people run into with justify-content 29:12 - align-items #css Come hang out with other dev's in my Discord Community 💬 🤍 Keep up to date with everything I'm up to ✉ 🤍 Come hang out with me live every Monday on Twitch! 📺 🤍 - Help support my channel 👨🎓 Get a course: 🤍 👕 Buy a shirt: 🤍 💖 Support me on Patreon: 🤍 - My editor: VS Code - 🤍 - I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: 🤍 Codepen: 🤍 Github: 🤍 - And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
CSS Grid makes it easier to create website layouts. It simplifies both your HTML and CSS, while giving you more control over your layout. You can take the interactive version of this CSS grid tutorial here: 🤍 The course contains three sections. The first two will teach you the core concepts you need to know to get started. Together, we’ll build both a website layout and a super cool image grid. In the bonus section, you’ll learn how to create article layouts with CSS Grid plus some more advanced concepts. ⭐️Full content overview⭐️ ⌨️ 0:01 1. Course Introduction ⌨️ 4:47 2. Your first grid ⌨️ 8:03 3. Fraction units and repeat ⌨️ 11:45 4. Positioning items ⌨️ 18:28 5. Template areas ⌨️ 23:18 6. Auto-fit and minmax ⌨️ 27:07 7. Implicit rows ⌨️ 29:06 8. An awesome image grid ⌨️ 35:56 9. Bonus: Named Lines ⌨️ 41:25 10. Bonus: Justify-content and align-content ⌨️ 44:17 11. Bonus: Justify-items and align-items ⌨️ 47:44 12. Bonus: Auto-fit vs. auto-fill ⌨️ 49:39 13. Bonus: Creating an article layout ⌨️ 57:37 14. Bonus: Grid vs. Flexbox You can connect with the course creator Per Harald Borgen via Twitter: 🤍 Learn to code for free and get a developer job: 🤍 Read hundreds of articles on programming: 🤍
En este video vamos a ver las diferencias entre CSS Grid y Flexbox para construir sitios web y layouts. 🚀 Blog de Diseño Web: 🤍 ⭐ Curso de Diseño Web desde Cero: 🤍 ⭐ Curso de PHP y MYSQL desde Cero: 🤍 ⭐ Curso de React y Firebase desde Cero: 🤍 ⭐ Curso de Bootstrap 5: 🤍 ⭐ Curso de Woocommerce: 🤍 - 📄 Código del Proyecto: 🤍 ▶ Curso de CSS Grid: 🤍 ▶ Curso de Flexbox: 🤍 - Redes Sociales: 📌 Twitter: 🤍 📌 Página de Facebook: 🤍
🚨 IMPORTANT: Learn CSS Today Course: 🤍 In this video we will cover everything you need to know about CSS flexbox in only 15 minutes. We will cover what flexbox is, how flexbox works, and the different properties you can use to layout and style your flexbox containers. Flexbox is one of the most important and useful layout properties in all of CSS, and is luckily quite easy to understand once you wrap your head around the terminology. We will be covering all of the terminology, by going through live examples of all the different flexbox properties. If there is anything you feel I missed in discussing flexbox, or anything about flexbox that confused you, please let me know in the comments below. View CodePen: 🤍 CSS Flexbox Article: 🤍 🌎 Find Me Here: My Blog: 🤍 My Courses: 🤍 Patreon: 🤍 Twitter: 🤍 Discord: 🤍 GitHub: 🤍 CodePen: 🤍 #Flexbox #WebDevelopment #Programming
¿Flexbox o CSS Grid? De seguro muchas veces te has hecho esta pregunta, el día de hoy descubrirás cuál módulo de CSS es mejor, será CSS GRID LAYOUT o Flexbox? ¡¡¡Vamos a descubrirlo!!! 📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta para un 90% de descuento en Hostinger.com. ENTRA AQUÍ 👉 🤍 - CURSOS COMPLETOS: 📘CURSO CSS3 COMPLETO (Descuento) 👉 🤍 👨💻🎁 Diseño Web Desde Cero (Descuento) 👉 🤍 - Sigue aprendiendo CSS: 💥 Lista de reproducción CSS: 🤍 📘CURSO CSS3 COMPLETO (Descuento) 👉 🤍 - ✉️ Redes sociales: Blog de desarrollo web: 🤍 Facebook: 🤍 Linkedin: 🤍 Github: 🤍
Get your cheatsheet: 🤍 Want to learn more about flexbox? 🤍 Flexbox is amazing, and I honestly feel like sometimes we're just stratching the surface with what we can do with it! In this video I explore three design patterns that you can use in your sites using flexbox. In-depth gap video (including alternative for Safari): 🤍 /// Timestamps 00:00 - Introduction 00:19 - even columns 04:31 - grid-ish 08:13 - content and sidebar 12:45 - spacing things out #css #flexbox Come hang out with other dev's in my Discord Community 💬 🤍 - Keep up to date with everything I'm up to ✉ 🤍 - Help support my channel 👨🎓 Get a course: 🤍 👕 Buy a shirt: 🤍 💖 Support me on Patreon: 🤍 - My editor: VS Code - 🤍 - I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: 🤍 Twitter: 🤍 Codepen: 🤍 Github: 🤍 - And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Всем привет, в этом видео мы опять поговорим на тему Css grid и flexbox. И обсудим мы в чем их разница и что лучше и в каких случаях использовать. ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍
🤯 ¡Te enseño a crear una cuadrícula responsive en CSS sin media queries! 💾 Guarda el vídeo para tenerlo siempre a mano y no perderte ningún detalle. 👍 Y es que desde que Grid ha llegado a CSS, la creación de cuadrículas se ha vuelto mucho más sencilla y potente. 🤩 Usando la propiedad grid-template-columns y la función repeat, podemos crear cuadrículas con tantas columnas como queramos, sin necesidad de escribir tantas líneas de código. 📐 Con minmax le decimos que el espacio debe ser de mínimo 150px, de forma que si la columna es menor a eso, entonces creará menos columnas para poder caber. 💬 ¿Qué te parece el resultado? ¿Te animas a crear tu propia cuadrícula responsive? #shorts
Что же такое Grid Layout? Суть этого модуля заключается в разделении веб-страницы на столбцы и строки. В получившейся сетке можно размещать элементы. Управлять размерами и расположением этих элементов можно с помощью специальных свойств модуля. Эта способность позволяет очень гибко отображать элементы на экране без изменений структуры кода. Но то же самое умеет и Flex скажешь ты. И это верно, но фишка в том, что помимо прочего Grid умеет управлять элементами в двухмерной плоскости, то есть и по горизонтали и по вертикали одновременно. Flex же работает с одной осью – горизонтальной либо вертикальной. Отлично, но че там с кроссбраузерностью? На первый взгляд все не плохо. По данным сервиса Can I Use модуль Grid Layout Level 1 поддерживают 93% пользователей. Даже ослик 11й что-то понимает правда с префиксами. Но поскольку Grid Layout довольно большой модуль использующий множество свойств, проверять поддержку следует каждого свойства который захотите использовать. 👉 Спецификация для браузеров Microsoft (eng): 🤍 👉 Известные баги Grid: 🤍 👉Весь прейлист CSS Grid Layout: - 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Tem dúvidas sobre quando utilizar CSS Grid e quando utilizar Flexbox? Esse vídeo pode te ajudar a entender isso 😁 🆙 !IMPORTANT No vídeo comentei sobre não termos a propriedade gap disponível no Flexbox. Realmente ainda não temos, mas já pode comemorar porque isso pode estar prestes a mudar 😍 gap: 🤍 🔗 LINKS 🔹 Conteúdo em texto do vídeo: 🤍 🔹 Tweet original: 🤍 🔹 Codepen: 🤍 ➡️ REFERÊNCIAS - MDN Flexbox: 🤍 - MDN CSS Grid: 🤍 - Can I Use Flexbox: 🤍 - Can I Use CSS Grid: 🤍 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ☕️ GOSTOU DO CONTEÚDO? Aceito um café 😍 - Pix: hi🤍felipefialho.com - PicPay (qualquer valor): 🤍 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ➡️ SOBRE MIM - Blog: 🤍 - Github: 🤍 - Twitter: 🤍 - LinkedIn: 🤍 - Front-end BR: 🤍
Should you use Flexbox CSS Grid or Bootstrap?? ★☆★ My Courses: 🤍 ★☆★ Treehouse Discount Code: 🤍 ★☆★ 2 Months FREE CLASSES: 🤍 ★☆★ UNLIMITED WEBSITE HOSTING: 🤍?aid=telmosampaio Learn Algorithms with Discount code: telmo ★☆★ 🤍 ★☆★UDEMY COURSES: The Complete JavaScript Course 2018: 🤍 Modern JavaScript From The Beginning: 🤍 JavaScript: Understanding the Weird Parts: 🤍 React 16.6 - The Complete Guide (incl. React Router & Redux): 🤍 The Complete React Web Developer Course (with Redux): 🤍 React Front To Back: 🤍 ★☆★Best laptops for Coding: Acer Aspire: 🤍 Macbook Pro 2013: 🤍 Asus VivoBook Pro: 🤍 Macbook Pro 2019: 🤍 ★☆★Best JavaScript Books John Duckett JavaScript: 🤍 JavaScript Easy Steps: 🤍 JavaScript Good Parts: 🤍 Eloquent JavaScript: 🤍 You dont know JavaScript: 🤍 My Social Media: Twitter: 🤍 Instagram: 🤍 My affiliates: A2Hosting, Amazon, Treehouse
.svg){kind=small}
![[css] Flex vs Grid](https://i.ytimg.com/vi/hT9ABJyOzwM/mqdefault.jpg "[css] Flex vs Grid")
