如何在不调用 CSS Grid 属性的情况下制作网格？

在本文中，我们将了解如何在不调用 CSS Grid 属性的情况下制作网格，并通过示例了解其实现。了解 CSS 网格属性是如何工作的很重要，但是如果我们不使用 CSS 网格属性来制作网格会怎样。这是面试官问的一般性问题，可以让你更好地理解如何在不使用特定或专用方法或属性的情况下自定义设计或其他方式进行设计。在这里，我们将首先创建一个 HTML 文件，其中包含一个用于网格的 div 容器，第二个我们创建一个按钮，它是一个切换按钮。下面是具有基本结构的 HTML 代码。

HTML 代码：

HTML

  

    
        Grid structure without 
        using CSS Grid Property
    
    
    

  

    Welcome To GFG
    
    
        Toggle
    

  

CSS 代码：在 CSS 中，首先，我们使用有助于设计网格结构的基本 CSS 属性设置网格和按钮的样式。我们将 display 设置为 flex，这将设置灵活项目的灵活长度，同时定义其他 CSS 属性，即 margin-top、align-content、width、height 等。为了创建 9*9 网格的 tile，我们将创建 60*60px 的图块，然后我们给出左右边框。
下面的方法，我们做到了

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

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

我们将根据上面的概念来创建网格容器的大小。确保每个元素都位于图块的中心。为此，我们设置了边距，使其不会分离和混乱。我们添加了带有 box-shadow 属性的切换 btn 并为按钮添加了颜色，以便在悬停时它会发光，并创建一个隐藏类来通过将显示设置为无来隐藏按钮。

练习.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 隐藏类，如果计数是奇数，则点击添加隐藏类。

练习.js

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++;
        }
    });
};

输出：

在不使用 CSS 网格属性的情况下显示网格