Prevent content from expanding or overflowing column

Question

I am new to CSS grid and tried hard but no luck, I am creating a printable format for A4 paper,and have setup fixed sizes for the columns. The content of the column "UNIT" in the first row (excluding Header row) is spanned/expanded to the next column whenever VALUE entered exceeds the width/border. I want the VALUE (i.e "UnitName12345678") not to cross the border but move to the next line in the same column. Also in minmax(50px , max-content) 50px is applied to only the HEADER row and what I am missing in to apply that to all the rows.

This Container will be having multiple rows generated dynamically.

Present output:

Expected output:

Code Pen : 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: As I will be having fixed HEADER and FOOTER container on top and bottom of the above container (i.e .printcontainertable), How can I fix a static Height for the same. Kindly Suggest me if any other better way to implement it in GRID.

Answer 1

Alright, I do think there are some other things that can be improved depeniding on exactly what you need (semantics, structure, etc.) the main issue regarding the word that exceeds the border can be fixed by applying word-break: break-word to the item that contains the text.

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>

Answer 2

I want the VALUE (i.e "UnitName12345678") not to cross the border but move to the next line in the same column.

Then allow the unbroken line of text to break into multiple lines. Use the overflow-wrap property.

Add this to your code:

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

---

Also in minmax(50px , max-content), 50px is applied to only the HEADER row and what I am missing is to apply that to all the rows.

You're using grid-template-rows. This creates explicit rows, meaning rows that you define.

So when you say this:

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

...you're defining only one row with that rule.

You need to use grid-auto-rows, which applies to implicit rows, which is what you need when rows are generated dynamically.

Make this adjustment to your code:

.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>