When I try to add justify-self and align-self rules it does center items vertically and horizontally, but problem is when I do so borders wrap around the text instead of expanding all the way to edges.
I'd like to have 1px border around each cell, so they are not doubled 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>
