Blog

  • Introduction

    We can create mockups of websites using CSS Grid module quickly. It helps us to create and experiment new layouts faster. CSS Grid Layout helps us to build the two-dimensional grid-based layout. CSS has mostly used to layout our web page, but it's never done a very good job of it. It is the very first CSS module which is created for the layout problems for making websites.

     

    Features

    • We can create and experiment with the layout very easily.
    • It helps us to build the two-dimensional grid-based layout.
    • It gives us complete control for creating the website mockup.
    • It is supported by almost all major browsers.
    • We can place our items in a precise location on the grid using names and line numbers.
    • We can control how the items are aligned in the grid area, and how the entire grid is aligned.

     

    Prerequisites 

    Required: HTML5 and any latest browser ( I used Chrome 68.0.34 for this example)
    Text Editor: Any Text Editor (Visual Studio Code is used for this example)
    Operating System: Any operating system (Linux Ubuntu 16.04 is used for this example) 

     

    Example

    • HTML
    <html>
      <head>
        
    Using CSS Grid

    </head> <body> <div class="container"> <div class="header">HEADER</div> <div class="menu">NAVBAR</div> <div class="content">CONTENT</div> <div class="footer">FOOTER</div> </div> </body> </html>

    container - element we will turn into a grid.
    ( header, navbar, content, footer ) - our required website content.

    • CSS
    .container {
        display: grid;
        grid-gap: 5px;    
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 50px 350px 50px;
        text-align: center;
        grid-template-areas:
            "h h h h h h h h h h n n"
            "c c c c c c c c c c n n"
            "f  f  f  f  f  f  f  f  f  f  f  f";
    }
    .header {
        grid-area: h;
        background-color: brown;
    }
    .navbar {
        grid-area: n;
        background-color: gold;
    }
    .content {
        grid-area: c;
        background-color:blueviolet;
    }
    .footer {
       grid-area: f;
       background-color: royalblue;
    }
    
    • We have created a grid with three rows and twelve columns of different sizes.
    • Each grid having one fraction unit wide (1/12 of the total width) with the gap between them.
    • grid-template-areas - It helps us to create the visual representation of the grid as we have defined in the grid-template-columns and grid-template-rows. In this, each line is represented as row and every character (h, n, c, f) represent a grid cell which forms a rectangular grid-area. 
    • We have defined the characters h, n, c, f due to our grid have header, navbar, content, and footer. We can define the name we want related to our website content.

     

    Result

     

     

     

     

     

     

     

     

     

     

    Changing the layouts  -  

    • Now we have to only change the grid-template-areas for modify our website mockup. You can include below code to the CSS file mentioned above.

     

    grid-template-areas:
            ". . h h h h h h h h . ."
            "c c c c c c c c c c n n"
            "f f f f f f f f f f n n" ;
    

     

    Result

     

     

    Conclusion

     

    You have now learned about prototyping a website easily using CSS Grid. If you'd like to learn more about them, please visit the following link:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

     

    Reference

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Tags: html5 , css