hr имеет установленный запас по умолчанию, который создает проблему.Сделайте их равными 0.
По умолчанию установлено значение auto, поэтому он выравнивает ваш элемент (пустой) внутри дорожки, что заставляет вас думать, что ваш элемент не охватывает нужные столбцы.Во всех случаях вы увидите 50px рамку, которую вы сделали (влево + вправо)
@import url('https://fonts.googleapis.com/css?family=Montserrat|Teko');
html, body {
background: transparent;
width: 100%;
height: 100%;
}
#a {
margin: 50px 0 0 50px;
width: 70%;
height: 70%;
background: rgb(250,250,250);
display: grid;
grid-template-columns: auto auto 1px auto repeat(6, 2fr);
grid-template-rows: auto repeat(9,1fr);
//transform: rotate(-45deg);
grid-gap: 5px;
}
.item {
//background: rgba(100,100,0,0.02);
font-family: 'Montserrat', sans-serif;
}
.item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.item-2 {
grid-column: 2 / 3;
grid-row: 1 / span 3;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
padding-top: 3px;
}
.item-3 {
grid-column: 4 / 5;
grid-row: 1 / span 3;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
padding-top: 3px;
}
.item-4 {
grid-column: 5 / 6;
grid-row: 1 / 1;
}
.hr-1 {
grid-column: 3 / 4;
grid-row: 2 / span 3;
background: rgba(0,0,0,0.9);
}
.hr-2 {
grid-column: 6 / 7;
grid-row: 1 / span 8;
border-left: 25px solid red;
}
.hr-3 {
grid-column: 6 / span 9;
grid-row: 6/8;
border: 5px solid orange;
}
hr {
margin:0;
}
<div id="a">
<div class="item item-1"><b>John</b></div>
<div class="item item-2"><b>A</b>lexander</div>
<hr class="hr-1"/>
<div class="item item-3"><b>B</b>lue</div>
<div class="item item-4"><b>Peterson</b></div>
<div class="item item-5"></div>
<hr class="hr-2"/>
<hr class="hr-3"/>
<hr class="hr-4"/>
</div>
Вот что вы можете увидеть, используя инструменты разработчика и сохранив поле по умолчанию:
Вы можете видеть, что элемент занимает столбец 9 и строки 2, а поле центрирует все внутри.