Black border box to the right of grid

user_10393863 0
Viewed 70

I have an issue where there seems to be a border box to the right of the grid, with the only way of removing is to increase the margin. Even while specifying the bright border as zero, it still appears. Padding doesn't work either

https://imgur.com/a/CDIZENZ

.grid-container {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  grid-row-gap: 3px;
  background-color: black;
  border: 3px solid black;
  border-left: 0px;
  padding: 0px;
  position: center;
  margin-left: 25%;
  margin-right: 25%;
  border-right: 0px;
}

.grid-container > * {
  background-color: white;
  border-left: 3px solid black;
}

        <div class="grid-container">
            {% block content %}
            <div class="grid-item"></div>
            <div class="grid-item">Kills</div>
            <div class="grid-item">Accuracy</div>  
            <div class="grid-item"><img src="{% static 'RL.png' %}"></div>
            <div class="grid-item">{{ RL_kills }}</div>
            <div class="grid-item">{{ RL_acc }}%</div>  
            <div class="grid-item"><img src="{% static 'LG.png' %}"></div>
            <div class="grid-item">{{ LG_kills }}</div>
            <div class="grid-item">{{ LG_acc }}%</div>
            <div class="grid-item"><img src="{% static 'RG.png' %}"></div>
            <div class="grid-item">{{ RG_kills }}</div>
            <div class="grid-item">{{ RG_acc }}%</div>
            {% endblock content %}
          </div>
grid css html
3 Answers

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 3px;
  background-color: black;
  border: 3px solid black;
  border-left: 0px;
  padding: 0px;
  position: center;
  margin-left: 25%;
  margin-right: 25%;
}

.grid-container>* {
  background-color: white;
  border-left: 3px solid black;
}
<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item">Kills</div>
  <div class="grid-item">Accuracy</div>
  <div class="grid-item"><img src="{% static 'RL.png' %}"></div>
  <div class="grid-item">{{ RL_kills }}</div>
  <div class="grid-item">{{ RL_acc }}%</div>
  <div class="grid-item"><img src="{% static 'LG.png' %}"></div>
  <div class="grid-item">{{ LG_kills }}</div>
  <div class="grid-item">{{ LG_acc }}%</div>
  <div class="grid-item"><img src="{% static 'RG.png' %}"></div>
  <div class="grid-item">{{ RG_kills }}</div>
  <div class="grid-item">{{ RG_acc }}%</div>
</div>

Rather than having a 120px each columns, try grid-template-columns: 1fr 1fr 1fr; or grid-template-columns: repeat(3, 1fr); which gives you equal fractions from the full width of the parents. which leaves no black empty space. Then put back the right border. you need it.

user_43044000

if you want to delete the black space, I think you you can wrap you grid-container in a inline-block container, it removes the black space and make you container fit to your special width.

<div style="display: inline-block">
      <div class="grid-container">
          {% block content %}
          <div class="grid-item"></div>
          .
          .
          .
          <div class="grid-item">{{ RG_acc }}%</div>
          {% endblock content %}
      </div>
   </div>
user_128521110

no dear you doing it wrong, you have to set grid's width. calculate all columns width 120+120+120 + borders width

width: 363px; /* 360px + 3 grid-row-gap */
margin: auto;

set margin to auto if you want box align center, other ways set what you like to be

     
     .grid-container {
display: grid;
    grid-template-columns: 120px 120px 120px;
    grid-row-gap: 3px;
    background-color: black;
    border: 3px solid black;
    border-left: 0px;
    padding: 0px;
    border-right: 0px;
    width: 363px;
    margin: auto;
}

.grid-container > * {
  background-color: white;
  border-left: 3px solid black;
}
   
        <div class="grid-container">
            {% block content %}
            <div class="grid-item"></div>
            <div class="grid-item">Kills</div>
            <div class="grid-item">Accuracy</div>  
            <div class="grid-item"><img src="{% static 'RL.png' %}"></div>
            <div class="grid-item">{{ RL_kills }}</div>
            <div class="grid-item">{{ RL_acc }}%</div>  
            <div class="grid-item"><img src="{% static 'LG.png' %}"></div>
            <div class="grid-item">{{ LG_kills }}</div>
            <div class="grid-item">{{ LG_acc }}%</div>
            <div class="grid-item"><img src="{% static 'RG.png' %}"></div>
            <div class="grid-item">{{ RG_kills }}</div>
            <div class="grid-item">{{ RG_acc }}%</div>
            {% endblock content %}
          </div>

user_31930740
Related