How to make a grid without calling CSS Grid property ?
Last Updated :
10 Apr, 2023
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
Similar Reads
How to center a <div> using CSS grid Property ?
In this article, we will learn to center an HTML <div> element using the CSS grid property. We can center any element using the below-mentioned approaches. Here we will learn to center a div in 5 different ways. Table of Content Centering div - CSS Grid and place-selfCentering div - CSS Grid a
5 min read
How to make a div span two rows in a grid using CSS ?
The main goal is to arrange five elements in a row where one larger element is positioned in the middle and spans across multiple rows. We can achieve this using two approaches: CSS Flexbox and CSS Grid.Approach 1: Using CSS FlexboxThe first approach uses CSS Flexbox, where the flex-direction: colum
2 min read
How to Create a Masonry grid with flexbox in CSS?
Masonry Grid in CSS is a layout technique that arranges items in a way that resembles a masonry wall, where items of varying heights are placed in columns, filling in gaps and creating a staggered appearance. This can be done using Flexbox by allowing items to wrap and adjusting their heights to cre
3 min read
How to Create a 4-Column Layout Grid with CSS?
We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a c
3 min read
How to Create a 3-Column Layout Grid with CSS?
Grid in CSS is a powerful layout system that allows you to create complex, responsive designs with ease. By defining rows and columns, you can position elements precisely within a grid container. Using grid properties like grid-template-columns, you can create flexible and adaptive layouts, such as
3 min read
How to Create a 2-Column Layout Grid with CSS?
Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or
4 min read
How to Create a Responsive Image Grid using CSS?
A responsive image grid is a layout technique used to display images in a grid-like structure that adjusts dynamically based on the screen size to ensure that the grid looks good and functions well across various devices and screen resolutions. Below are the approaches to creat a responsive image gr
3 min read
How To Use Grid-Row-Align And Grid-Column-Align?
The grid-row-align and grid-column-align properties don't exist in CSS. Instead, CSS Grid uses properties like "align-items" and "justify-items" for controlling alignment across rows and columns, allowing precise positioning of grid items within their cells. so we will go to see how can we align the
3 min read
Holy Grail Layout with CSS Grid
The Holy Grail layout is a widely used web layout that consists of a header, footer, left sidebar, right sidebar, and main content area. This layout is expected to be responsive and adapt to different screen sizes. Despite the varying content lengths, the layout should maintain its structure and ens
2 min read
CSS grid-row-gap Property
The grid-row-gap property in CSS is used to define the size of the gap between the grid elements. The user can specify the width of the gap separating the rows by providing a value to the grid-row-gap. Syntax:grid-row-gap: length | percentage | global-values;Property Values:length: The user can set
3 min read