Blog

  • Grid

     

    Which one should I use for CSS, Grid or Flexbox? In addition to the video in this article, we will look at this issue in more details in the next few paragraphs.

     

    To answer this question, let's first understand what the CSS grid is. Essentially, it allows us to create a design for our page to locate HTML elements.

     

    This design was created by defining columns and rows, so the CSS grid is using two-dimensional space.

     

    This is accomplished by adding display:grid to rotate the wrapper (in this case, the <body> element) into the mesh. In addition, columns and rows are defined, as well as the names of the cells created.

     

    The following is the final code of the <body> container:

     

      body {
      display: grid;
      grid-template-columns: 30% auto;
      grid-template-rows: 60px auto 60px;
      grid-template-areas: "hd hd"
                           "sidebar main"
                           "footer footer";
    }    
            

    The design of a defined grid is one step, and another important part is the positioning of html elements. Here is the simplified CSS code (complete code can be found here):

     

                  header {
      grid-area: hd;
    }
    
    aside {
      grid-area: sidebar;
    }
    
    main {
      grid-area: main;
    }
    
    footer {
      grid-area: footer;
    }  
            

     

    A grid area is a property that allows you to assign HTML elements to specific cells/areas defined by a grid template area.

     

    As this example shows, CSS Grid is great when creating complex design and positioning elements like these. Of course, you can easily add multimedia queries and other cool features, if you want to learn more, please check our complete course again.

     

    Flexbox

     

    The CSS Grid helps us create page layouts and positioning elements. What is the idea behind Flexbox?

     

    Flexbox is also enabled by displaying properties. Like the CSS Grid, it helps us locate HTML elements.

     

    Unlike CSS grids, it is about positioning elements in one-dimensional space. However, we do not have rows or columns. We only get one of them.

     

    Here's an example:

    
     
    .navigation { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }

     

     

    Grid vs Flexbox

     

    The last example not only shows how to place Flexbox side-by-side or one on top of another, Flexbox is very useful. It also shows how Flexbox and CSS Grid work together.

     

    You can use grids to create generic designs and Flexbox to place elements inside cells for all situations where you just place them in one dimension (row or column).

     

    Thanks

Tags: css