How to make a grid without calling CSS Grid property ?
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.
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 formaula, 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.