In this article, we will see how to make a grid without calling CSS Grid property, along with understanding its implementation through the examples. It is essential to understand how CSS grid property works but what if we do not use the CSS grid property to make a grid. This is the generic question asked by the interviewer, which can give you a better understanding of how to customize the design or other ways to design without using the specific or dedicated method or property. Here, we will first create an HTML file containing one div container for the grid, and the second one we created a button which is a toggle button. The below is the HTML code with the basic structure.
HTML Code:
HTML
<!DOCTYPE html> <html> <head> <title> Grid structure without using CSS Grid Property </title> <script src="practice.js"></script> <link rel="stylesheet" href="practice.css"> </head> <body> <h2>Welcome To GFG</h2> <div id="grid"></div> <button id="togglebtn"> Toggle </button> </body> </html> |
CSS Code: In CSS, first, we styled the grid and button with the basic CSS properties that will help to design the grid structure. We will set the display as flex that will set the flexible length on flexible items, along with defining the other CSS properties i.e. margin-top, align-content, width, height, etc. For creating the tile of 9*9 grid, we will create the tile of 60*60px and then we gave the left and right border. The following method, we did
breadth of grid container = width of tile * 9 + border-width * 2
Note: In the above formula, border-width property define the width of the border.
We will use the above concept to create the size of the grid container according to it. Make sure that every element is in the center of the tile. For, this, we have set the margin so that it does not separate and messy. We have added toggle btn with box-shadow property and added color to the button so that when hovering, it will glow and also create a hide class to hide the button by setting the display as none.
Filename: practice.css
css
#grid { display: flex; margin-top: 10px; flex-wrap: wrap; border: 1px solid black; align-content: center; width: 566px; height: 566px; margin-bottom: 2vmin; } /*It is the tile which will append to the grid*/.tile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: 1px solid black; width: 60px; height: 60px; text-align: center; margin: 0px; font-size: 5vmin; } /* Thick right border for segregation*/.rightborder { border-right: 5px solid black; } .bottomborder { border-bottom: 5px solid black; } #togglebtn { height: 5vmin; width: 12vmin; background: none; border-radius: 1vmin; } #togglebtn:hover { background-color: cyan; box-shadow: 0 0 12px cyan; cursor: pointer; } .hide { display: none; } |
JS Code: In JavaScript, we create an id function that returns the id of the element that will be passed. In window loads, we will run the for loop, & also will create elements using the document.createElement() method that will be used to create the HTML element. It will give every tile we created in the loop with an id of idcount and then increases the counter by 1 so that it will generate for the different values. Now, add the right & left border at certain points by calculating its width. Add if and else condition that will add a toggle button feature. If the clicked count is even, then we remove the CSS hide class from it and if the count is odd then clicked adds hide class.
Filename: practice.js
javascript
function id(id) { return document.getElementById(id); } let count = 0; let idcount = 0; window.onload = () => { for (let i = 0; i < 81; i++) { // Create tile & gave it CSS of the // tile and then append it let tile = document.createElement("p"); tile.id = idcount; idcount++; tile.classList.add("tile"); tile.textContent = ""; // console.log(id("grid")); if ((tile.id > 17 && tile.id < 27) || (tile.id > 44 && tile.id < 54)) { tile.classList.add("bottomborder"); } // Add right border after certain number // of tiles, you can do anywhere you want, // remember to calculate its width if ((tile.id + 1) % 9 == 3 || (tile.id + 1) % 9 == 6) { tile.classList.add("rightborder"); } // console.log(); id("grid").appendChild(tile); } // Grid will be displayed if setting // the display to none id("togglebtn").addEventListener("click", () => { if (count % 2 == 0) { id("grid").style.display = "none"; count++; } else { id("grid").style.display = "flex"; count++; } }); }; |
Output:
Displaying the Grid without using CSS grid property
