A beginner’s guide to CSS Grid
In this article, we will discuss about Grid. What is Flexbox and Why we should use this layout for user interface design? Let’s start with why we should use layout models in user interface design.
Why we should use layout models?
As we all know that whatever we search today on the Internet, it comes in web pages. And in those web pages there is data about which we searched. Nowadays, technology has enabled us to browse the website on any screen. But the web page should be responsive irrespective of the size of the screen. That’s where responsive layout design comes into the picture. We can use CSS to make the page responsive, but if we go with this approach, then we have to code very complex and it’s very frustrating to get working consistently and precisely across browsers as well. To solve whatever problem we face with the CSS approach. Programmers/developers invented proper responsive layout models available natively in the browser, out of which — Flexbox, CSS Grid became most popular and are widely supported across all platforms & browsers. With the help of these layout models, we can design a layout page of a web page and that too without JavaScript, which was not possible before. These also make the code easier to understand and maintain.
Now, We will precisely talk about CSS Grid fundamentals.
What is Grid Layout?
Grid layout design structure and functionality are similar to flexbox but there are few differences between them. CSS Grid Layout is a CSS layout method developed for the two-dimensional layout of items on a webpage or an application, meaning it can manage both columns and rows. CSS grid allows for more complex layouts than flexbox because it organizes content on both the horizontal and vertical axes — columns and rows. Grid is mostly defined in the parent element. In flexbox, most of the layout (beyond the very basics) happens to the children.
We can define the grid container by using either display: grid or display: inline-grid. Any direct children of the grid container are grid items, and we have complete control over where these are placed, how many rows or columns they span, etc. Lets checkout the grid layout with a small example:
Result:
Like tables, grid layout allows us to align components into columns and rows.
Let’s check out a few Grid container properties which we can use while designing the user interface.
Grid container properties:
- display :
Defines the element as a grid container and establishes a new grid formatting context for its contents..container
{
display: grid | inline-grid;
}
2. grid-template-columns & grid-template-rows :
Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line..container
{
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
}
3. grid-area :
The grid-area property specifies a grid item's size and location in a grid layout..item
{
grid-area: 2 / 1 / span 2 / span 3;
}
4. flex-grow :
This defines the ability for a flex item to grow if necessary..item
{
flex-grow: 4;
}
5. justify-self :
Aligns a grid item inside a cell along the inline (row) axis (as opposed to align-self which aligns along the block (column) axis). This value applies to a grid item inside a single cell..item
{
justify-self: start | end | center | stretch;
}
6. place-self :
place-self sets both the align-self and justify-self properties in a single declaration..item-a
{
place-self: center stretch;
}
Apart from these properties, there are many properties in the Grid layout. We can use the properties as per our requirements and design the user interface.
Apart from Grid layout, Flexbox layout is also one of the most popular layout which is used widely across all platforms. Now you must have the question is your mind that when to choose Flexbox and When we should go with Grid layout? Let's talk about the selection of layout as per requirement.
When to use Flexbox & Grid layout?
Flexbox and CSS Grid are two CSS layout modules that allow us to create complex layouts that were previously only possible by applying CSS hacks and/or JavaScript. In an ideal scenario, you may find that you employ both for different layout tasks. At this point, we will specifically look at the differences between Flexbox & Grid layout and how they solve layout issues which will help us to choose the right layout for our problem.
1. Grid is Container-Based but Flexbox is Content-Based:- flexbox layout is calculated after its content is loaded whereas the grid layout is calculated regardless of the content inside it. So, if possible, avoid using flexbox to build the overall layout of your website.
2. Flexbox does not have a Gap Property but Flexbox has Gap property:- In order to achieve the same result in flexbox, we would have to use padding.
3. Grid is Two Dimensional but Flexbox is One Dimensional:- Flexbox is best for arranging elements in either a single row or a single column. Grid is best for arranging elements in multiple rows and columns.
Apart from these differences, there are many differences between the Flexbox and Grid layout. We can choose the correct layout as per requirement and defined the functionality of these layouts.
With this, we come to an end to this blog. I hope you got a clear understanding of the Grid layout from this article.