Aligning content to top of cell in CSS grid

Question

i'm trying to place three elements next to my sidebar image using CSS grid. They should align to the top of the image like this:

How I want the page

But when I do this CSS grid layes everything out in such a way that my text elements get divided over the height of the image like this:

How the page is right now

This is the code I'm using:

display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: minmax(min-content, 1fr);
grid-gap: 10px;

Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Sep 17 '19 at 10:39
CSS-Grid cells **cannot** contain multiple items *unless* they are supposed to overlay one another. - https://stackoverflow.com/questions/34480760/is-it-possible-for-flex-items-to-align-tightly-to-the-items-above-them — Paulie_D, Sep 17 '19 at 10:43

score -1 · Answer 1 · answered Sep 17 '19 at 10:32

text elements get divided over the height of the image like this

Not seeing the real layout and not understanding how it should be, it's hard to give the right answer.

You can set the property "grid-row: span 12" for the picture. This will create additional space

Example

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-template-rows: minmax(min-content, 1fr); */
  grid-gap: 10px;
}

.item {
  min-height: 50px;
  border: 1px solid #000;
}

.big {
  grid-row: span 12;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="grid">
  <div class="item big">
    <img src="https://picsum.photos/id/308/536/354">
  </div>
  <div class="item">
    <h1>Lorem ipsum dolor sit amet.</h1>
  </div>
  <div class="item">
    <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, quisquam?</h2>
  </div>
  <div class="item">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque modi nisi, magnam ad autem quas nobis neque vitae ratione aut eos in sint amet. Sequi in vitae adipisci blanditiis molestias!</p>
  </div>
</div>

Are you sure that you need the GSS Grid for this task? Maybe Flexbox is better? Just split the card into two parts and work with each part separately

using CSS grid

Are you sure that you need the GSS Grid for this task? Maybe Flexbox is better? Just split the card into two parts and work with each part separately

Result

.recent-work {
  display: flex;
  padding: 30px;
  background-color: black;
}

.recent-work .pic {
  flex-shrink: 0;
  flex-basis: 40%
}

.pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-work p {
  color: white;
  display: inline;
}

.desc {
  margin-left: 40px;
}

.recent-work h1 {
  margin: 0;
  margin-bottom: 20px;
  color: white;
}

<div class="recent-work">
  <div class="pic">
    <img src="https://picsum.photos/536/354">
  </div>
  <div class="desc">
    <h1>Modern website conecept</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi reiciendis suscipit repudiandae, exercitationem perferendis eligendi. Saepe, nesciunt explicabo! Maxime deserunt necessitatibus perferendis nesciunt ratione est nihil voluptatum doloremque
      fugit ipsam.</p>
  </div>
</div>

Aligning content to top of cell in CSS grid

1 Answers1