How Can CSS Flex and Grid Be Used Together For Better Results?

While CSS float properties did serve their purpose in what seems like the Precambrian era of web designing, they do not hold a candle to either CSS Grid or Flexbox. Developers, now, need something that can assist them better with complex layouts. CSS Flexbox and Grid can serve this purpose with their one and two-dimensional layout design respectively.

Both of these layout systems are supported by most of the browsers that are popularly used today. To know more about the browser support, check the screenshots below:

CSS FlexBox Browser Support

CSS Grid Browser Support

What boggles CSS users is which layout module is better—CSS Grid or Flexbox. An internet search for this answer will flood you with different answers. However, both of these have their own merits (and some demerits too). For example, Flexbox is used for smaller components, while CSS Grid is used for larger layouts. Therefore, in order to make the most of them, developers can choose to combine these two for better results and flexible layouts.

How Can This Integration Help Developers?

CSS Grid and Flexbox were a relief for developers from the intensive coding that was required in JavaScript. CSS made their jobs easy as it requires a lot less coding, without compromising on efficiency.

There are certain limitations to these tools though. CSS Grid works on a ‘layout first’ approach while Flexbox works on a ‘content first’ approach, which complicates things a bit.

For easy illustration, let’s take a case where you have to build a complex website.
This can be done most prodigiously with CSS Grid through which your developers will have an easy time building the complex layout of the website.

When it comes to content placement, however, Grid will not be the best option to serve your purpose. Any specific alignment that you may need for your content, whether horizontal or vertical, will require more coding with CSS Grid for DOM manipulation. Same goes for JavaScript, which can help in delivering the same results in content placement.

Your saving grace, in this case, would be CSS Flexbox. With it, you can insert a single code amongst the other Grid codes which will place the content as you want.

Therefore, to get the desired results for your website, merging these two CSS design modules will be the best option, as it will improve the productivity of your developers while reducing the time that they will be spending on a single website.

Also, you need not to worry whether these two will work in tandem smoothly. Their integration can make your work easier and more effective. In fact, to quote Rachel Andrew, a renowned web developer, “In my ideal world, CSS Grid and Flexbox would have arrived together, fully-formed to make up a layout system for the web.”

Let’s now take a look at a simple example that we implemented in one of our projects. This explains the functionality of CSS Grid and Flexbox integration.

This is what the client wanted on the desktop:

On the left side, there had to be a section or division in which a slider was needed, and on the right side, there had to be three sections placed vertically; 1. Product Name, 2. Product Size and Product Price and, 3. A button (either a sec-button, CTA button, or a faux-button) to perform some action.

It sounds easy and can be achieved by any type of CSS.

It wasn’t as easy as that, though. The twist was that on tablets and mobiles, the client wanted something like this:

First, a section on the top for the product name, then a yellow section with the product description and price of the product. Here, the product price had to be placed on top as opposed to the arrangement of these two on the desktop, where it was below the product size. Then, the part on the left side, which was supposed to be a slider section, followed by a button section. So, everything was carried out mostly through Grid, except the yellow section where price and product size were mentioned. As the order for mobile had to be changed, Flexbox was used as the solution and did the trick.

For better illustration, let’s look at the code.

Here is the HTML:

<div class=”parent”>
<div class=”div1″>Product Name</div>
<div class=”div2″>Carousel</div>
<div class=”div3″>
<div class=”p1″>Product Size – Top</div>
<div class=”p2″>Product Price – Bottom</div>
</div>
<div class=”div4″>Last section with button</div>
</div>

Simple CSS for Desktop

.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 2fr;
}
.div1 {
grid-column: 2 / span 2;
grid-row: 1;
background-color: red;
}
.div2 {
grid-column: 1;
grid-row: 1 / span 3;
background-color: green;
}
.div3 {
grid-column: 2 /span 2;
grid-row: 2;
background-color: yellow;
}
.div4 {
background-color: orange;
grid-column: 2/ span 2;
}

CSS for Mobile

@media(max-width:768px) {
.div1 {
grid-column: 1 / span 3;
}
.div2 {
grid-row: 3;
grid-column: 1 /span 3;
}
.div3 {
grid-column: 1 /span 3;
grid-row: 2;
display: flex;
flex-direction: column;
}
.div3 .p1 {
order: 2;
}
.div4 {
grid-column: 1/ span 3;
}
}

Check out this code in action here.

For a more complex example, click here.