When designers first saw Grid layout, they often thought that auto-placement along with the dense packing mode might achieve masonry. See the Pen Masonry Multicol example by Rachel Andrew ( on CodePen. if this were search results), then the apparent first items in the top row aren’t actually the ones that came back first. Therefore, if the first items have the highest priority (e.g. However, the order of the boxes runs down the columns. In the example below, you see something which looks visually like a masonry layout. The closest way to achieve the look of this type of layout is to use Multi-column Layout. We can come close to a masonry layout in a couple of ways. There are a number of JavaScript tools to help you create this kind of layout, such as David DeSandro’s Masonry plugin. The most well-known example of masonry is on Pinterest, and you will sometimes hear people refer to the layout as a “Pinterest layout”. It’s similar to a grid layout with auto-placement, but without sticking to a strict grid for the rows. When they move onto the next line, items will move up into any gaps left by shorter items in the first line. What Is A Masonry Layout?Ī masonry layout is one where items are laid out one after the other in the inline direction. While this is a feature you won’t be able to use in production right now, your feedback would be valuable to help make sure it serves the requirements that you have for this kind of layout. In this article, I’ll explain the draft spec, with examples that you can try out in Firefox Nightly. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly.Ī Level 3 of the CSS Grid specification has been published as an Editor’s Draft, this level describes a way to do Masonry layout in CSS. There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. Note the bracket syntax for the line names. Grid lines are automatically assigned positive numbers from these assignments (-1 being an alternate for the very last row).īut you can choose to explicitly name the lines. – can be a length, a percentage, or a fraction of the free space in the grid using the fr unit ( more on this unit over at DigitalOcean).The values represent the track size, and the space between them represents the grid line. But don’t worry, there aren’t many of them.ĭefines the columns and rows of the grid with a space-separated list of values. Since the terms involved here are all kinda conceptually similar, it’s easy to confuse them with one another if you don’t first memorize their meanings defined by the Grid specification. Important CSS Grid terminologyīefore diving into the concepts of Grid it’s important to understand the terminology. Grid is one of the most powerful CSS modules ever introduced. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Similarly to flexbox, the source order of the grid items doesn’t matter. To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row. Internet Explorer 10 and 11 on the other hand support it, but it’s an old implementation with an outdated syntax. CSS Grid basicsĪs of March 2017, most browsers shipped native, unprefixed support for CSS Grid: Chrome (including on Android), Firefox, Safari (including on iOS), and Opera. So I won’t be covering the out-of-date Internet Explorer syntax (even though you can absolutely use Grid in IE 11) or other historical hacks. The intention of this guide is to present the Grid concepts as they exist in the latest version of the specification. Flexbox is also a very great layout tool, but its one-directional flow has different use cases - and they actually work together quite well! Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). CSS has always been used to layout our web pages, but it’s never done a very good job of it. CSS Grid Layout (aka “Grid” or “CSS Grid”), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces.
0 Comments
Leave a Reply. |