Utiliza grid para insertar divs dinámicamente y removerlos
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<linkrel="stylesheet"href="style.css">
<title>Documenttitle>
head>
<body>
<divclass="container">
<divclass="item"onclick="duplicate(1)"id="item-1">Item 1div>
div>
body>
<script>
let maxId = 1;
functionduplicate(itemNumber) {
const divider = document.createElement("div");
divider.textContent = `Item ${maxId + 1}`;
divider.className = "item";
divider.id = maxId + 1;
divider.onclick = () => {
document.getElementById(maxId).remove();
maxId--;
}
const container = document.getElementsByClassName("container")[0];
container.appendChild(divider);
maxId++;
}
script>
html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.item {
background-color: #3498db;
color: #fff;
padding: 20px;
border-radius: 8px;
text-align: center;
}
- La clase container es seteada como grid container con display: grid.
- grid-template-columns es seteada con repeat(auto-fit, minmax(300px, 1fr)). Esto crea un layout responsivo donde cada columna tiene al menos 300px de largo, pero se expandirá hasta llenar el espacio disponible de pantalla en caso de tenerlo.
- grid-gap agrega una separación de 20-pixel gap entre los grid items para una mejor visualización de la separación.
- La clase item representan los items individuales (en este caso los divs) dentro del container.
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
