Why is text vertically aligned in CSS Grid?

Question

I am trying to add 2 images with different heights and some text (height of text is different). I'm using Grid to create same height for divs with images (don't want to use height, because I don't know the height of images).

I don't know why, when I use display:grid the text is aligned in middle of the div. Some idea? I wasn't able to find out why.

* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  align-items: start
}

.magazine-item {
  width: 50%;
  display: grid;
  border: 1px solid red;
}

.magazine-item img {
  width: 100%;
}

.double-text {
  width: 80%;
  margin: auto;
}

<div class="magazine-items">
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/ELLE-EFFE_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Porovnání detailů designu série Elle a Effe</p>
    </div>
  </div>
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni. Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady
        Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

it's not really aligned but this is the logical result of the grid calculation since you didn't define any template. Inspect the element to better see — Temani Afif, Apr 10 '19 at 20:50
@TemaniAfif and can I align it at top? My problem is that I won't know how many divs there's gone by. It can by 2 or more. So, I do't know how to define the template without knowing the number of divs — Valentin Emil Cudelcu, Apr 10 '19 at 20:53
add `grid-template-rows:auto 1fr` (on the grid container) or use `align-items:flex-start` (on the flex container) — Temani Afif, Apr 10 '19 at 20:55
@TemaniAfif Already tried it, but the left text goes upper than the right and that's beucase of the height of images, which are different (1189px and 1459px). — Valentin Emil Cudelcu, Apr 10 '19 at 21:01
@RadekF `.magazine-item {align-items : start}` has no effect. but when I use it on `magazine-items` text goes top, but is not at the same line as the second text (check the snippet). My problem is that I cannot use `height` property, becaue i want it to work on every image, no matter what is width and height — Valentin Emil Cudelcu, Apr 10 '19 at 21:14

Michael Benjamin · Answer 1 · 2019-04-11T16:35:10.167

p elements have default top and bottom margins.

These margins make your text appear centered in their containers.

Make them smaller or remove them.

Add this to your code:

p { margin-top: 0 }

You may also want to remove the descender space below images.

Add this to your code:

img { vertical-align: bottom; }

/* new */
p   { margin-top: 0; }
img { vertical-align: bottom; }


* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  align-items: start
}

.magazine-item {
  width: 50%;
  display: grid;
  border: 1px solid red;
}

.magazine-item img {
  width: 100%;
}

.double-text {
  width: 80%;
  margin: auto;
}

<div class="magazine-items">
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/ELLE-EFFE_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Porovnání detailů designu série Elle a Effe</p>
    </div>
  </div>
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni. Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady
        Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

More information:

Thanks, it goes up, but it's not at the same line as the second text (the text on right). How could I fix that? — Valentin Emil Cudelcu, Apr 11 '19 at 07:16
I added link references to my answer that may assist you further. @ValentinEmilCudelcu — Michael Benjamin, Apr 11 '19 at 16:36

Why is text vertically aligned in CSS Grid?

1 Answers1