CSS grid unproperly spaced

Question

I have a grid with three items, and the last two are "spaced upwards" for some reason.

.item {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "name edit remove"
}

.item-name {
  grid-area: name;
}

.item-edit {
  grid-area: edit;
}

.item-remove {
  grid-area: remove;
}

<div class="item">
  <p class="item-name">1 Arrow</p>
  <a class="item-edit" href="#">Edit</a>
  <a class="item-remove" href="#">Remove</a>
</div>

The "Edit" and "Remove" are spaced upwards instead of on the same line as the "1 Arrow".

That's because you have a paragraph which comes with a default margin. Remove it and they line up — j08691, Oct 17 '19 at 13:18

jsadev.net · Accepted Answer · 2019-10-17T13:30:14.410

As @j08691 already said its because of your <p>-element which comes with a default margin.

You could easily 'fix' it by adding margin: 0; to your class .item-name like i did below. Or you could put your links into a paragraph, too. Like <p class="item-edit"><a href="#">Edit</a></p>

.item {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "name edit remove"
}

.item-name {
  grid-area: name;
  margin: 0;
}

.item-edit {
  grid-area: edit;
}

.item-remove {
  grid-area: remove;
}

<div class="item">
  <p class="item-name">1 Arrow</p>
  <a class="item-edit" href="#">Edit</a>
  <a class="item-remove" href="#">Remove</a>
</div>

score 0 · Answer 2 · answered Oct 17 '19 at 13:23

you can use align-items: center;

.item {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "name edit remove";
  align-items: center;
}

.item * {border: solid 1px orange; } /* added only for demonstration purpose*/

.item-name {
  grid-area: name;
}

.item-edit {
  grid-area: edit;
}

.item-remove {
  grid-area: remove;
}

<div class="item">
  <p class="item-name">1 Arrow</p>
  <a class="item-edit" href="#">Edit</a>
  <a class="item-remove" href="#">Remove</a>
</div>

if you don't use it (like what you had) with the orange border it looks like so:

.item {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "name edit remove";
}

.item * {border: solid 1px orange; } /* added only for demonstration purpose*/

.item-name {
  grid-area: name;
}

.item-edit {
  grid-area: edit;
}

.item-remove {
  grid-area: remove;
}

<div class="item">
  <p class="item-name">1 Arrow</p>
  <a class="item-edit" href="#">Edit</a>
  <a class="item-remove" href="#">Remove</a>
</div>

score 0 · Answer 3 · answered Oct 17 '19 at 13:24

.item {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "name edit remove"
}

.item-name {
  grid-area: name;
}

.item-edit {
  grid-area: edit;
}

.item-remove {
  grid-area: remove;
}

<div class="item">
  <label class="item-name">1 Arrow</label>
  <a class="item-edit" href="#">Edit</a>
  <a class="item-remove" href="#">Remove</a>
</div>

Try label tag

CSS grid unproperly spaced

3 Answers3