This course introduces web developers to modern web layout techniques with Flexbox and CSS Grid Layout - the two most modern CSS layout specifications. Get up to speed and learn how to use each of the two in-depth and explore some of their differences, browser support, gotchas, and helpful resources to help you get the most out of them.
Brian Treese is the Chief Designer at SoCreate, a company building a fun and easy way to turn great ideas into movie & TV show scripts. Technically a Web Designer (he's always loved the aesthetic side of the web), but his expertise does not stop at Photoshop and Illustrator.
Introduction Layout in the print world is easy. Layout in the web world, well, it's hard. At least it has been until recently. Hi, I'm Brian Treese with Pluralsight, and in this course we're going to see why modern web layout is about to get much, much better. We're going to dig in and explore the two CSS technologies that have completely reimagined the world of web layout as we know it, Flexbox and CSS Grid Layout, but we can't move forward without first understanding where we've been and how we've gotten here. So let's first begin with a little history of layout on the web.
Flexbox Flexbox, short for flexible box module, an extension of the display property, is a set of CSS properties for creating flexible layouts, distributing extra space, and aligning content for items within a given container. The previous layout modes from CSS 2. 1, block, inline, table, and positioning do not provide enough flexibility and control for the web as we know it today. It's become hacky and awkward to lay out some more complex web applications, which is why flexbox has been created. Flex layout provides the ability to arrange items in any direction, left to right, right to left, top to bottom, or bottom to top. It provides the ability to easily reverse or rearrange the visual display order of a set of items. It provides the ability to lay items out linearly without wrapping or to force them to wrap when there isn't enough room. And, it provides the ability to stretch and align items in relation to their parent container. Before digging into the code that makes all of this magic possible, it's important that we first cover some basic concepts and terminology to create a solid foundation to build off of. So, in the next section we'll get started with these basics in terminology.
CSS Grid Layout So flexbox is pretty amazing, and it makes layout on the web so much more delightful for us as developers, but I truly believe the best has yet to be seen. The new CSS Grid Layout module is likely to blow your mind. Flexbox and CSS grid share some similarities, but the main difference is that flexbox controls how items flow in one dimension, whereas, grid controls how items flow in two dimensions. Flexbox items flow in a similar fashion to the way that text content flows on the web, meaning that items flow in a straight line in one dimension or in a broken line if there's not enough room and they're allowed to wrap. Flexbox is great at handling alignment, distribution, and order of content in space. CSS grid on the other hand is suited to lay items out in both dimensions. The core difference between flexbox and grid is that flexbox lets content size itself based on the space available or the dimensions of the content itself, and grid specifies nothing about how the individual items themselves should be sized, and instead relies on various grid lines being defined on the grid container for its sizing info. CSS grid is more about creating a bunch of virtual areas, and then placing all items within them. The simplest way to understand how grid works is to think of old table-based layout concepts. Items are aligned in rows and columns, and then exist in or span across cells, but they do not rely on content structure like tables do, so they allow for much greater flexibility. The flexibility of CSS grid lends itself to responsive web design, making it easy to adapt layouts in display order based on the size of the viewport and space available. Before digging into the code that makes all of this CSS grid layout magic possible, it's important that we first cover some basic concepts and terminology to create a solid foundation to build off of. So in the next section, we'll get started with these basics in terminology.
Gotchas, Browser Support, & Resources Both flexbox and CSS grid layout are extremely exciting for those of us who have worked with any of the other web layout options in the past. They truly are a breath of fresh air, but they are relatively new, grid even more so, meaning there's definitely some stuff to consider and be on the lookout for when you decide to use them. In this module we will discuss some of these things to consider when using them, we will cover their browser support, or lack thereof, we will cover some of the best resources to make working with these technologies easier, and those that will keep us on top of the game as they continue to evolve, and then, we'll wrap up everything, and send you out on your way to web layout heaven. So let's begin with some common flexbox and grid layout gotchas.