How to Prototype A Website Easily Using CSS Grid

Posted By : Mayank Jain | 27-Dec-2018


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.



  • 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.



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) 



  • HTML
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;
        "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;
.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.













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.


        ". . 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" ;







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:



About Author

Author Image
Mayank Jain

Mayank is responsible for implementing visual elements that users see and interact with in a web application.His skillset includes JavaScript, HTML, CSS, AngularJS and Bootstrap.

Request for Proposal

Name is required

Comment is required

Sending message..