Hello, today's post will be the first in a series of posts dedicated to the CSS Grid tool. I would like to make an introduction to this topic, and therefore answer the following questions: what is CSS Grid, what problems does it solve, how does it stand out from competing solutions and is it widely supported and available to developers?
This article is part of my CSS Grid introduction series. If you want to check out my previous posts, here) you can find the whole table of contents.
What is CSS Grid and what is it for?
In my definition, CSS Grid is a set of CSS language properties that together create an extensive system, intended for designing the layout of elements defined in an HTML document. I mentioned term layout so for the purpose of previous definition, I would also like to define it as well. Here layout is the positioning of an element on the page relative to a given factor, such as a neighbor element, parent element, or viewport.
Are we always obliged to define a layout when creating a page based on an HTML document? The answer is no. As creators, we can use the default set of rules provided by each browser (or more precisely by user agent) that make the layout for us. These rules are called normal flow. As long as the document structure is properly defined, in many cases normal flow is exactly what we want. However, there are often situations where default layout is not sufficient and we want to modify this normal flow. For this purpose, we can use the tools available in the CSS language.
We have many solutions at our disposal. There are simpler tools, based on single properties, such as: display, position, float, column-width or column-count. There are also whole systems made from groups of properties, such as table-layout, flexbox, or mentioned css-grid. From among those listed, only the table-layout is no more recommended to be used (today it is a legacy tool, used only in the absence of support for newer solutions). Each tool has its own purpose, none is better than the other, and none is designed to be used in isolation. We will achieve the best results by using the available solutions in a complementary manner.
How does CSS Grid stand out from the available solutions?
Before I go on to discuss CSS Grid, I would like to mention a few words about its older cousin, Flexbox. I wish to do this for the sake of the features that they have in common and the fact that introduction of both tools were significant improvement in the subject of creating page layouts.
The older cousin of CSS Grid, Flexbox, has been widely used for many years now. Before its creation, many tasks related to creating a layout were challenging and often required the use of various hacks. Flexbox changed this reality. It is a tool that allows you to easily control the position, size and alignment of elements in one dimension (horizontally or vertically). It is perfect for creating small-scale layouts, including responsive ones.
And just as Flexbox turned out to be a groundbreaking tool, its successor, CSS Grid, turned out to be equally a breakthrough solution. Grid based, equipped with an extensive auto-placement algorithm, it has most of the Flexbox capabilities, but extends them to layout control in second dimension. And it is the second dimension that is the most important change that distinguishes it from Flexbox. But don't think that all these great improvements make us forget about Flexbox. CSS grid is 'heavier' and more complex tool, which makes it better suited to managing elements on a larger scale (entire components on a page). As I mentioned earlier, each of the available layout tools has its own purpose and each one is worth using.
What is the availability and support for CSS Grid?
CSS Grid as a tool was proposed in April 2011. Since then, the specification has been evolving based on the feedback from developers and browser vendors and today has achieved the status of W3C Candidate Recommendation Draft. Although it is not yet part of the official CSS language specification, since 2017 it has been available natively in most of the popular desktop and mobile browsers. It is worth mentioning that Internet Explorer 10 and 11 still supports CSS Grid as well, but only older implementation with outdated syntax.
I hope that today's post has proved that CSS Grid is a widely available tool, knowledge of which can be an important equipment for every web developer. If you would like to learn more about this tool, in the next few posts I will present you its capabilities and show you how to use it. If you liked today's entry, please leave a reaction, write me a message or comment. I will be grateful for any feedback. See you soon in the next post.
If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️
Oldest comments (0)