CSS Layout

There are 2 methods that come to mind when you want to organize a layout in CSS. One being CSS Grid and the other being Flexbox. This has been the spot of controversy for quite a bit of time with both parties proclaiming one is better than the other. We'll try to give you some basic information on what these two are and the differences between them.

What is Flexbox?

Flex

    
        CSS Code
            .container{
                padding: 2rem;
            }
            .cell {
                background-color: red;
                padding: 1rem;
            }
        HTML Code
        div class = "container">
            
Lorem ipsum dolor sit amet etc
            
1
            
2
            
3
            
4
            
5
          
    

What is CSS Gridbox?

CSS Gridbox is a layout that is utilized with two-dimensional layout (such as rows and columns) in a grid base system. This makes it easier to design pages without having to use positioning or floats.

    
        CSS Code
            .container{
                padding: 2rem;
                display: grid;
                grid-gap: 1rem;
                grid-template-columns: 1fr 1fr 1fr;
            }
            .cell {
                background-color: red;
                padding: 1rem;
            }
            
            
        HTML Code
        div class = "container">
            
Lorem ipsum dolor sit amet etc.
            
1
            
2
            
3
            
4
            
5
          
    

My Personal Preference as a Novice

So far, I like the look of flexbox over grid. It provides more flexibility overall compared to CSS Grid. That's not to say that I will only use flexbox in my career but I like the way it looks a little better. Personally I prefer options and flexbox allows for maximum amount of options.

Which one do you think you'll use?

In essence, when choosing between the 2, the big questions you have to ask are;