Styjun

What is the pKaH of pyrrole?

Why are there so many binary systems?

the mystery of the digitally disadvantaged ancestors

Should I tell an editor that I believe an article I'm reviewing is not good enough for the journal?

Can the treble clef be used instead of the bass clef in piano music?

Did Ohio pass a law granting students the right to give scientifically wrong answers consistent with their religious beliefs?

What is the name of this landform?

Can the Protection fighting style be used in this way?

Is it a mistake to use a password that has previously been used (by anyone ever)?

Is it possible to unwrap genus-0 mesh so each vert has one and only unique uv?

Isn't any conversation with the US president quid-pro-quo?

Beginner Tactics - Why Isn't This Mate?

Has Donald Duck ever had any love interest besides Daisy?

Does toddler keep hands around private parts?

Search Console unable to access website after DNS change

ASCII texturing

Locked folder with obscure app from Sourceforge, now cannot unlock folder

Does a Lich need spell books to relearn all spells after rejuvenating?

Why does rapeseed oil turn sticky but coconut oil doesn't?

Why are rain clouds darker?

"Startup" working hours - is it normal to be asked to work 11 hours/ day?

What are the minimum element requirements for a star?

What other tricks were there to get more data onto floppy disks?

Can the fact that Trump issued a Do Not Testify be used in impeachment articles?

grid item span won't span more than 1 column

CSS multi-column layout of list items doesn't align properly in ChromeGridView Lines Not Showing up in IEhow does grid system compensate for variation in column heights?Remove space between 2 tables HTML CSS and image removes background imageStyling columns of the same class within the same row in Bootstrap 3 GridsCSS border-style being reset to “none”CSS Grid Layout - Make an item span as many column as neededIs it possible to create vertical text that spans all rows in a CSS Grid?CSS3 grid items won't stretch vertically/in column. How to let the items span automatically?Elements within flex container are “formatting” according to css grid layout

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;

3

The orange box won't span more than one column no matter what I set the "grid-column" to be.

Why is that?

I have tried the following: combinations: (It's the .hr-3 item)

grid-column: 6 / span 9;
grid-column: 6 / 9;
grid-column: 2 / 7;
grid-column: 2 / span 9;

I triple checked that I am targeting the right item.

Nothing seems to work..

@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; // <------- DOESN'T WORK?
 grid-row: 6/8;
 border: 25px solid orange;

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

css css-grid

share|improve this question

edited Mar 28 at 23:00

xing Zì

asked Mar 28 at 22:09

xing Zìxing Zì

15377 bronze badges

add a comment
 | 

3

The orange box won't span more than one column no matter what I set the "grid-column" to be.

Why is that?

I have tried the following: combinations: (It's the .hr-3 item)

grid-column: 6 / span 9;
grid-column: 6 / 9;
grid-column: 2 / 7;
grid-column: 2 / span 9;

I triple checked that I am targeting the right item.

Nothing seems to work..

@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; // <------- DOESN'T WORK?
 grid-row: 6/8;
 border: 25px solid orange;

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

css css-grid

share|improve this question

edited Mar 28 at 23:00

xing Zì

asked Mar 28 at 22:09

xing Zìxing Zì

15377 bronze badges

add a comment
 | 

The orange box won't span more than one column no matter what I set the "grid-column" to be.

Why is that?

I have tried the following: combinations: (It's the .hr-3 item)

grid-column: 6 / span 9;
grid-column: 6 / 9;
grid-column: 2 / 7;
grid-column: 2 / span 9;

I triple checked that I am targeting the right item.

Nothing seems to work..

@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; // <------- DOESN'T WORK?
 grid-row: 6/8;
 border: 25px solid orange;

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

css css-grid

share|improve this question

edited Mar 28 at 23:00

xing Zì

asked Mar 28 at 22:09

xing Zìxing Zì

15377 bronze badges

@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; // <------- DOESN'T WORK?
 grid-row: 6/8;
 border: 25px solid orange;

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

@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; // <------- DOESN'T WORK?
 grid-row: 6/8;
 border: 25px solid orange;

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

@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; // <------- DOESN'T WORK?
 grid-row: 6/8;
 border: 25px solid orange;

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

share|improve this question

edited Mar 28 at 23:00

xing Zì

asked Mar 28 at 22:09

xing Zìxing Zì

15377 bronze badges

share|improve this question

edited Mar 28 at 23:00

xing Zì

asked Mar 28 at 22:09

xing Zìxing Zì

15377 bronze badges

asked Mar 28 at 22:09

xing Zìxing Zì

15377 bronze badges

asked Mar 28 at 22:09

xing Zìxing Zì

15377 bronze badges

1 Answer
1

active

oldest

votes

3

hr has a default margin set that is creating the issue. Make them equal to 0.

The default margin is set to auto so it's aligning your item (an empty one) inside the track which make you think your element isn't spaning the needed columns. What you will see in all the case is the 50px border you made (left+right)

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

Here is what you can see using the dev tools and by keeping the default margin:

You can see that the element is taking 9 column and 2 rows and the margin is centering everything inside.

share|improve this answer

edited Mar 28 at 22:27

answered Mar 28 at 22:16

Temani AfifTemani Afif

110k1313 gold badges7676 silver badges126126 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's though being a newbie, how am I supposed to know that or figure that out by myself?
  
  – xing Zì
  Mar 28 at 22:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @xingZì by asking and someone else who already faced this you will tell you and now you know it ;) ... but you can inspect the element to see the default style which isn't trivial because you also have to know that margin is causing the alignment of an empty element
  
  – Temani Afif
  Mar 28 at 22:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  For some reason, Firefox doesn't show the default hr styling gyazo.com/f099639576400d2411e195d2794fae0d (left is chrome, right is firefox). Weird ..
  
  – xing Zì
  Mar 28 at 22:34
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @xingZì check this : briangrinstead.com/blog/…
  
  – Temani Afif
  Mar 28 at 22:40
  

  
  
  
  

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55407617%2fgrid-item-span-wont-span-more-than-1-column%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

3

hr has a default margin set that is creating the issue. Make them equal to 0.

The default margin is set to auto so it's aligning your item (an empty one) inside the track which make you think your element isn't spaning the needed columns. What you will see in all the case is the 50px border you made (left+right)

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

Here is what you can see using the dev tools and by keeping the default margin:

You can see that the element is taking 9 column and 2 rows and the margin is centering everything inside.

share|improve this answer

edited Mar 28 at 22:27

answered Mar 28 at 22:16

Temani AfifTemani Afif

110k1313 gold badges7676 silver badges126126 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's though being a newbie, how am I supposed to know that or figure that out by myself?
  
  – xing Zì
  Mar 28 at 22:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @xingZì by asking and someone else who already faced this you will tell you and now you know it ;) ... but you can inspect the element to see the default style which isn't trivial because you also have to know that margin is causing the alignment of an empty element
  
  – Temani Afif
  Mar 28 at 22:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  For some reason, Firefox doesn't show the default hr styling gyazo.com/f099639576400d2411e195d2794fae0d (left is chrome, right is firefox). Weird ..
  
  – xing Zì
  Mar 28 at 22:34
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @xingZì check this : briangrinstead.com/blog/…
  
  – Temani Afif
  Mar 28 at 22:40
  

  
  
  
  

add a comment
 | 

3

hr has a default margin set that is creating the issue. Make them equal to 0.

The default margin is set to auto so it's aligning your item (an empty one) inside the track which make you think your element isn't spaning the needed columns. What you will see in all the case is the 50px border you made (left+right)

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

Here is what you can see using the dev tools and by keeping the default margin:

You can see that the element is taking 9 column and 2 rows and the margin is centering everything inside.

share|improve this answer

edited Mar 28 at 22:27

answered Mar 28 at 22:16

Temani AfifTemani Afif

110k1313 gold badges7676 silver badges126126 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's though being a newbie, how am I supposed to know that or figure that out by myself?
  
  – xing Zì
  Mar 28 at 22:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @xingZì by asking and someone else who already faced this you will tell you and now you know it ;) ... but you can inspect the element to see the default style which isn't trivial because you also have to know that margin is causing the alignment of an empty element
  
  – Temani Afif
  Mar 28 at 22:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  For some reason, Firefox doesn't show the default hr styling gyazo.com/f099639576400d2411e195d2794fae0d (left is chrome, right is firefox). Weird ..
  
  – xing Zì
  Mar 28 at 22:34
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @xingZì check this : briangrinstead.com/blog/…
  
  – Temani Afif
  Mar 28 at 22:40
  

  
  
  
  

add a comment
 | 

hr has a default margin set that is creating the issue. Make them equal to 0.

The default margin is set to auto so it's aligning your item (an empty one) inside the track which make you think your element isn't spaning the needed columns. What you will see in all the case is the 50px border you made (left+right)

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

Here is what you can see using the dev tools and by keeping the default margin:

You can see that the element is taking 9 column and 2 rows and the margin is centering everything inside.

share|improve this answer

edited Mar 28 at 22:27

answered Mar 28 at 22:16

Temani AfifTemani Afif

110k1313 gold badges7676 silver badges126126 bronze badges

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

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

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

share|improve this answer

edited Mar 28 at 22:27

answered Mar 28 at 22:16

Temani AfifTemani Afif

110k1313 gold badges7676 silver badges126126 bronze badges

answered Mar 28 at 22:16

Temani AfifTemani Afif

110k1313 gold badges7676 silver badges126126 bronze badges

answered Mar 28 at 22:16

Temani AfifTemani Afif

110k1313 gold badges7676 silver badges126126 bronze badges