How to correctly set the last position in a column in a row if grid-column-start: -1; creates an extra (6) column with a minimum width?

It turned out to perform the task via grid-column-start: -2; but how much is it right?

 .wrapper { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 100px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > :nth-child(1) { background: blue; grid-column-start: -1; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } 
 <div class="wrapper"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> <div class="box1">6</div> <div class="box2">7</div> <div class="box3">8</div> <div class="box4">9</div> <div class="box5">10</div> </div>

    1 answer 1

    Better through grid-column-start: 5; :

     .wrapper { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 100px; } * { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper> div:nth-child(1) { background: blue; grid-column-start: 5; } .wrapper>div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } 
     <div class="wrapper"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> <div class="box1">6</div> <div class="box2">7</div> <div class="box3">8</div> <div class="box4">9</div> <div class="box5">10</div> </div>

    If you do not know the exact number of columns?

    Then grid-column-start: -2; as negative bind from the end.

    grid-column-start: -1; will bind to the last line and create an extra column.

    grid-column-start: -2; will bind to the last but one, which corresponds to the beginning of the last column

     .wrapper { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 100px; } * { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper> div:nth-child(1) { background: blue; grid-column-start: -2; } .wrapper>div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } 
     <div class="wrapper"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> <div class="box1">6</div> <div class="box2">7</div> <div class="box3">8</div> <div class="box4">9</div> <div class="box5">10</div> </div>

    • If you do not know the exact number of columns? - Mike_Ro
    • then grid-column-start: -2; - Kniha m