Columna automática de cuadrícula CSS con div adicional en cada columna

Resuelto Sathish Kumar asked hace 10 meses • 2 respuestas

¿Cómo agrego una columna adicional de ancho fijo en la plantilla de columnas de la cuadrícula? Digamos que tengo 12 columnas en un contenedor con ancho automático y quería agregar 12 columnas más en el medio con ancho fijo.

Esto es lo que intenté pero no pude descubrir cómo hacer que la columna adicional tenga un ancho fijo y las columnas restantes tengan un ancho automático en el mismo contenedor y no se ajusten.

.grid {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
}

.grid .col {
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  width: 100%;
  flex: 1;
}

.additional-div {
  background-color: rgba(0, 0, 0, 0.1);
  width: 24px;
}
<div class="grid">
  <div class="additional-div"></div>
  <div class="col">1</div>
  <div class="additional-div"></div>
  <div class="col">2</div>
  <div class="additional-div"></div>
  <div class="col">3</div>
  <div class="additional-div"></div>
  <div class="col">4</div>
  <div class="additional-div"></div>
  <div class="col">5</div>
  <div class="additional-div"></div>
  <div class="col">6</div>
  <div class="additional-div"></div>
  <div class="col">7</div>
  <div class="additional-div"></div>
  <div class="col">8</div>
  <div class="additional-div"></div>
  <div class="col">9</div>
  <div class="additional-div"></div>
  <div class="col">10</div>
  <div class="additional-div"></div>
  <div class="col">11</div>
  <div class="additional-div"></div>
  <div class="col">12</div>
  <div class="additional-div"></div>
</div>
Expandir fragmento

Sathish Kumar avatar Feb 16 '24 09:02 Sathish Kumar
Aceptado

Esto es lo que quizás quieras:

.grid {
  display: grid;
  grid-template-columns: repeat(12, min-content 1fr) min-content;
}

.grid .col {
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
}

.additional-div {
  background-color: rgba(0, 0, 0, 0.1);
  width: 24px;
}
<div class="grid">
  <div class="additional-div"></div>
  <div class="col">1</div>
  <div class="additional-div"></div>
  <div class="col">2</div>
  <div class="additional-div"></div>
  <div class="col">3</div>
  <div class="additional-div"></div>
  <div class="col">4</div>
  <div class="additional-div"></div>
  <div class="col">5</div>
  <div class="additional-div"></div>
  <div class="col">6</div>
  <div class="additional-div"></div>
  <div class="col">7</div>
  <div class="additional-div"></div>
  <div class="col">8</div>
  <div class="additional-div"></div>
  <div class="col">9</div>
  <div class="additional-div"></div>
  <div class="col">10</div>
  <div class="additional-div"></div>
  <div class="col">11</div>
  <div class="additional-div"></div>
  <div class="col">12</div>
  <div class="additional-div"></div>
</div>
Expandir fragmento

También sería más sencillo usar flexbox para lograr el mismo diseño:

Mostrar fragmento de código

Hao Wu avatar Feb 16 '2024 03:02 Hao Wu