Now that people are using the CSS Grid Layout for production seems to be asking a very common question which seems to be “What are the best practices?
“The short answer to the present problem is to use the tactic of layout as began within the specification.. The exact aspects of the standard you want to use, and also how you mix Grid with other methods of layout like Flexbox, depends on what works with the patterns you are trying to create and how you and your team choose to work with. Looking deeper, I think maybe this call for “best practices” shows a lack of faith in the use of a system of layout which is very different from what had happened before. Maybe it’s a concern that we’re using Grid for things it wasn’t designed for, or not using Grid when we should be. Maybe it’s a matter of worrying about supporting older browsers, or how Grid fits into our development workflow.
In this article, I’m going to try to cover some of the things that could be described as best practices, and some things that you probably don’t need to worry about.
THE SURVEY
In order to help inform this post and to make this article strong, I wanted to find out how others used the Grid Layout in production, what were the difficulties they faced, what did they really enjoy? I had common queries, problems, or methods used. I put together a short survey to find out, asking questions about how people used the Grid System, and in particular what they enjoyed most and what they found difficult. I will reference and quote some of those responses directly in the article that follows. I will also be linking to several other sites, where you can find out more about the mentioned techniques. There was, as it turned out, much more than one article worth reading.
ACCESSIBILITY
If you need to take caution when using any aspect of the Grid specification, it is when using something that might trigger material to be re-ordered:
“Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.”
— Grid Specification: Re-ordering and Accessibility
But this isn’t special to Grid, the ability to rearrange content in two dimensions so quickly makes Grid a bigger challenge. However, if you use any approach that enables the material to be reordered — be it Grid, Flexbox, or even utter positioning — you need to be careful not to disconnect the visual experience from the structure of the material in the text. Screen readers (and people who only use a keyboard to move around the document) will be following the order of things in the source.
The areas where you need to be especially careful are when using flex-direction to reverse the order in Flexbox; the order property in Flexbox or Grid; any positioning of Grid objects using any method when moving objects in the document out of the logical order; and using the grid-auto-flow dense packing mode.
For more information on this issue, see the following resources:
· Grid Layout and Accessibility – MDN
· Flexbox and the keyboard navigation disconnect
WHICH GRID METHOD SHOULD I USE?
”With so much choice in Grid, it was a challenge to stick to a consistent way of writing it (e.g. naming grid lines or not, defining grid-template-areas, fallbacks, media queries) so that it would be maintainable by the whole team.”
— Michelle Barker
When you first look at Grid, so many different ways of constructing a layout may seem daunting. However, in the end, it all comes down to stuff being moved from one grid line to another. You have options depending on the structure you are attempting to accomplish, and what fits best for the team and the site you are creating.
There’s no right or wrong path forward. Below, I’ll pick up some of the confusion themes. In the previous article “Grid Gotchas and Stumbling Blocks,” I’ve already addressed several other possible areas of uncertainty.
DO I GET AN IMPLICIT OR GRID EXPLICIT?
The grid you create is known as the Explicit Grid, with grid-template-columns and grid-template-rows.
The Clear Grid allows the Grid to label lines and also gives you the ability to mark the grid’s end line by -1.
You can use a Specific Grid to do each of these things, and in general when you have an all designed layout and know exactly where the grid lines will go, and the track size.
I most frequently use the Implicit Grid for row directions. I want the columns to be specified but then rows will be auto-sized and will expand to contain the material. To some degree, you can control the Implicit Grid with grid-auto-columns and grid-auto-rows, but you do have less power than if you specify anything. You need to determine whether you know exactly how much material you have, and also how many rows and columns you have, in which case you will construct a Specific Grid. If you don’t know how much material you have but just want to build rows or columns to keep whatever is there, you’ll use the Implicit Grid.
Nonetheless, the two can be mixed.
I have specified three columns in the Explicit Grid and three rows in the CSS below, so the first three rows of content will be as follows: a track of at least 200px in height but expanding to take content taller, A track fixed at 400px in height, A track of at least 300px in height (but expands).
Any additional content will go into a line created in the Implicit Grid, and I
use the grid-auto-rows property to make those lines at least 300px wide, extending to auto.
.grid {
display: grid;
grid-template-columns: 2fr 6fr 2fr;
grid-template-rows: minmax(400px auto) 800px minmax(600px, auto);
grid-auto-rows: minmax(600px, auto);
grid-gap: 40px;
}
TA Compact GRID WITH A Fixed NUMBER OF COLUMNS By using Repeat Notation, Autofill, and Minmax, you can construct a pattern of as many tracks as you can fit into a container, removing the need for Media Queries to some degree.
This technique can be found in this video tutorial, and also illustrated in my recent article “Using Media Queries For Responsive Design In 2018” along with similar ideas. Choose this technique if you’re happy with content falling below earlier content when there’s less room, and are happy to allow a lot of sizing versatility. You explicitly asked for the show of your columns with a minimum scale, and for auto-filling.
There were a few comments in the survey that made me wonder if people really wanted a grid with a fixed number of columns to choose this form. If you end up with an arbitrary number of columns at some breakpoints, it may be easier to set the number of columns — and redefine them as required with media queries — instead of using auto-fill or auto-fit.
WHY TRACK SIZING SHOULD I USE?
In my article “How Big Is That Box? I mentioned track sizing in detail. Understanding Sizing In Grid Layout, “however, I still get questions about which way to use track sizing. In particular, I get asked about the difference between the size of the percentage and the unit fr. If you only use the fr unit as specced, it varies from using a percentage because it distributes space available. If you place a larger object in a track then the way the fr operates until that track takes up more room and distributes what is left over.
.grid {
display: grid;
grid-template-columns: 2fr 2fr 2fr;
grid-gap: 40px;
}
To allow the fr unit to allocate all the space in the grid
container you need to use minmax) (to give it a minimum size of 0.
.grid {
display: grid;
grid-template-columns: minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);
grid-gap: 40px;
}
You may also choose to use fr in any of these scenarios: those where you want auto-based space distribution (the default behavior) and those where you want equal distribution. Usually, I will use the fr machine because it figures out the sizing for you and allows you to use set tracks or gaps. instead, the only time I use a percentage is when I add grid components to an existing layout which also uses other layout methods.
If I want to match my grid components with a float- or flex-based layout that uses percentages, using them in my grid layout means it is using the same scaling process
AUTO-PLACE ITEMS OR SET THEIR POSITION?
Sometimes, you will find that you only need to put one or two elements in your layout, and the rest is focused on the order of the content. This is really a very successful indicator that you didn’t disconnect the source and visual display.
If items fall pretty much into auto-placement-based location then they are generally in good order.
However, once I have decided where everything is going, I tend to assign everything a position. That means I don’t end up with strange things happening when someone adds something to the document and grid auto places it somewhere unexpected, thus throwing the layout out. If all is placed Grid will position the element in the next available empty grid cell.
That may not be exactly where you want it, but it’s definitely easier to sat down at the end of your layout than to hop into the center and move other things around.
WHAT SYSTEM POSITIONS TO USE?
Ultimately all that comes down to moving objects from one line to another while dealing with the Grid Style. Essentially, everything else is an aid to that.
Decide with your team if you want to name the lines, use Grid Template Areas, or use a mix of different layout styles. I find I like using Grid Template Areas especially for small components. There’s no right or wrong th re, though. Find out what’s best for you.
GRID IN CONJUNCTION WITH OTHER LAYOUT MECHANISMS
Note that Grid Layout is not the only true layout system to control all of them, it’s designed for a certain form of the layout — two-dimensional layout in particular. Many methods of the layout are still in place and you should understand any pattern and what fits it best.
In fact, I think this is very difficult for those of us who used to hack around with layout methods to make them do something they weren’t really built for. Taking a step back, looking at the layout methods for the tasks they were built for, and trying to use them for those tasks, is a very good time.
No matter how much I write about Grid versus Flexbox, in particular, I’ll be asked which one person should use. There are many patterns in which either method of layout makes perfect sense and it is really up to you. No one will yell at you for preferring Flexbox over Grid, or Grid over Flexbox.
For my own work, I prefer to use Flexbox for components where I want to strongly regulate their layout through the natural size of objects, effectively moving the other objects around. I do often use Flexbox as I want alignment because the Box Alignment properties can only be used in Flexbox and Grid. I may have a one-child element Flex container, so I can align that child.
An indication that Flexbox may not be the method of layout that I would prefer is when I start applying percentage widths to flex objects and setting flex-grow to 0. The reason to apply percentage widths to flex products is mostly that I’m trying to line them up in two dimensions (it’s exactly what Grid is for to line things up in two dimensions). Try both though, and see which seems to better fit the style of content or design. Via that, you are unlikely to cause any problems.
NESTING GRID AND FLEX OBJECTS
This also comes up a lot, and having a Grid Element also a Grid Container is absolutely no problem, thus nesting one grid within another. With Flexbox, you can do the same, making both a Flex Element and Flex Container. You can also make a Grid Item and Flex Container or a Grid Container Flex Item — none of these items are a problem!
What we can’t do at the moment is nest one grid inside another, and use the grid tracks that are specified on the parent overall. This will be very helpful, which is what the Grid Specification subgrid proposals in Level 2 aim to solve. A nested grid is currently transforming into a new grid so you’d need to be careful about sizing to ensure it aligns with any parent tracks.
You Can Have Multiple Grids On One Page A comment popped up a few times in the survey which surprised me, there seems to be an idea that a grid should be limited to the main layout, and that many grids on one page are maybe not a good thing. You can have any grid you want! Use the grid for big items and small things, only use the grid if it makes sense as a grid.
FALLBACK AND OTHER OUTDATED BROWSERS
“Grid used in conjunction with @supports has enabled us to better control the number of layout variations we can expect to see. It has also worked really well with our progressive enhancement approach meaning we can reward those with modern browsers without preventing access to content to those not using the latest technology.”
— Joe Lambert working on rareloop.com
Nonetheless, in the survey, several people listed older browsers, there was a fairly even split between those who thought it was difficult to help older browsers and those who thought it was simply due to feature queries and the fact that Grid overrides certain methods of the layout. In “Using CSS Grid: Supporting Browsers Without Framework,” I’ve written extensively about the complexities of creating such fallbacks. In general, modern browsers are far more interoperable than their previous predecessors. We prefer to see far less real “browser bugs” and if you correctly use HTML and CSS, you can find that what you see in one browser is the same as in another.
Of course, we do have cases where one browser has not yet shipped support for a standard, or parts of a standard. With Grid, we were very lucky that, within a short time, the browsers shipped Grid Layout in a very complete and interoperable way. And our testing criteria appear to be comparing browsers with Grid and without Grid. You may have opted to use the -ms prefixed version in IE10 and IE11, which would then entail a third form of browser checking.
Browsers that support modern grid layout (not version IE) support feature queries as well. This means you can check the support for Grid before you use it.
TESTING BROWSERS THAT DON’T SUPPORT GRIDS
By using browser failbacks without Grid Layout support (or using the -ms prefixed version for IE10 and 11), you’ll want to check how certain browsers render Grid Layout. You need a way to imagine your site in an example browser to do this.
I wouldn’t take the approach of breaking your Function Question by searching anything nonsensical for support or misspelling the value list. This method will only work if your stylesheet is extremely simple, and within the function queries you’ve put absolutely everything to do with your Grid Layout. This is a very fragile and time-consuming way of working, particularly when you’re using Grid extensively. Additionally, an older browser would not only lack support for the Grid Style, but other CSS properties will also be unsupported. If you’re looking for “best practice,” set up yourself to be in a good place to check your work is up there!
There are a few simple ways to set up a reliable system of checking the failbacks. The best option is to use a service such as BrowserStack — if you have a fairly good internet connection and don’t mind paying a subscription fee — This is a program that allows websites (even those in progress on your computer) to be accessed on a whole host of actual browsers. BrowserStack does provide open-source projects with free accounts.
My recommendation to check locally would be to use a Virtual Machine built with your target browser. Microsoft provides free downloads of Virtual Machine with IE versions back to IE8, and Edge as well. The older version of a plugin with no support for Grid can also be installed on the VM. To get a copy of Firefox 51 or below, for example. Be sure to turn off automatic updates after updating your older Firefox as explained here otherwise it will update itself quietly!
You can then check your site on one VM in IE11 and in non-supporting Firefox (a much less vulnerable solution than values that are misspelled). It might take you an hour or so to get set up, but then you’ll be in a really nice position
UNLEARNING OLD HABITS
Many of the respondents to the survey discussed the need to unlearn old habits and how it would be easier for people who are completely new to CSS to learn Style. I prefer to go along. While experienced developers try hard to return the grid to a one-dimensional form of the layout when teaching people in person total beginners have no problem using Grid. I’ve seen attempts at “grid systems” using CSS Grid that add the requisite float or flex-based grid wrappers back in the row.
Don’t think about trying out new strategies. If you have the opportunity to check in a few browsers and remain aware of possible usability problems, then you can’t really go too far wrong. And if you come across a perfect way to build a c
“Grid Layout is the most exciting CSS development since media queries. It’s been so well thought through for real-world developer needs and is an absolute joy to use in production – for designers and developers alike.”
— Trys Mudford working on trysmudford.com
KEY POINTS:
To end, here’s a really short list of current best practices! If you have found things that work in your own case, or do not work well, add them to the comments.
Be very conscious of the possibility of reordering content. Check that the visual display isn’t detached from the order of the text.
Test using a local or remote Virtual Machine with specific target browsers.
Do not forget older methods of the layout are still true and useful. To attain trends try different ways. Don’t get stuck on using a grid.
Know that you are going to have a whole range of preconceptions as an accomplished front-end developer on how the interface works. Consider looking at these new approaches anew
As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!
This article is contributed by Ujjainee. She is currently pursuing a Bachelor of Technology in Computer Science . She likes most about Computer Engineering is that it allows her to learn and be creative. Also, She believes in sharing knowledge hence is very fond of writing technical contents for the same. Coding, analyzing and blogging are things which She can keep on doing!!
