For many years CSS Grid and CSS Flexbox are recognized technologies that are being used to develop web layouts. Although having some clear resemblance they are in fact used to solve very different web layouts related complications. Flexbox layout is designed after its content is loaded while the Grid layout is designed irrespective of the content inside it, which is why Grid is commonly used to build the overall layout of the website.
CSS Flexbox
Flexbox model offers an effective way to align and distribute space among elements within layouts even if we are dealing with the dynamic or unidentified size and viewport of elements. You need to create parent element as a flex container. You can accomplish this by setting display:flex or display: inline-flex (inline variation) to the parent element and that is it you are all set to use the Flexbox model.
Flexbox Is One Dimensional (Row or Column, Horizontal or Vertical)
The direction of flex-items on the layout can be decided using flex-direction property but it can only be in a row or column, unlike Grid which can position elements either in rows or columns, in simple terms we can say that Flexbox is one dimensional. Let’s take one-dimension layout as an example;
The Elements Are In A Single Row. We can Achieve It Using Flexbox Like
<ul class="names-list">
<li>Jhon</li>
<li>Jenn</li>
<li>Geff</li>
<li>Harry</li>
<li>Anna</li>
<li>Chris</li>
<li>Charlie</li>
</ul>
.names-list {
display: flex;
list-style: none;
justify-content: space-around;
}
Note that Justify-content property allocates equal amount of space to the flex-items.
Flexbox Is Content Based
The size of an element (flex-item) is defined inside the flex-item in flexbox layout.
Let’s look at an example to clarify the above concept.
Here is the HTML to create elements in row:
<div class="row">
<div>abc</div>
<div>def</div>
<div>ghi</div>
<div>jkl</div>
<div>xyz</div>
</div>
Styling This Using Flexbox
.row {
max-width: 300px;
margin: 20px auto;
display: flex;
}
.row > div {
border: 1px solid black;
text-align: center;
padding: 15px;
flex: 1 1 auto; / Items size defined inside items /
}
The output of the above looks something like below
The size of the cells is defined inside the flex-item by giving flex: 1 1 auto;. The flex property is shorthand; its default value is 0 1 auto to set flex-grow, flex-shrink, and flex-basis properties respectively. Here the div that has row class is the flex-container and we do not set the size of the items there. Size will be set inside the flex-items.
Gap In Flexbox
To create gap in Flexbox model we need to use padding and more containers, or need to give more width to flex-container and use the justify-content property to create gap between flex-items and overlapping elements in Flexbox requires transforms, negative margins or giving elements absolute positions in order to get out of the flex comportment.
CSS Grid
After Grid, the creation of structure of a layout does not depend on <div>. Parent element or grid-container is used to exactly define the structure of the layout and not how the content is organized inside the grid-container.
CSS Grid Is Two Dimension (Row and Column, Horizontal and Vertical)
Grid is two dimensional this means that it can easily render rows and columns simultaneously. The two dimensional layout cannot be implemented by using single row or a single column, we need multiple rows and multiple columns to do that and that is where CSS Grid makes it easy for us by using properties like grid-template-rows and grid-template-rows.
Let's take a two-dimensional layout as an example:
This layout can’t be implemented with a single row or column. This can be accomplished by CSS Grid in which we can use multiple rows and columns.
Grid Is Container Based
Taking same example as of Flexbox:
Styling Above Layout In Grid
.row {
margin: 20px auto;
max-width: 300px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; / Size of items defined inside container /
}
.row div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}
Now the cell’s size is defined using grid-template-columns inside the div having class row which is grid-container (.row), not the grid-item. This is very important to note that the grid layout is checked irrespective of the content inside it.
Gap In Grid
Gapping property (grid-column-gap) in grid puts major difference between grid and flexbox. One can create gaps between grid-items using grid-column-gap.
Perfect your web layouts with Flexbox and CSS Grid. Ready to level up your design skills? Contact us and let's craft something extraordinary!
