When I apply justify-self and align-self rules, it successfully centers items vertically and horizontally. However, the issue arises when the borders wrap around the text instead of expanding all the way to the edges.
My goal is to have a 1px border around each cell so that they are not doubled up if they are adjacent to another cell.
div.around {
width: 490px;
margin: 0 auto;
}
div.padder {
padding: 125px 24px 30px;
}
div.size-chart {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
border: 1px solid #c4c4c4;
}
.size-chart div {
border: 1px solid #c4c4c4;
}
.double-span-col {
grid-column: auto / span 2;
}
.double-span-row {
grid-row: auto / span 2;
}
.size-chart div span {
font-weight: bold;
}
.theader {
background: #e2e2e2;
}
<div class="around">
<div class="padder">
<h2>Size Guide</h2>
<div class="size-chart">
<div class="double-span-col theader">
<span>US</span>
</div>
<div class="theader">
<span>UK</span>
</div>
<div class="theader">
<span>FRANCE</span>
</div>
<div class="theader">
<span>ITALY</span>
</div>
<div class="theader">
<span>JAPAN</span>
</div>
<div class="theader">
<span>BUST <i>(IN)</i></span>
</div>
<div class="theader">
<span>WAIST <i>(IN)</i></span>
</div>
<div class="theader">
<span>HIP <i>(IN)</i></span>
</div>
<div>XXS</div>
<div>00</div>
<div>2</div>
<div>32</div>
<div>34</div>
<div>N/A</div>
<div>30.5</div>
<div>25.5</div>
<div>34.5</div>
<div class="double-span-row">XS</div>
<div>0</div>
<div>4</div>
<div>34</div>
<div>36</div>
<div>5</div>
<div>31.5</div>
<div>25.5</div>
<div>35.5</div>
<div>2</div>
<div>6</div>
<div>36</div>
<div>38</div>
<div>7</div>
<div>32.5</div>
<div>26.5</div>
<div>36.5</div>
<div class="double-span-row">S</div>
<div>4</div>
<div>8</div>
<div>38</div>
<div>40</div>
<div>9</div>
<div>33.5</div>
<div>27.5</div>
<div>37.5</div>
<div>6</div>
<div>10</div>
<div>40</div>
<div>42</div>
<div>11</div>
<div>34.5</div>
<div>28.5</div>
<div>38.5</div>
<div class="double-span-row">M</div>
<div>8</div>
<div>12</div>
<div>42</div>
<div>44</div>
<div>13</div>
<div>35.5</div>
<div>29.5</div>
<div>39.5</div>
<div>10</div>
<div>14</div>
<div>44</div>
<div>46</div>
<div>15</div>
<div>36.5</div>
<div>30.5</div>
<div>40.5</div>
<div>L</div>
<div>12</div>
<div>16</div>
<div>46</div>
<div>48</div>
<div>17</div>
<div>37.5</div>
<div>31.5</div>
<div>41.5</div>
</div>
</div>
</div>