Блог

Я новичок в CSS grid и очень старался, но безуспешно, я создаю формат для печати на бумаге формата А4 и установил фиксированные размеры для столбцов. Содержимое столбца «ЕДИНИЦА ИЗМЕРЕНИЯ» в первой строке (исключая строку заголовка) распространяется на следующий столбец всякий раз, когда введенное ЗНАЧЕНИЕ превышает ширину / границу. Я хочу, чтобы ЗНАЧЕНИЕ (т.е. «UnitName12345678») не пересекало границу, а перемещалось на следующую строку в том же столбце. Также в minmax(50px , max-content) 50px применяется только к строке ЗАГОЛОВКА и чего мне не хватает, чтобы применить это ко всем строкам.

В этом контейнере будет динамически генерироваться несколько строк.

Представить вывод:

Ожидаемый результат:

Ручка кода :https://codepen.io/thaslim123/pen/gyQwmm

 body {
  margin: 0px;
}

.printcontainertable {
  display: inline-grid;
  grid-template-rows: minmax(50px, max-content);
  grid-template-columns: 100px 500px 100px 100px 100px 100px;
  width: 1150px;
  padding: 10px;
}

.printcontainertable div {
  border: 1px solid black;
  text-align: center;
}  

 <div class="printcontainertable">

  <div> SL.No</div>
  <div> Product name</div>
  <div> Unit</div>
  <div> Qty</div>
  <div> Price</div>
  <div> total</div>


  <div> 1. </div>
  <div> Apple </div>
  <div>UnitName12345678</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
  <div> 2. </div>
  <div> Orange </div>
  <div>UnitName</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>

</div>  

PS: Поскольку у меня будет фиксированный контейнер верхнего и нижнего колонтитулов сверху и снизу вышеупомянутого контейнера (т. е. .printcontainertable ), как я могу исправить статическую высоту для того же. Пожалуйста, предложите мне, есть ли какой-либо другой лучший способ реализовать это в GRID.

Хорошо, я действительно думаю, что есть некоторые другие вещи, которые можно улучшить, в зависимости от того, что именно вам нужно (семантика, структура и т.д.). Основная проблема, касающаяся слова, выходящего за границы, Может быть исправлена путем применения word-break: break-word к элементу, содержащему текст.

 body {
  margin: 0px;
}

.printcontainertable {
  display: inline-grid;
  grid-template-rows: minmax(50px, max-content);
  grid-template-columns: 100px 500px 100px 100px 100px 100px;
  width: 1150px;
  padding: 10px;
}

.printcontainertable div {
  border: 1px solid black;
  text-align: center;
}

.unitname {
  word-break: break-word;
}  

 <div class="printcontainertable">

  <div> SL.No</div>
  <div> Product name</div>
  <div> Unit</div>
  <div> Qty</div>
  <div> Price</div>
  <div> total</div>


  <div> 1. </div>
  <div> Apple </div>
  <div class="unitname">UnitName12345678</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
  <div> 2. </div>
  <div> Orange </div>
  <div>UnitName</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>

</div>  

Я хочу, чтобы ЗНАЧЕНИЕ (т.е. «UnitName12345678») не пересекало границу, а перемещалось на следующую строку в том же столбце.

Затем разрешите непрерывной строке текста разбиваться на несколько строк. Используйте overflow-wrap свойство.

Добавьте это в свой код:

 .printcontainertable div {
    overflow-wrap: break-word;
}
  

Также в minmax(50px , max-content) 50px применяется только к строке ЗАГОЛОВКА, и чего мне не хватает, так это применить это ко всем строкам.

Вы используете grid-template-rows . Это создает явные строки, то есть строки, которые вы определяете.

Итак, когда вы говорите это:

 grid-template-rows: minmax(50px , max-content);
  

…вы определяете только одну строку с этим правилом.

Вам нужно использовать grid-auto-rows , который применяется к неявным строкам, что и требуется, когда строки генерируются динамически.

Внесите эту корректировку в свой код:

 .printcontainertable {
    display: inline-grid;
    /* grid-template-rows:   minmax(50px , max-content); */
    grid-auto-rows:   minmax(50px , max-content); /* new */
    grid-template-columns: 100px 500px 100px  100px 100px 100px;
    width:1150px;
    padding:10px;
}
  

 .printcontainertable {
  display: inline-grid;
  /* grid-template-rows:   minmax(50px , max-content); */
  grid-auto-rows: minmax(50px, max-content); /* new */
  grid-template-columns: 100px 500px 100px 100px 100px 100px;
  width: 1150px;
  padding: 10px;
}

.printcontainertable div {
  overflow-wrap: break-word; /* new */
  border: 1px solid black;
  text-align: center;
}

body {
  margin: 0px;
}  

 <div class="printcontainertable">
  <div> SL.No</div>
  <div> Product name</div>
  <div> Unit</div>
  <div> Qty</div>
  <div> Price</div>
  <div> total</div>
  <div> 1. </div>
  <div> Apple </div>
  <div>UnitName12345678</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
  <div> 2. </div>
  <div> Orange </div>
  <div>UnitName</div>
  <div>10</div>
  <div> 100.00 </div>
  <div> 1000.00 </div>
</div>