Flexbox y Grid contenedores

Los contenedores proporcionan un contexto lógico para implementar técnicas de diseño más avanzadas como Flexbox y Grid.

by InaWeb

HTML

<div class="contenedor-flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="contenedor-grid">
  <div>Item uno Grid</div>
  <div>Item dos Grid</div>
  <div>Item tres Grid</div>
  <div>Item cuatro Grid</div>
  <div>Item cinco Grid</div>
  <div>Item seis Grid</div>
</div>

CSS

.contenedor-flex {
  display: flex;
  flex-wrap: wrap;
  background-color:pink;
  gap:10px;
}
.contenedor-flex > div {
  width:10px;
  background-color:yellow;
}

.contenedor-grid {
  margin-top:10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  background-color:purple;
}
.contenedor-grid > div {
  width:50px;
  background-color:yellow;
}