InicioCurso de Frontend Developer
Curso de Frontend Developer
1

Dynamic responsive design

Adrian
adrian-rama
118

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;
}
  1. La clase container es seteada como grid container con display: grid.
  2. 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.
  3. grid-gap agrega una separación de 20-pixel gap entre los grid items para una mejor visualización de la separación.
  4. La clase item representan los items individuales (en este caso los divs) dentro del container.
0
hace 8 meses
Escribe tu comentario
+ 2

Entradas relacionadas

1

Cómo hacer un piano sencillo con dos teclas de color rosa usando HTML y CSS

En este tutorial te mostraré cómo crear un piano básico con dos teclas usando solo HTML y CSS. Las teclas serán de color rosa y, cuando haga
carozamb
carozamb
9

Crea un Piano con Botones usando HTML y CSS

Hola! 😄 Acompáñame en este pequeño tutorial a través del cual construiremos el aspecto gráfico de un piano usando botones de HTML y estilos
robledocorrea
robledocorrea
4

Domina la creación de tarjetas HTML y CSS: ¡Conviértete en un maestro de las 🃏 Cards en Frontend! 🚀

En este emocionante tutorial, vamos a sumergirnos en el fascinante mundo de la creación de tarjetas HTML y CSS. Si eres como yo, un apasiona
cpedrozamesa
cpedrozamesa
1

Chat entre amigos

Bueno, para crear una figura de chat con html y CSS primero debes saber de que se tratará el mensaje. Haz un borrador de lo que el mensaj
malexandrecrespo
malexandrecrespo