How to add space between words in a list in HTML-CodePudding

image of the list item

I am a noob trying to code using HTML/CSS as shown in the image above. How can I add consistent space between words of different sizes to add the page number using CSS? I tried implementing the same using a grid with column spacing of 90-10%.

.prodFlex {
  display: grid;
  grid-template-columns: 90% 10%;
  column-gap: 10px;
}

<div >
  <div>
    <span >1 Cleaning</span><br>
    <span >2 Diary, Deli and Egg </span><br>
    <span >3 Health and Beauty</span><br>
    <span >4 Chicken</span><br>
    <span >5 Groceries</span><br>
    <span >6 Paper and Disposables</span><br>
    <span >7 Bakes and Nuts</span><br>
    <span >8 Drinks</span><br>
    <span >9 Sweets and Icecreams</span><br>
    <span >10 Gifts and toys</span><br>
    <span >11 Fruits</span><br>
    <span >12 Fish</span><br>
    <span >13 Accessories</span><br>
    <span >14 Meat</span> <br>
    <span >15 Baby Diapers</span><br>
    <span >16 Baby Needs</span><br>
    <span >17 Baby Needs</span><br>
    <span >18 Tea & Coffee</span><br>
    <span >19 Rice</span><br>
    <span >20 Frozen Foods</span><br>
    <span >21 Milk</span>
  </div>
  <div >
    <span >72</span><br>
    <span >49</span><br>
    <span >47</span><br>
    <span >46</span><br>
    <span >35</span><br>
    <span >34</span><br>
    <span >18</span><br>
    <span >15</span><br>
    <span >14</span><br>
    <span >13</span><br>
    <span >09</span><br>
    <span >09</span><br>
    <span >09</span><br>
    <span >09</span><br>
    <span >07</span><br>
    <span >06</span><br>
    <span >34</span><br>
    <span >18</span><br>
    <span >15</span><br>
    <span >14</span><br>
    <span >02</span>
  </div>
</div>

But the senior developer in our team had mentioned to print the page number in the same div as that of product items because while programming using php it would be a mess to use two loops to print product and product item as seperate.

CodePudding user response：

Use the proper CSS grid definitions for grid-auto-flow: row dense; and grid-template-rows: repeat(auto-fill, 1fr);, and remove the inner wrappers:

.prodFlex {
  display: grid;
  grid-template-columns: 9fr 1fr;
  grid-template-rows: repeat(auto-fill, 1fr);
  grid-auto-flow: row dense;
  column-gap: 10px;
}

.prodDetails {
  grid-column-start: 1;
}

.tabSpace {
  grid-column-start: 2;
}

<div >
  <span >1 Cleaning</span>
  <span >2 Diary, Deli and Egg </span>
  <span >3 Health and Beauty</span>
  <span >4 Chicken</span>
  <span >5 Groceries</span>
  <span >6 Paper and Disposables</span>
  <span >7 Bakes and Nuts</span>
  <span >8 Drinks</span>
  <span >9 Sweets and Icecreams</span>
  <span >10 Gifts and toys</span>
  <span >11 Fruits</span>
  <span >12 Fish</span>
  <span >13 Accessories</span>
  <span >14 Meat</span>
  <span >15 Baby Diapers</span>
  <span >16 Baby Needs</span>
  <span >17 Baby Needs</span>
  <span >18 Tea & Coffee</span>
  <span >19 Rice</span>
  <span >20 Frozen Foods</span>
  <span >21 Milk</span>

  <span >72</span>
  <span >49</span>
  <span >47</span>
  <span >46</span>
  <span >35</span>
  <span >34</span>
  <span >18</span>
  <span >15</span>
  <span >14</span>
  <span >13</span>
  <span >09</span>
  <span >09</span>
  <span >09</span>
  <span >09</span>
  <span >07</span>
  <span >06</span>
  <span >34</span>
  <span >18</span>
  <span >15</span>
  <span >14</span>
  <span >02</span>
</div>

You can even omit the CSS classes and make it more generation-friendly for your backend colleagues:

.prodFlex {
  display: grid;
  grid-template-columns: 9fr 1fr;
  grid-template-rows: repeat(auto-fill, 1fr);
  grid-auto-flow: row dense;
  column-gap: 10px;
}

.prodFlex span:nth-of-type(odd) {
  grid-column-start: 1;
}

.prodFlex span:nth-of-type(even) {
  grid-column-start: 2;
}

<div >
  <span>1 Cleaning</span>             <span>72</span>
  <span>2 Diary, Deli and Egg </span> <span>49</span>
  <span>3 Health and Beauty</span>    <span>47</span>
  <span>4 Chicken</span>              <span>46</span>
  <span>5 Groceries</span>            <span>35</span>
  <span>6 Paper and Disposables</span><span>34</span>
  <span>7 Bakes and Nuts</span>       <span>18</span>
  <span>8 Drinks</span>               <span>15</span>
  <span>9 Sweets and Icecreams</span> <span>14</span>
  <span>10 Gifts and toys</span>      <span>13</span>
  <span>11 Fruits</span>              <span>09</span>
  <span>12 Fish</span>                <span>09</span>
  <span>13 Accessories</span>         <span>09</span>
  <span>14 Meat</span>                <span>09</span>
  <span>15 Baby Diapers</span>        <span>07</span>
  <span>16 Baby Needs</span>          <span>06</span>
  <span>17 Baby Needs</span>          <span>34</span>
  <span>18 Tea & Coffee</span>        <span>18</span>
  <span>19 Rice</span>                <span>15</span>
  <span>20 Frozen Foods</span>        <span>14</span>
  <span>21 Milk</span>                <span>02</span>
</div>

CodePudding user response：

You can use flex-box as well.

Give prodDetails a width and make it expandable.

Also, use of <br> is a bad practice.

.prodFlex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.prodDetails {
  flex-grow: 1;
  width: 85%;
}

.tabSpace {
  width: 10%;
}

<div >
    <span >1 Cleaning</span>
    <span >72</span>
    
    <span >2 Diary, Deli and Egg </span>
    <span >49</span>

    <span >3 Health and Beauty</span>
    <span >47</span>

    <span >4 Chicken</span>
    <span >46</span>

    <span >5 Groceries</span>
    <span >35</span>
</div>

References:

Is it sometimes bad to use <BR />?

CodePudding user response：

Also an option to position blocks relatively to their parents:

.prodDetails {
 max-width: 400px;
}
.prodDetails > div > span {
  display: block;
  position: relative;
  float: right;
  top: 0;
  right: 0;
}

<div >
    <div>1 Cleaning</div>
    <div>2 Diary, Deli and Egg<span>72</span></div>
    <div>3 Health and Beauty<span>73</span></div>
    <div>4 Chicken<span>74</span></div>
    <div>5 Groceries<span>75</span></div>
    <div>6 Paper and Disposables<span>76</span></div>
    <div>7 Bakes and Nuts<span>77</span></div>
    <div>8 Drinks<span>78</span></div>
    <div>9 Sweets and Icecreams<span>79</span></div>
    <div>10 Gifts and toys<span>80</span></div>
    <div>11 Fruits<span>81</span></div>
    <div>12 Fish<span>82</span></div>
    <div>13 Accessories<span>83</span></div>
    <div>14 Meat<span>84</span></div> 
    <div>15 Baby Diapers<span>85</span></div>
    <div>16 Baby Needs<span>86</span></div>
    <div>17 Baby Needs<span>87</span></div>
    <div>18 Tea & Coffee<span>88</span></div>
    <div>19 Rice<span>89</span></div>
    <div>20 Frozen Foods<span>90</span></div>
    <div>21 Milk<span>91</span></div>
</div>

CodePudding user response：

You can also use display: flex; and justify-content: space-between;

Here is the working code:

.content_row {
  display: flex;
  justify-content: space-between;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div>
    <div >
      <span >1 Cleaning</span>
      <span >72</span>
    </div>
    <div >
      <span >2 Diary, Deli and Egg </span>
      <span >49</span>
    </div>
    <div >
      <span >3 Health and Beauty</span>
      <span >47</span>
    </div>
    <div >
      <span >4 Chicken</span>
      <span >46</span>
    </div>
    <div >
      <span >5 Groceries</span>
      <span >35</span>
    </div>
    <div >
      <span >6 Paper and Disposables</span>
      <span >34</span>
    </div>
    <div >
      <span >7 Bakes and Nuts</span>
      <span >18</span>
    </div>
    <div >
      <span >8 Drinks</span>
      <span >15</span>
    </div>
    <div >
      <span >9 Sweets and Icecreams</span>
      <span >14</span>
    </div>
    <div >
      <span >10 Gifts and toys</span>
      <span >13</span>
    </div>
    <div >
      <span >11 Fruits</span>
      <span >09</span>
    </div>
    <div >
      <span >12 Fish</span>
      <span >09</span>
    </div>
    <div >
      <span >13 Accessories</span>
      <span >09</span>
    </div>
    <div >
      <span >14 Meat</span>
      <span >09</span>
    </div>
    <div >
      <span >15 Baby Diapers</span>
      <span >07</span>
    </div>
    <div >
      <span >16 Baby Needs</span>
      <span >06</span>
    </div>
    <div >
      <span >17 Baby Needs</span>
      <span >34</span>
    </div>
    <div >
      <span >18 Tea & Coffee</span>
      <span >18</span>
    </div>
    <div >
      <span >19 Rice</span>
      <span >15</span>
    </div>
    <div >
      <span >20 Frozen Foods</span>
      <span >14</span>
    </div>
    <div >
      <span >21 Milk</span>
      <span >02</span>
    </div>
  </div>
</div>

CodePudding user response：

That is a problem that <table> solves very easily.

<table> is not recommended for creating layouts, but it was created to display tabular data, which seems to be your case.

You can create a <tr></tr> element with its <td></td> children in every iteration of the loop and either store each in an array, or concatenate them as strings in a single string. Depends on what works best for your case.

.prodflex {
  width: 100%;
}

<table >
  <tr>
    <td >1 Cleaning</td>
    <td>72</td>
  </tr>
  <tr>
    <td >2 Diary, Deli and Egg</td>
    <td>49</td>
  </tr>
  <tr>
    <td >3 Health and Beauty</td>
    <td>47</td>
  </tr>
  <tr>
    <td >4 Chicken</td>
    <td>46</td>
  </tr>
  <tr>
    <td >5 Groceries</td>
    <td>35</td>
  </tr>
  <tr>
    <td >6 Paper and Disposables</td>
    <td>34</td>
  </tr>
  <tr>
    <td >7 Bakes and Nuts</td>
    <td>18</td>
  </tr>
  <tr>
    <td >8 Drinks</td>
    <td>18</td>
  </tr>
  <tr>
    <td >9 Sweets and Icecreams</td>
    <td>15</td>
  </tr>
  <tr>
    <td >10 Gifts and toys</td>
    <td>14</td>
  </tr>
  <tr>
    <td >11 Fruits</td>
    <td>13</td>
  </tr>
</table>