How to Prototype A Website Easily Using CSS Grid
Posted By : Mayank Jain | 27-Dec-2018
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>
</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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.