CODEWITHSUNDEEP
htmlcsslayoutcss-grid
ThomasFromUganda
ThomasFromUganda

Reputation: 410

Grid container has extra column after my grid items for no reason

I am new to grids and am basically reverse engineering a doodle calendar right now. I am using a grid container to contain all my items. The problem is that after the last column of grid items, there seems to be an extra column to take up the rest of the screen.

This is what it looks like:

example

I want to be able to remove the extra space on the right so the grid only takes the space of my grid items.

This is my HTML:

<body>
    <div id="grid-container">
        <div class="grid-item"></div>
        <div class="grid-item" id="case_participants"> 0 participants</div>
    </div>
</body>

This is my CSS:

#grid-container {
  display: grid;
  grid-template-columns: 216px repeat(var(--colNum), 72px);
  background-color: white;
  border: 2px solid grey;
  padding: 0px;
}
    
.grid-item {
  background-color: white;
  border: 1px solid grey;
  font-size: 30px;
  text-align: center;
}

The rest of the items are generated with JavaScript.

Upvotes: 4

Views: 1115

Answers (1)

pretzelhammer
pretzelhammer

Reputation: 15135

You have space to the right of your grid because grid are by default block elements which take up 100% width of their parent (the body in this case). Change the container's style to display: inline-grid; to make its width the same size as its content. Example snippet below:

:root {
  --colNum: 4;
}

#grid-container {
  display: inline-grid;
  grid-template-columns: 216px repeat(var(--colNum), 72px);
  background-color: white;
  border: 2px solid grey;
  padding: 0px;
}

.grid-item {
  background-color: white;
  border: 1px solid grey;
  font-size: 20px;
  text-align: center;
  padding: 10px;
}
<div id="grid-container">
  <div class="grid-item">names</div>
  <div class="grid-item">check</div>
  <div class="grid-item">check</div>
  <div class="grid-item">check</div>
  <div class="grid-item">check</div>
</div>

Upvotes: 2

Related Questions