¡Estoy intentando crear varias palabras burbujeantes como botones!

¿Cuál es la mejor manera de abordar el diseño a continuación usando CSS o cualquier biblioteca JS?

ss

Puede haber muchos botones (depende de los datos de la base de datos)

Lo que he intentado:

#tagsContainer {
  float: left;
  width: 25vw;
  margin-top: 10vh;
  overflow: hidden;
}

#tags {
  display: grid;
  justify-content: space-between;
  grid-gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

#tag {
  background-color: #2F3841;
  border-radius: 8px;
  margin-top: 10px;
  width: max-content;
}
<div id="tagsContainer">
  <h3 id="tagsTitle">TOP TAGS</h3>
  <div id="tags">
    <div id="tag">
      <h4 id="tagTitle">Flutter</h4>
    </div>
    <div id="tag">
      <h4 id="tagTitle">Deep Learning</h4>
    </div>
    <div id="tag">
      <h4 id="tagTitle">Machine Learning</h4>
    </div>
  </div>
</div>

El problema es que cuando se usa el diseño de cuadrícula , ¡todas las columnas tienen el mismo tamaño!

0
Pranavan 5 oct. 2021 a las 10:03

2 respuestas

La mejor respuesta

Simplemente use display: inline-block y diseñe su contenedor como desee. PD. tiene la misma identificación varias veces, use la clase en su lugar porque la identificación debe ser única

#tagsContainer {
  /*float: left; REMOVE IT!!!*/
  width: 25vw;
  margin-top: 10vh;
  overflow: hidden;
}

#tags {
  /* NOT NECESSARY
  display: grid;
  justify-content: space-between;
  grid-gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  */
}

.tag {
  background-color: #2F3841;
  border-radius: 8px;
  margin-top: 10px;
  width: max-content;
  display:inline-block;
}
<div id="tagsContainer">
  <h3 id="tagsTitle">TOP TAGS</h3>
  <div id="tags">
    <div class="tag">
      <h4 class="tagTitle">Flutter</h4>
    </div>
    <div class="tag">
      <h4 class="tagTitle">Deep Learning</h4>
    </div>
    <div class="tag">
      <h4 class="tagTitle">Machine Learning</h4>
    </div>
  </div>
</div>
1
Sfili_81 5 oct. 2021 a las 07:12

¿Quieres decir esto?

body {
  background: #202223;
}

#tags {
  font-family: cursive;
  width: 292px;
}

.tag {
  font-family: inherit;
  background: #2b333b;
  font-size: 14px;
  padding: 10px 33px;
  border: none;
  border-radius: 16px;
  color: #d4d4d4;
  font-style: italic;
  display: inline-block;
  width: max-content;
  margin: 4px 4px;
}

.tag:hover {
  opacity: 0.9;
}

.tag:focus {
  outline: 1px solid #6868688f;
  outline-offset: -3px;
}
<div id="tags">
  <button class="tag">Flutter</button>
  <button class="tag">Data Science</button>
  <button class="tag">CSS</button>
  <button class="tag">Deep Learning</button><button class="tag">Machine Learning</button>
</div>
1
ŕ̷͉ge̸ḓ̶̅i̷t 5 oct. 2021 a las 07:39