CODEWITHSUNDEEP
htmlcssgrid-layoutcss-grid
Jacek
Jacek

Reputation: 51

How to position an element inside a css grid cell?

CSS Grid, three cells, three elements in each cell: header, paragraph, link. Each paragraph has different different length making the links not being aligned. Is there any way to align the links, preferably position elements at the bottom of the cell?

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
<div class="grid">
  <div>
    <h3>Item 1</h3>
    <p>Description</p>
    <a href="#">Link 1</a>
  </div>
  <div>
    <h3>Item 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <a href="#">Link 2</a>
  </div>
  <div>
    <h3>Item 3</h3>
    <p>Description</p>
    <a href="#">Link 3</a>
  </div>
</div>

https://codepen.io/anon/pen/GYEobV

Upvotes: 1

Views: 4767

Answers (3)

gpoole
gpoole

Reputation: 109

This may have changed since the original answers were given, but currently the well-supported justify-items and align-items properties are a convenient way to align items within grid cells, which is what the original question was asking.

For example, the following will align the contents of the grid cells to the bottom of the cells, as requested:

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: flex-end;
}

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

You could mantain the grid layout for the outermost parent, turn your inner div into flex containers and finally self-aligning the link elements in the flex-end position:

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.grid div {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
.grid div a {
  margin-top: auto;
  width: 100%
  align-self: flex-end;
}
<div class="grid">
  <div>
    <h3>Item 1</h3>
    <p>Description</p>
    <a href="#">Link 1</a>
  </div>
  <div>
    <h3>Item 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <a href="#">Link 2</a>
  </div>
  <div>
    <h3>Item 3</h3>
    <p>Description</p>
    <a href="#">Link 3</a>
  </div>
</div>

Upvotes: 3

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

using position:absolute; you can solve your problem check updated snippet

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.col {
  position: relative;
}

a {
  position: absolute;
  bottom: 0;
}
<div class="grid">
  <div class="col">
    <h3>Item 1</h3>
    <p>Description</p>
    <a href="#">Link 1</a>
  </div>
  <div class="col">
    <h3>Item 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <a href="#">Link 2</a>
  </div>
  <div class="col">
    <h3>Item 3</h3>
    <p>Description</p>
    <a href="#">Link 3</a>
  </div>
</div>

Upvotes: 1

Related Questions