The future is now. And now. And now. Well, you know what I mean. And if we talk about the future of web design, one of the topics that are usually dealt with is CSS Grid: hundreds of articles showing their kindness and thousands of tutorials on different websites, which warn us that we should be prepared for when the mainstream reaches. But in Silo Creativo we do not totally agree. We do not think that CSS Grid is the future of web design: we firmly believe that it is already the present.
And we want to make very clear what the present is, because in several of the articles that we have talked about Grid many times the same sentences and doubts have arisen in different parts. There are some people who marvel at the ease and simple learning curve that Grid has with respect to the old methods of layout and positioning. But what better to follow with the floats to avoid compatibility problems with web browsers, as we will have time to add Grid to our workflow in the future.
In part they are right, because there are still some browsers that are not compatible with Grid. But as we see on the website Can I Use…, these barely represent 13% of the total, going month to month reducing this percentage. In addition, we have available CSS tools such as Feature Query, which give us the ability to use the classic floats with Grid in our projects, removing once and for all the possible compatibility problems, apart from ensuring that our website will be ready for when the browsers are fully adapted to Grid.
For these reasons, from Silo Creativo we want you to lose the fear of using CSS Grid. And what better way than seeing different websites in production that have already incorporated this CSS tool. All these pages, and more, are compiled in GridExamples, a sideproject that we created a few weeks ago, in which we are adding different webs of different themes that we are finding, or that users send us to the GridExamples form.
But before getting fully into the list, we want to show you how the use of the web browser can provide us not only the web search that make use of Grid, but also see how they are built, and inspire us to create our own projects.
CSS Grid and the web inspector: two great allies
In addition to the numerous tutorials on Grid that we can find in a multitude of sites, including Silo Creativo (in Spanish), there are more tools to investigate, being one of the most helpful the inspector of our web browser. If you want to know more about how to use the inspector of your web browser, you can read the article that we wrote about it in Silo Creativo. (In Spanish)
For this case, and as we are talking about CSS Grid, we will use Mozilla Firefox. And, from version 52 of this browser, it will be easier to find the declaration display: grid when we are inspecting the CSS of a web, thanks to a small icon of a grid. But from version 57, launched in September 2017, the inspector himself has a panel for Grid.
We will see all the available options placing ourselves on the Layout panel. We can activate each of the grids that have a web, to see them in a graphic way. In addition to being able to see the number of each line of the Grid, and the name of each area, this gives us, not only the knowledge with a minimum effort if a website is using Grid Layout or not, but also it offers us the possibility to see directly the grid format that is being used, and to get a better idea of how CSS is working from behind, we encourage you to see it and experiment with this new panel for yourselves!
As an example, if you go to the GridExamples website, you can see how the grids are arranged to create the web grid of the cover page.
Some examples of using Grid Layout
This list is not just intended to be a sample of the best designs of real websites that we have discovered or have sent us to GridExamples. We also want to show you how some websites of well-known companies or institutions have already adapted to this new reality. Perhaps, thanks to them, you can do the step to Grid with less fear and more hope about the new range of possibilities that you are going to have.
Slack
The well-known messaging tool has a very simple web design, but thanks to the use of Grid it positions each of its elements perfectly, in addition to adapting them in a fluid way according to the size of our device. A great example of Grid not only serves to make designs bizarre or colourful. But it is also ideal for simple design or create a grid of logos effectively.
Medium
It is possibly the best known social network for texts and articles in the world. On its cover, its asymmetrical design of images and texts is a perfect example of how Grid not only serves to create explicit grids. They mix both titles of articles without images, images in large format with texts, or this same arrangement but to smaller size. We are waiting for them to update the web completely and adapt Grid also for the complete articles.
Slate
In contrast to what we have seen so far, with Slate we have a much more complex CSS. If we stop to inspect your CSS, we will see the existence of 17 different grids. Virtually every element of the web has its own grid, which makes having different layouts in each part, without conditioning its overall design. As we saw in Ricardo’s article, Grid and the editorial design are presented as great allies.
Addons for Mozilla Firefox
Mozilla is one of the great standard bearers of the use of Grid. As shown, the Youtube channel of our admired Jen Simmons, which we will never stop recommending. And the web extensions for Firefox is a sign that Mozilla wants to give an example of the use of Grid. Any element, however small, is positioned within the general structure of the web using Grid, from the smallest icon, to the main logo.
Hidde de Vries
Hidde de Vries has been one of the people who contacted us through the form we have in GridExamples so that we could add his website to the repository, which we gladly did. Because it is a perfect sample of how developers and web designers, in their own pages and personal portfolios, are testing and adapting Grid, as the first battlefield. What better way to teach the world that you know how to handle a tool, than by showing its use in your own home.
Hesburgh Libraries
As everything is not going to be companies, we bring the website of the Theodore Hesburgh library in Indiana (USA.) They emphasize the use of the grids for the construction of the search engine of the library, in addition to the positioning of the different services, which are responsive to adapt to all types of screens.
Sony Developer World
Of this entire list, perhaps it is the website of the largest company. An unmistakable sign of how all kinds of companies are joining to use their Grid Layout websites. As it happens in other pages, in the inspector we can see how it has a multitude of different grids, each of them adapted according to the needs of each section.
Ada x Margaux
Lastly, we wanted to show a landing page for a wedding invitation. And it stands out for not having a usual design, thanks to the use of those large diamonds and the inclined texts. A perfect sample to see some of the designs we can get.
If you want to see more examples, you just have to enter GridExamples, where we usually add new websites. And if you have any other example, you can leave it in the comments, or write to the GridExamples form, where we will add it to continue expanding the repository. And that we can all enjoy, and keep learning new designs created with CSS Grid!
