-
Notifications
You must be signed in to change notification settings - Fork 10
Layout
Laying out pages and groups of elements on a page often involves the use of floats, flexbox or grid. Each has advantages and challenges.
- For entire pages, Grid will be best but it is the newest of the three standards, and therefore has the lowest support among them.
- The float property, which was originally meant to float images within text, can be adapted to handle page layout. It is the oldest standard and has ubiquitous support, making it the best option for addressing the widest range of visitors.
- Flexbox is great for aligning elements in one direction (vertically or horizontally) and controlling the order of elements on the page. It can be adapted for page layout using flex-wrap and, while it is a newer standard, it has slightly better support than grid.
- If you're undecided on which technique to use for handling page layout, try float or grid. Flexbox isn't really the best choice for laying out a whole page because it only allows us to control the layout in one direction.
- Building your page with a basic float layout and then adding grid using @supports (and including vendor prefixes) will allow you to provide an users with older browsers a fallback experience that is acceptable while using the latest features, but it would greatly increase the complexity of your CSS and may not be worth the cost of maintenance.
Floats, Flexbox and Grid were each intended to serve different purposes by the W3C. The float property was introduced to allow us to float images within text and reproduce the way that pages are laid out in print. Once it was widely supported though, it quickly became a way for us to move away from using tables as a means for controlling page layout.
Using floats for layout has never been ideal. Float-based layouts can be very fragile, and often break when margins and padding are added to the floated elements. Today, we can use the box-sizing property and the calc() value to adjust the width the floated elements to address these issues, but they complicate our job. Additionally, you cannot force floated elements to be the same height as one another without resorting to complex hacks or Javascript. This is one of its main drawbacks and can also cause layouts to fail and break.
Floats are great if you want to have text flow around an image or a pull quote. This is precisely what they were designed to do. Float is also helpful for page layout if you know you really must support very old browsers like Internet Explorer. If your webpage design must be reproduced faithfully for every site visitor, using float will give you the best coverage today.
It would be great if we could build our pages using more modern techniques like grid or flexbox and then simply have a fallback float design for the oldest browsers that don't support them. Unfortunately, Internet Explorer does not support feature queries using @support. Therefore, we can't design our base page using a modern technique and then use a logical not with our @support rules to provide support for older browsers that include Internet Explorer 10/11.
@supports not (display: grid) {
/* This will NOT work in Internet Explorer
because it does not recognize @support 😠*/
}There is a hack however that allows you to conditionally load styles for Internet Explorer 10 and 11 with a media query that targets a proprietary Microsoft property. This would be an option for using grid or flexbox as your primary layout mode, but provide at least a comparable experience for those who are still using older versions of Internet Explorer. Read more about this technique here.
Flexbox was introduced to provide the ability to control flow in one direction: either horizontally or vertically. While it is a newer standard, it has fairly good browser support. Even Internet Explorer 11, although its implementation has tons of bugs, supports flexbox unprefixed. Flexbox wasn't really designed for page layout either, but it can be adapted for such, and offers some advantages over floats. Namely, flexbox, by default, stretches it's flex items to fill the entire available space. This means that flex items won't block wrapping flex items on another row.
Flexbox is a great option for laying out parts of your page. For example, if you have a group of elements that you want to all align in a column or row and you want to be able to have fine-grain control over the placement of the items, flexbox is the ideal option.
Flexbox is also the way to go if you want to vertically align elements in their container. No other CSS properties allow us to do this so easily and without hacks.
Flexbox is also a great choice if you have lots of similar elements that you want to layout as a collection. For example, if you have a card design, where each card links to an article or blog post, or for a gallery of thumbnail images. The flex-wrap property makes this easy and reliable.
Grid is the ultimate choice for laying out entire pages of content. The intuitive and declarative properties for grid areas and the breadth of properties for adding gaps; dealing with flexible sizing and wrapping; handling overlap; etc., make this the hands down winner. The only drawback is that because it is the newest standard of the three, it has the poorest support of them all. Still, support is available in all major browsers today since late last year, so this is something you should invest in learning.
Grid can also be a great option for laying out components. Components are groups of elements that together form a distinct and reuseable building block in your page. For example, if you have a card design where you'll have lots of similar cards displayed on the page, grid is a great option to layout the card itself.
Using a combination of techniques to achieve the best outcome — mixing flexbox or floats at the element level with grid to layout your overall page for example — is not only perfectly acceptable, it's actually the best way to go.