HTML 如何在不调用CSS Grid属性的情况下创建网格

在本文中，我们将看到如何在不调用CSS Grid属性的情况下创建网格，并通过示例了解其实现。了解CSS网格属性的工作原理是非常重要的，但是如果我们不使用CSS网格属性来创建网格呢？这是面试官常问的通用问题，它可以帮助你更好地理解如何自定义设计或其他设计方法而不使用特定的方法或属性。在这里，我们首先创建一个包含网格的div容器的HTML文件，然后创建一个切换按钮。以下是具有基本结构的HTML代码。

HTML代码：

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代码： 在CSS中，首先，我们使用基本的CSS属性来设置网格和按钮的样式，以便设计网格结构。我们将display属性设置为flex，这将在可伸缩项目上设置可伸缩的长度，并定义其他CSS属性，如margin-top、align-content、width、height等。为了创建99网格的方块，我们将创建6060px的方块，然后给予左右边框。我们使用了以下方法：

breadth of grid container = width of tile * 9 + border-width * 2

注意： 在上述公式中， border-width 属性定义了边框的宽度。

我们将使用上述概念根据其来创建网格容器的大小。确保每个元素都位于瓷砖的中心。为此，我们设置了边距，使其不分离和混乱。我们使用了toggle btn，并添加了box-shadow属性和颜色到按钮，以便在悬停时发光，并创建了一个hide类来隐藏按钮，通过将display设置为none。

文件名：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代码： 在JavaScript中，我们创建了一个id函数，它返回将要传递的元素的id。在窗口加载时，我们将运行for循环，并且还将使用document.createElement()方法创建要用于创建HTML元素的元素。它将为我们在循环中创建的每个瓷砖都赋予一个idcount的id，并将计数器增加1，以便为不同的值生成。现在，通过计算其宽度，在某些点上添加右边和左边的边框。添加if和else条件，它将添加一个切换按钮功能。如果点击计数是偶数，则我们将从中删除CSS的隐藏类，并且如果计数是奇数，则将点击添加隐藏类。

文件名：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++; 
        } 
    }); 
};

输出结果：

HTML 如何在不调用CSS Grid属性的情况下创建网格