En este artículo, veremos cómo hacer una cuadrícula sin llamar a la propiedad CSS Grid, además de comprender su implementación a través de los ejemplos. Es esencial comprender cómo funciona la propiedad de cuadrícula CSS, pero ¿qué pasa si no usamos la propiedad de cuadrícula CSS para hacer una cuadrícula? Esta es la pregunta genérica hecha por el entrevistador, que puede brindarle una mejor comprensión de cómo personalizar el diseño u otras formas de diseñar sin usar el método o la propiedad específicos o dedicados. Aquí, primero crearemos un archivo HTML que contiene un contenedor div para la cuadrícula, y el segundo creamos un botón que es un botón de alternar. El siguiente es el código HTML con la estructura básica.
Código 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>
Código CSS: en CSS, primero, diseñamos la cuadrícula y el botón con las propiedades básicas de CSS que ayudarán a diseñar la estructura de la cuadrícula. Configuraremos la pantalla como flexible que establecerá la longitud flexible en elementos flexibles, junto con la definición de otras propiedades CSS, es decir, margen superior, contenido alineado, ancho, alto, etc. Para crear el mosaico de la cuadrícula 9 * 9, creará el mosaico de 60 * 60px y luego le dimos el borde izquierdo y derecho.
El siguiente método, lo hicimos
breadth of grid container = width of tile * 9 + border-width * 2
Nota: En la fórmula anterior, la propiedad border-width define el ancho del borde.
Usaremos el concepto anterior para crear el tamaño del contenedor de cuadrícula de acuerdo con él. Asegúrese de que cada elemento esté en el centro del azulejo. Para ello, hemos fijado el margen para que no se separe y se ensucie. Hemos agregado alternar btn con la propiedad box-shadow y hemos agregado color al botón para que cuando se desplace, brille y también cree una clase de ocultación para ocultar el botón configurando la visualización como ninguno.
practice.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;
}
Código JS: en JavaScript, creamos una función de identificación que devuelve la identificación del elemento que se pasará. En las cargas de ventana, ejecutaremos el ciclo for y también crearemos elementos usando el método document.createElement() que se usará para crear el elemento HTML. Le dará a cada mosaico que creamos en el bucle una identificación de idcount y luego aumentará el contador en 1 para que genere los diferentes valores. Ahora, agregue el borde derecho e izquierdo en ciertos puntos calculando su ancho. Agregar si y si no condición que agregará una función de botón de alternar. Si el conteo de clics es par, entonces eliminamos la clase oculta de CSS y si el conteo es impar, al hacer clic se agrega la clase oculta.
practice.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++;
}
});
};
Producción:
Mostrar la cuadrícula sin usar la propiedad de cuadrícula CSS
Publicación traducida automáticamente
Artículo escrito por vasuvijayvargiya240 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA