How To Achieve Better UI Design With CSS Grid Layout
There’s a myriad of factors that your average consumer will judge your UI design on, both consciously and unconsciously. It needs to be neat, comprehensive, sensible, intelligent, considerate, and so on so forth. Even an inexperienced app user can get a gut feeling that something just isn’t quite right with a poorly designed UI.
The UI is the first thing every consumer interacts with when they open an app. It tracks, then, that every app’s UI needs to leave a good first impression, as well as continual high-quality service, or else you’ll find that those users will disappear.
Proper design, like in architecture, graphic work, and essays, are both an artform and a technical skill combined into a single discipline. Creating a structure that caters to the needs of the user while fundamentally exercising a fluid, supportive structure that exercises the best aspects of an app may sound challenging, but the process itself is deceivingly simple.
Reducing it to its base components, achieving better UI design comes down to one rule: stick to the established processes. There’s not much call to reinvent the wheel, so you don’t need to stress about creating anything from scratch. That’s why we’re here to help you achieve a better UI design with a CSS grid layout.
What Is a Grid?
Basic questions first: what is a grid exactly? Not a lot of this will be helpful if you don’t have a clear picture in mind of what we’re talking about, after all.
Whether you’re aware of it or not, you’re well acquainted with the concept of grids as a design structure already. You’re used to them everyday in functionally everything you use. The UI layout of the apps on your phone, the structure of every story in the newspaper, the placement of every building in city planning, and the framing of all those famous Renaissance paintings all abide by a grid structure. If you’ve ever used a ruled notebook in school, then you have firsthand experience with a grid system.
That last example isn’t quite the same, but it was among the first early “grid” designs, so credit where credit is due.
A grid for web design and development draws on the same principles, but adapted to suit the needs of a technology-based interface. In web development, the grid serves as the framework for the page’s layout. There are many different types of grids that can be used, all with different purposes, but they all have three fundamental rules in common:
- Provide order, connectedness and reinforce hierarchy.
- Aid design and scalability by providing a set of predefined rules.
- Answer questions like “where should this go.”
History of the Design Grid
Knowledge is the defining aspect that has made humankind as sprawling and thriving as it is today. Learning from history fundamentally affects our understanding of how present day descendants of the original function. Grids follow this same vein, evolving from a practical, physical construct into a digital form to match new needs and functions. If you want to understand their use in this age and how they contribute to better design digital experiences, you need to know their origins.
If nothing else, you get to learn something new today.
Grid and early book design
The first usage of grids were used to help design books. With even the smallest of mistakes being capable of ruining an entire, valuable page, perfection in structure and design was paramount. With the inclusion of the grid system, designers were able to arrange layouts to both aid the user through reading and for structured writing.
Renaissance era and harmonious design
We mentioned Renaissance art earlier as an example of early grid work. Chances are you’ve heard of the “golden ratio” or “golden rectangle” before, where you can divide a canvas into several perfectly proportioned segments. The application of this ratio, 1:1.618, merged architectural and visual representation on a canvas.
Renaissance artists strived to create perfect geometry in their paintings, resulting in symmetrical canvas layouts. The golden ratio was the foremost equation for their means, and remains in circulation today. This merger between architecture and visual representation is what first produced the grid, although it wasn’t called that at the time.
Grid and print design
During the 13th century, a famous diagram created by Villard de Honnecourt was created. It was intended to produce page layouts with margins of fixed ratios, resulting in what was considered a “harmonious” design. Like the golden ratio, it provided a way to make the most balanced, perfect image. Villard’s diagram remains a guiding principle in the design of print objects such as book covers.
Grids in the Industrial Revolution era
With the beginning of mass production, print designers were requested in high demand. They had the challenge of communicating different messages to different groups of people, allowing natural eye scanning behavior while also highlighting only certain sections to the reader. The grid design facilitated the necessary, easily parsable reading blocks for this.
During World War I, Switzerland was one of the only neutral countries in the war, becoming a meeting ground for refugees from all over Europe, including intellectuals. They also happened to be one of the few places where paper and ink weren’t scarce commodities.
These conditions allowed for the creation of multilingual documents, with fragments or columns in French, Italian and German, the three official languages of the country. English also found its way onto these documents, though infrequently.
The need to present the same text different languages gave birth to the “modern grid” with an asymmetric approach, aligning text flush to the left and ragged to the right, leaving a bigger margin for notes.
What Is CSS Grid Layout?
Web design previously worked off the 12 column grid system. However, while it served its purpose in the grand scheme of web development, web design that was based off of the 12 column grid system grew stagnant up to a certain point. With the CSS grids, we now have more capacity to design and create in a more interesting and flowing way than the previous system ever could have allowed.
The CSS Grid Layout is a two-dimensional layout system that allows web developers and designers to create complex, responsive web design layouts and user interfaces more easily and consistently across browsers. Before the CSS grid system came along, most of the layouts designers had to use were hacked together to pull off the envisioned final product.
It’s similar in respects to flexbox, an alternative layout system. However, flexbox has always been more of a one-dimensional layout, whereas the CSS grid is two-dimensional, offering much more control over horizontal and vertical aspects of the layout. There is now, with this new grid, a dedicated system for creating web pages without having to resort to hacks and tricks that would leave out vital functionality.
The CSS Grid Layout allows designers to change the location of page elements as needed at different breakpoints without compromising a sensible, structured document for the responsive design. You’re capable of achieving better functionality without sacrificing other visual aspects.
Each element has a specific area on the grid, meaning there’s no risk of overlapping due to smaller viewports, text, or content size changes. Items can be layered, even overlapping one another if required. You have the leniency and ability to customize without compromise. By allowing authorized room for adjustment and design, web developers are free to create web pages without constant workarounds and headaches.
What Can We Achieve with CSS Grids?
So what are some options that are now available with the advent of a layout that conforms to versatility and structured design? For starters, here are a few examples of what the CSS Grid Layout can do that other layouts can’t:
- Uneven columns
- Gutterless grids
- Compound grids
- Odd number columns
- Item layering
- No clearing required
- Explicit and implicit grids
- Nested grids
How to Build a Grid?
Now that you’ve learned about the history of grids and the functionality of the CSS Grid Layout, what about putting it into practice? Grid building is simple enough with only a few basic instructions to follow. Keep in mind that the most important action of a grid is connecting space and elements within that space.
- Define a constraint: the starting point for your grid will depend on the specific content of your design and the choices you make in setting constraints.
- Assets as a starting point
- Banner sizes as a starting point
- User traffic from a device as a starting point
- Create a unit base on it
- Create the grid based on the unit
- Try it, test it, iterate
Trial and error is your friend here.
Hand-Picked Related Reads For You
You may have a few more questions about terminology or the full capabilities of the CSS Grid Layout. We’ll do our finest work addressing the most common lingering questions here.
What’s a gutter?
The gutter is the space between two columns in the page layout. Most of the time you’ll have them between all your items on the page.
Can columns be unequal in width?
Absolutely. Column width should respond to your content, and they can be modified to fit what your project needs.
Should small screens have a different grid?
As good as the CSS grid is, it’s not a jack-of-all-trades. When dealing with different screen sizes, such as comparing between phones and laptops, you should different grids to fit their intended purpose.
What does it mean to be a digital product designer?
A digital product designer is task with using design skills and technical knowledge to improve the way that existing products work and look. When confronted with a new project, their job is to discover and define the problem, and shortly thereafter emphatically design the solution.
What makes a successful digital product design project?
You need to start off with having a clear vision and strategy, as well as having the right team for the job. Every design project needs a product vision that establishes the direction and guides the product design team. Being clear about the boundaries of your solution will help you stay focused when crafting your product.
Product strategy defines a product’s journey, and without a well established gameplan you may find your team overworking, going over budget, or getting confused. Planning your route toward the target destination by focusing on exactly what you need to build helps avoid these issues.
What are the current challenges of UI/UX product design?
The main obstacles that come up in UI/UX design involve generating modular and scalable products while defining standardized UX design processes that can easily align to those of the development team.
Designers have a long history across various disciplines of using grid layouts to provide a structured, aesthetically perfect design. The golden ratio and Villard’s diagram are examples of early grid systems that are still in use today. A long history has culminated in the CSS Grid Layout, the adapted system from physical architecture and visual representation to web design.
The CSS Grid Layout provides the means for designing web pages with optimal customization. Web designers no longer need to use hacks and workarounds to get their sites finished, instead opting for a layout that accommodates all the functionality required for a finished product.
Designers can reposition page elements, move items without ruining the structure, overlap and layer items as needed, and so on. The functionality provided by the CSS Grid Layout ushers in a new day for web designers.