0
301
Views¿Es posible reorganizar los divs dentro de un contenedor según el número de divs dentro?
Soy nuevo en html y css. Me gustaría crear una función que, dado un número k entre 1 y 9, se muestren k divs dentro del contenedor div. Sin embargo, la disposición de los bloques varía según k difiere. Por ejemplo, para k=4, el arreglo será 2x2, mientras que para k=6, el arreglo será 3x2. Todos los arreglos se pueden ver en la imagen de abajo.
¿Hay alguna forma de que pueda ajustar la disposición en función del número de divs? Supongo que debería usar flexbox para css pero de alguna manera no pude encontrar la configuración correcta del contenedor.
2 answers
Answer question0
Aquí hay una solución CSS pura usando display: grid; y la pseudoclase CSS :has() . Usando :has() podemos aplicar estilos a un elemento basado en el conteo de sus hijos:
#container:has(div:nth-child(3)) {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
El estilo anterior se aplicará al elemento con id="container" solo cuando contenga al menos 3 elementos secundarios.
(JavaScript solo se usa para agregar divs al contenedor para demostración)
Fuentes:
Artículo que explica cómo aplicar estilo a los elementos en función del recuento de niños: https://www.matuzo.at/blog/2022/counting-children/
:has() Pseudoclase CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
0
HTML: creación de Input para el valor K con Buttons de envío y reinicio, creación de un contenedor div .wrapper .
CSS: dando a mi contenedor un tamaño de 400x400.
declarando una :root --width:50%; que se utiliza para establecer el ancho de un solo cuadro que se generará a través de JS .
JS: agregando EventListener en el botón de submit . Lo primero que estoy haciendo es obtener el valor de entrada (K).
Poner una condición if para verificar si el usuario ya ha generado algún divs , si lo ha hecho, elimino todo lo que está dentro del envoltorio con innerHTML = ""
colocando otro if para verificar si el número es mayor que 4 y luego haciendo que el tamaño de cada cuadro sea del 33% para cumplir con nuestro requisito de 3x3 cambiando el valor de la variable en :root a --width:33%`.
haciendo un bucle dentro for loop para crear nuestro cuadro. Los cuadros generarán (k)Times .
Con html dentro createBox y agregándolo dentro del wrapper .
Espero que haya entendido. Si tiene alguna pregunta, por favor pregunte.
let wrapper = document.querySelector(".wrapper");
let btn = document.querySelector(".btn");
let resetBtn = document.querySelector(".r-btn");
btn.addEventListener("click", () => {
let input = document.querySelector("#input").value;
if (wrapper.innerHTML !== "") {
wrapper.innerHTML = "";
}
if (input > 4) {
document.querySelector(":root").style.setProperty("--width", "33.3%");
} else {
document.querySelector(":root").style.setProperty("--width", "50%");
}
for (let i = 0; i < input; i++) {
let createBox = `<div class="box">${i + 1}</div>`;
wrapper.innerHTML += createBox;
}
document.querySelector("#input").value = "";
});
resetBtn.addEventListener("click", () => {
wrapper.innerHTML = "";
});
:root{
--width:50%;
}
#input {
width: 100px;
margin-bottom: 10px;
}
.box {
background-color: burlywood;
text-align: center;
width: var(--width);
outline: 1px solid green;
}
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 400px;
outline: 1px solid red;
}
<input min="2" max="9" type="number" placeholder="Enter K Value" id="input" />
<button class="btn">Enter</button>
<button class="r-btn">Reset</button>
<div class="wrapper"></div>