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?
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:
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
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?
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.