display a grid
row vs a grid
row

Question

And why is a grid row <p> different then a grid row <div> ???

Sorry if it's something obvious but it just doesn't make any sense to me XD

.container {
  display: grid;
  grid-auto-rows: 20px;
  grid-auto-columns: auto;
  grid-row-gap: 5px;
}

.box {
  display: block;
  border: 1px solid black;
  background-color: lightgreen;
}

<div class="container">
  <p class="box">test</p>
  <div class="box">test</div>
  <div class="box">test</div>
</div>

score 2 · Answer 1 · answered Apr 27 '19 at 00:40

2

The largest difference between using <p> and <div> USED TO BE that you cannot nest additional elements inside <p> the way you can using <div>. However, the <p> tag seems to have become more forgiving in HTML5, making this allowable - any phrasing elements (including images and other <p> tags) work fine. The main reason to pick one over the other in MODERN DAY is 1) It marks a semantic difference, making the code more readable by others, and 2) <p> by default adds a margin above and below the paragraph, while <div> adds no additional margin.

answered Apr 27 '19 at 00:40

Christopher Bennett

803
1
8
20

This being said, it is still considered bad form to include block elements inside a `
` tag.
– Christopher Bennett Apr 27 '19 at 00:44
but I didn't include a block element in a `
` element in this case right?
– Gert Cuykens Apr 27 '19 at 00:46
1

Correct, you did not. I was simply quoting the "unofficial rules" of HTML, which state that though `
` is a block element itself, it is not advisable to place other block elements inside it.
– Christopher Bennett Apr 27 '19 at 00:49

David Klinge · Accepted Answer · 2019-04-27T01:08:42.883

1

The height of the p element is 0. I'm not exactly sure why but the grid-auto-rows rule for the grid container is causing it. Without it, the p balloons to 50px hight, including padding.

This padding is something the browser set. I like to use a css reset. They are simple CSS rules that undo the common problems these default styles cause. There are SEVERAL of these and people prefer different resets for different reasons. I rather like this one

EDIT: fixed code snippet.

.container {
  display: grid;
  grid-auto-rows: 20px;
  grid-auto-columns: auto;
  grid-row-gap: 5px;
}

.box {
  display: block;
  border: 1px solid black;
  background-color: lightgreen;
  margin: 0;
  padding: 0;
}

<div class="container">
  <p class="box">test</p>
  <div class="box">test</div>
  <div class="box">test</div>
</div>

edited Apr 27 '19 at 01:08

answered Apr 27 '19 at 00:35

David Klinge

362
1
9

hmm ok thx but i put the word `test` in it how can it be `0` it's so inconsistent ? – Gert Cuykens Apr 27 '19 at 00:37
it should be atleast `20px` to make any sense regarding the padding or margin reset – Gert Cuykens Apr 27 '19 at 00:40
1

Excuse me, I looked at the Computed styles in the developer window and it reported `height 0px`. I see now that 2px are showing. It's because there is 18px of padding on that `p` pushing it down into it's sibling. – David Klinge Apr 27 '19 at 00:41
1

adding `margin: 0; padding: 0;` in the box class fixed it. Can you add the modified snipped to your answer please so other can see the result :) – Gert Cuykens Apr 27 '19 at 00:53

display a grid row vs a grid row

2 Answers2

display a grid
row vs a grid
row