For many dark days, properly aligning objects on a webpage with CSS alone was close to impossible. With mostly-functional semi-hacks like float, positioning and in-like block, we could make it work, but it was far from perfect. When vexed by a particularly troublesome layout quirk, some event lamented the loss of
as a structural element. Darkness lay upon the world. And lo, CSS Grid arrived in our hour of greatest need, to render salvation unto developers from the grim despair of fixed layouts.
CSS Grid is the most powerful tool for organizing page content since tables. As a two-dimensional system, it can handle both columns and rows, unlike its predecessor flexbox, which could only handle a single dimension of organization. It also does away with some of the wonky flexbox stuff, like auto-stretching content to fit the layout’s width if you’re not careful about counting your cells. But considering all the positional system we’ve used over the years, it’s easy to get hung up on some common issues.
Draw your grid first
If you remember the time when tables were used for layouts, you might remember using a lot of graph paper to design sites. Grid-based layouts require the same careful preparation. Working out a grid in the vague space of fractions, percentages, pixel widths and auto spacing alone is challenging. It’s hard to visualize the space from numbers alone. While the CSS Grid syntax is reasonably clear, it’s no substitute for a good visual. Put your wireframing skills to work and sketch your layout before you start coding. Figure out how you’ll organize the grid, what the various widths will be, and how to snap things together. Then, turn that visual design into code.
Name things logically
CSS Grid provides a multitude of ways to specify tracks. You can give your columns and rows specific names, refer to them by number or anything else you’d like. Use the same care you would exercise when naming variables in a program. Either choose obvious, descriptive names, or use a numbering system that follows a clear convention. While it should seem that descriptive names are the better choice, they aren’t always possible. Set up a system, follow it, and explain it in the comments.
Use fractions with care
One of the more useful features of CSS Grid is the power to set track widths as fractions of the available space. Specify four fractions with the fr property, and you’ll see four even tracks appear before you. Of course, this works best when you’ve specified the maximum available space your container can occupy, but that’s not the issue. It’s when fractions are calculated that can throw newer designers a curve ball. Fractions are calculated after any non-flexible spacing. If you mix together fractions and pixel widths, for example, the fractions will be calculated based upon the space remaining after the fixed width tracks are accounted for. This can lead to some wonky columns that make sense in your head but don’t work out on screen. Depending on whether or not you expect this behavior, it can be either exceptionally useful or exceptionally confusing.
Whitespace counts too
When you’re first laying you your grid based on your wireframe, you’ll need to get a sense of how many columns and rows a given item occupies. Keep in mind that the space between elements, either horizontally or vertically, also counts as a row. This whitespace might be empty of content, but it’s a crucial organizational tool for laying out content with CSS Grid. Make sure you’re accounting for the space between objects, as well as the objects themselves, when you start to code your grid.
Start with a simple grid
Creating a perfectly even grid template is often the best choice for a basic design. By using the fewest number of columns and keeping things evenly organized, you can easily create symmetrical designs without too much frustration. Applying a balanced grid, by keeping your rows and columns even simplifies the design process. It reduces the number of ways you can mess up. Unfortunately, it also reduces your creative options. For your first projects with CSS Grid, working with a simple grid is perfectly fine. As you get a better handle on how the system operates, you can start experimenting with unbalanced and asymmetrical grid designs.
Understanding explicit and implicit grids
Explicit grids are made from the parameters defined directly by the designer. But because CSS Grid is also a little smart, it will automatically apply some grid plans in order to implement your rules. For example, if you have ten divs in a row, and specify a grid with three columns, you’ll find you get four row automatically. The three columns were explicitly defined. The four rows appeared as a consequence of the columns and the number of elements. The rows are the implicit grid. Make sure you understanding the distinction between these ideas so you can exploit them properly.
Grid are great, just like practice
Learning a new skill always takes time. Take advantage of the many excellent resources for learning CSS Grid online. This CSS-Tricks post is an excellent functional introduction, and Google even has a good CSS grid guide.
You might also like the following posts:
Modern Tools for Advanced CSS Development
28 Free Open Source CSS3 Code Snippets
40 CSS Apps, Tools, and Resources for Web Developers
The post Avoiding Common Problems with CSS Grid appeared first on SpyreStudios.
Best Developer in Spain!
Outstanding web services no matter where you are in the world. Great support and attention to detail.
Kate is a real life developer. She can work across multiple platforms and understands the technology your company is using on a line to line basis.
Pure Organic CBDWeb development and support
Professional and rapid support for the development and ongoing maintenance of our business website. Nothing too much trouble. Highly recommended.
Cafe CiclistaWeb maintenance
Superb service very professional and quick
very responsive I was kept informed and consulted throughout the entire process.
Paul JacksonWeb design & Development
Kate Langshaw of Medianic is awesomely recommended by us for all your website needs. Kate translated our story and brand into an elegant, transparent and to the point representation of CaffèMilano -The Italian Coffee House.
CaffèMilanoWeb design and Development
Absolute Class service from Start to finish, nothing is too much hassle for them and will recommend to everybody looking to update or have their website designed by the Amazing Kate Langshaw
Dragon InsureWeb design and Development
I have to say that my experience with Medianic has been different to any previous. I have been constantly kept up to date, communication has been fluid, and we had no down time at all.
Dr BanulsWeb Hosting
I’m very happy about Kate’s work! Recommend her services to everybody. Looking for a good website builder/designer? Look no further and contact Medianic.
Voice ProductionsWeb development
On Behalf of all at the Marina Alta Classic Car Club I would like to thank Kate for the wonderful work she did in Kick starting our Club website this year. I can highly recommend her. Thanks Kate
Marina Alta Car ClubWeb Design
Excellent knowledge and service, competitive pricing too. Definitely a solid go to company. Thanks for the great results we’ve had
Jim JimneyDesign and Branding
Totally reliable, totally capable and totally delivers. I’m loving working with Kate to help grow my business. I’m full of motivation because of you Kate
Javea BlindsWeb Design
I cannot praise Medianic enough. They have built the Javea Connect website quickly and efficiently, taught and old dog new tricks and have been there for me, sometimes within minutes, when I needed help. Excellent service and very very competitively priced. Highly recommended for both website and design work. Kate is to be congratulated on such a high standard of work and customer loyalty.
Javea ConnectWeb Design & Development
Medianic has done a outstanding job in creating our company website in such a short time at unbeatable prices, rovtec marine services recommended Medianic for their superior skill in Web design, thank you outstanding job!
The only thing that beat the quality of the work Medianic did for us was how quick and responsive they were whenever we had feedback or needed something extra. Would highly recommend.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.