.post-detail-layout__StyledBackgroundImage-sc-gl55w6-0.jHsswc.gbi-10061863-kLGqeQFvVgpVvzLw9UQEt2:before { opacity: 1; background-image: url('/static/65cbc1a95534918f246a2f3e562c328e/b9630/grid-vs-flexbox-cover.png'); }

3 min read

Creating the Same Layout With Grid and Flexbox

Last Update: 21 March, 2022

Creating a layout that just works can be tricky at times. But it is possible to create a functionally similar layouts using both grid an flexbox. Here in this post I created 3 different layouts as examples.

§Box Example

<body>
    <div class="flexbox-container">
        <h2 class="wide-3">Boxes</h2>
        <div class="item-box item-1 wide-2">1</div>
        <div class="item-box item-2">2</div>
        <div class="item-box item-3 wide-2">3</div>
        <div class="item-box item-4 wide-2">4</div>
        <div class="item-box item-5 wide-3">5</div>
        <div class="item-box item-6">6</div>
        <div class="item-box item-7 wide-3">7</div>
        <div class="item-box item-8">8</div>
        <div class="item-box item-9 wide-2">9</div>
        <div class="item-box item-10">10</div>
        <div class="item-box item-11">11</div>
        <div class="item-box item-12 wide-2">12</div>
    </div>
</body>

Flexbox CSS:

body{ background: #3b094b; }
.item-box{
    min-height: 50px;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    width: 30%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 10px;
    margin-bottom: 10px;
}
h2{
    text-align: center;
    font-size: 50px;
    padding: 0;
    color: #fae1dd;
}
.item-1{ background: #8cdeff;}
.item-2{ background: #005f73; }
.item-3{ background: #0a9396; order: 2; }
.item-4{ background: #94d2bd; order:4; }
.item-5{ background: #e9d8a6; order:5; }
.item-6{ background: #ee9b00; order:3; }
.item-7{ background: #ca6702; order:7; }
.item-8{ background: #bb3e03; order:4; }
.item-9{ background: #ae2012; order:9; }
.item-10{ background: #9b2226; order:10; }
.item-11{ background: #fae1dd; order:11; }
.item-12{ background: #ffd7ba; order:12; }
.flexbox-container{
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    max-width: 960px;
}
.wide-2 { width: 66%; }
.wide-3 { width: 100%; }

Grid CSS:

body{ background: #3b094b; }
.item-box{
    min-height: 50px;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}
h2{
    text-align: center;
    font-size: 50px;
    padding: 0;
    color: #fae1dd;
}
.item-1{background: #8cdeff;}
.item-2{background: #005f73;}
.item-3{background: #0a9396;}
.item-4{background: #94d2bd;}
.item-5{background: #e9d8a6;}
.item-6{background: #ee9b00;}
.item-7{background: #ca6702;}
.item-8{background: #bb3e03;}
.item-9{background: #ae2012;}
.item-10{background: #9b2226;}
.item-11{background: #fae1dd;}
.item-12{background: #ffd7ba;}

.grid-container{
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-auto-flow: dense;
    max-width: 960px;
}
.wide-2 { grid-column: span 2; }
.wide-3 { grid-column: span 3; }

With the help of span values that is provided by the grid layout adjusting sizes is very easy. Grid gap allows us to keep a consistent distance between grid items. The distance I created between the items in the flexbox example is calculated by dividing the value (in percentage) that wasn't used by the items by four, for top, bottom, right and left margins. Grid gap appears a lot more useful when it comes to the distance between items. Going back to change simple detail with the distances can become a nightmare on a bigger project if you are using flexbox.

Also using the empty spaces that will appear after giving your items certain sizes can be easily dealt with in grid layout. Simply choose the option "grid-auto-flow: dense;" and grid will fillout those spots automatically with the items that fit. The alternative to this in flexbox (that I could find) is the "order" property. With the help of order prperty you can fill up the empty spots that might appear in your layout but I find this method to be very error prone. Plus you have to work on your layout for different sizes and change the order as well.

<body>
    <nav class="navbar">
        <img src="/very-cool-logo.png" alt="brand logo">
        <ul class="navbar-items">
            <li class="navbar-item">About</li>
            <li class="navbar-item">Blog</li>
            <li class="navbar-item">Cat Pics</li>
            <li class="navbar-item">Contact Us</li>
        </ul>
    </nav>
    <h1>Flexbox vs Grid Layout</h1>
</body>

Grid CSS;

body {
    background: #227c9dff;
    padding: 0;
    margin: 0;
}
.navbar {
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    background: white;
    max-width: 960px;
    height: 100px;
}
.brand-logo { height: 100px; }
.navbar-items {
    list-style: none;
    display: grid;
    grid-template-columns: auto auto auto auto;
    max-width: 550px;
}
.navbar-item {
    font-size: 2rem;
    margin: 10px;
}
.navbar-item:hover { cursor: pointer; }
h1 {
    font-size: 3rem;    
    text-align: center;
    color: aliceblue;
}

Flexbox CSS;

body {
    background: #227c9dff;
    padding: 0;
    margin: 0;
}
.navbar {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    background: white;
    max-width: 960px;
    height: 100px;
}
.navbar-items { 
    list-style: none; 
    margin-left: auto;  
    display: flex; }
.navbar-item { font-size: 2rem; margin: 10px; }
.navbar-item:hover { cursor: pointer; }
h1 {
    font-size: 3rem;    
    text-align: center;
    color: aliceblue;
}

The navbar example is a very simple one but it demonstrates where to use flexbox effectively. Creating the navbar with grid was simple enough but I had to set a certain height property for the logo image. From what I have learned so far that's not something we wanna do very often. When it comes to responsive layouts setting certain widths and heights scare me a little bit. So I avoid setting height values as much as possible. Rest of the layout was wairly straight forward and too keep my logo and the tags seperated I used "justify-content: space-between". With flexbox first of all I didn't have to set a height for my logo, which makes me sleep better at night. Keeping the a tags on ht eopposite site of my logo was possible with the help of "margin-left: auto". The same trick can be used to keep your footer at the bottom of your page. Give you are body a flex value and boom you made it.

§Page Layout

<body>
    <div class="content-container">
        <h1 class="page-title">Awesome Web Page About Cool Stuff | Grid vs Flexbox Layout</h1>
        <div class="left-container">
            <img class="avatar-pic" src="./wolf.png" alt="avatar">
            <h3>Author Info</h3>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. amet consectetur adipisicing elit. Earum ipsam quidem enim itaque autem sed temporibus quia, et necessitatibus delectus consectetur animi doloremque architecto similique eaque possimus, ducimus aliquid voluptate!
                Voluptas nobis mollitia, accusamus suscipit 
            </p>
        </div>
        <div class="deal-container">
           <h3 class="deal-title">Some Deal you should know about</h3>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ipsam quidem enim itaque autem sed temporibus quia, et necessitatibus delectus consectetur animi doloremque architecto similique eaque possimus, ducimus aliquid voluptate!
           Voluptas nobis mollitia, accusamus suscipit quod, sed illo deserunt sapiente non eius incidunt nihil quis nam unde ratione at odit recusandae enim voluptatem, natus alias. Accusamus, dignissimos! Quisquam, veniam nemo.</p>
        
        </div>
        <div class="blog-container">
        <h2 class="blog-title">Blog Post</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, harum reprehenderit. Ad ut officiis perspiciatis enim? Totam deleniti labore odio consectetur! Quia praesentium temporibus laboriosam quis quod atque, mollitia sunt.
        </p>
        <h3 id="a-title">A title</h3>
        <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, harum reprehenderit. Ad ut officiis perspiciatis enim? Totam deleniti labore odio consectetur! Quia praesentium temporibus laboriosam quis quod atque, mollitia sunt.
        </p>
        <h3 id="another-title">Another title</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet accusantium ut, expedita eaque quaerat adipisci, numquam, ipsam maiores voluptatum quis dicta explicabo doloremque? Modi et natus temporibus fugiat quae! Saepe!
        </p>
        <h3 id="third-title">Third title</h3>
        <p>
        Voluptates laborum velit, nostrum architecto a aperiam! Quisquam quo dolorem officiis eveniet labore assumenda. Officia iste reprehenderit ut perferendis magnam commodi nostrum, ducimus ipsam quia accusamus ea autem? Illum, porro.
        Excepturi magni enim necessitatibus voluptas qui repellendus, totam amet eveniet iste natus ipsum tenetur quod omnis magnam officia porro vitae dolores fuga doloremque asperiores tempora. Perspiciatis ipsa dolor quos deleniti.
        Alias ab voluptatum similique quidem nihil nostrum dolore maxime consectetur saepe nobis odit hic, numquam, perferendis iusto sint magnam ipsam earum molestias, debitis veniam a. Rem dolor atque molestias nemo?
        </p>
        <h3 id="the-last-title">The Last Title</h3>
        <p>
        Ipsa nobis libero amet voluptate facilis, reiciendis illo corporis fugit, laudantium dolor atque quo temporibus sit illum dignissimos porro! A obcaecati velit ducimus molestiae provident doloremque, atque quaerat quam corrupti?
        Numquam inventore maiores nobis! Culpa minima facilis repudiandae itaque doloribus, magni sint, qui eius dolorum enim quod ipsa maxime quaerat esse alias nostrum architecto, vitae cupiditate voluptatibus repellendus! Earum?</p>
        </div>
        <div class="right-container">
            <h3 class="toc-title">Table Of Contents</h3>
            <ul>
                <li><a href="#a-title">A Title</a></li>
                <li><a href="#another-title">Another Title</a></li>
                <li><a href="#third-title">Third Title</a></li>
                <li><a href="#the-last-title">The Last Title</a></li>
            </ul>
        </div>
    </div>
</body>

Grid CSS;

body {
    padding: 0;
    margin: 0;
    background: #023047ff;
    color: whitesmoke;
}
a { color: whitesmoke; font-size: 1.6rem; }
li {
    list-style: none;
    padding: none;
    margin: none;
}
.content-container {
    display:grid;
    grid-template-columns: 3fr 5fr 2fr;
    grid-gap: 30px;
    justify-items: center;
}
.page-title { grid-column: 1 / -1; }
.left-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px;
    justify-items: center;
    background: rgba(0,0,0,.25);
    padding: 20px;

}
.avatar-pic {
    background: white;
    border-radius: 50%;
    max-width: 100px;
}
.author-container {  padding: 5px; }
.author-info { background: red; }
.deal-container {
    grid-column: 1/ 2;
    grid-row: 3 / 4;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
}
.deal-title { font-size: 2.4rem; }
.blog-container { grid-row: span 3; }
.blog-title { font-size: 3rem; }
.blog-container > h3 {  font-size: 2rem; }
.blog-container > p { font-size: 1.4rem; }
.right-container {
    padding: 20px;
    background: rgba(0,0,0,.25);
}
.toc-title {
    font-size: 2rem;
    text-align: center;
}

Flexbox CSS;

body {
    padding: 0;
    margin: 0;
    background: #023047ff;
    color: whitesmoke;
}
a {
    color: whitesmoke;
    font-size: 1.6rem;
}
li {
    list-style: none;
    padding: none;
    margin: none;
}
.content-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-items: center;
}
.page-title {
    text-align: center;
    width: 100%;
}
.left-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 600px;
    width: 27%;
    justify-items: center;
    padding: 20px;

}
.avatar-pic {
    background: white;
    border-radius: 50%;
    max-width: 100px;
}
.author-container { padding: 5px; }
.deal-container { background: rgba(255, 255, 255, 0.1); }
.deal-title { font-size: 2.4rem; }
.blog-container { width: 48%; }
.blog-title { font-size: 3rem; }
.blog-container > h3 { font-size: 2rem; }
.blog-container > p { font-size: 1.4rem; }
.right-container {
    height: 300px;
    width: 20%;
    padding: 5px;
    background: rgba(0,0,0,.25);
}
.toc-title {
    font-size: 2rem;
    text-align: center;
}

In the page layout part I wanted to create a very simple looking blog page. Odds are you either made one or are going make one really soon. And if you don't have one definitely get started. I digress, keeping a consistent layout with flexbox felt like a nightmare and I wouldn't recommend trying it at all. Before I started making this post I decided to keep a consistent DOM structure for both flexbox and grid. But I had to cheat a little to make the flexbox layout work. Even with the help of order propery keeping multiple rows of very differently sized elements is just too hard and definitely not worth the struggle. Using grid, after struggling with flexbox, to create the same layout felt like a breeze. First of all the ability to stretch grid items in different grid boxes makes life a lot easier. Is your blog post too long, no problem give it a "grid-row: span 2" or 3, or 5, all up to you. In the sides you can display author info or table of contents in appropriately sized boxes.

§Conclusion & My Thoughts

I would definitely suggest using grid for larger elemetns or for a page. For smaller componenets like navbar or a div object that contians a bunch of image and some p tags you can go with flexbox. In almost every sceneraio I can think of we can use grid. However knowing what flexbox can do for your project helps you use css to the fullest. You can find the full code in here in this repository

Ilker Akbiyik

Table of Contents

Box Example Page Layout Conclusion & My Thoughts

tech - 13 May, 2022

6 Most Useful React Hooks

Functional components are definitely my favourites type of react component. I find them easier to write and read. The minimum size of the boilerplate code necessary to get the compoennt up and running is also a lot smaller than the alternative. Hooks are going to be your biggest helper working with functional components.

Ilker Akbiyik

tech - 10 June, 2022

Uses of JavaScript Spread Operator

Spread operator can be used to make everything a lot easier when working with arrays and objects in JavaScript. Non-mutating operations can be done using this operator as well. When a function is expecting zero or more arguments you can again make use of spread operator.

Ilker Akbiyik

tech - 27 June, 2022

Chart.js VS D3.js Which One To Choose

Displaying your data as graphs and charts not only make them more easy to understand, it also makes dealing with data not so boring. As a web developer / programmer you either worked with or going to work with data. Chart.js and D3.js are the two most popular data visualization libraries that you can use with JavaScript. In this post I am going to be sharing with you some general information about each of them and my personal opinion using both of these libraries.

Ilker Akbiyik

Creating the Same Layout With Grid and Flexbox

§Box Example

§Navigation Bar

§Page Layout

§Conclusion & My Thoughts

Related Posts