CSS, trouble in vertical alignment of buttons in a grid cell for a magazine style layout

Dodo 0
Viewed 51

I'm working on a my personal blog but facing some alignment issues.

I would need to get the "Read more" buttons aligned to the bottom.

Basically, the title should never be clipped but more or less lines of article preview should be shown accordingly. So far, I can get those buttons aligned but only by clipping the title to one line.

enter image description here

Here is a snippet of the code that handles that:


.article__tags {
  margin-bottom: $section-spacing / 2;
}

.article__tags--list {
  font-style: italic;
}

.article__link {

  display: block;

  @include media-query($small) {
    @include display-flexbox;
    @include flex-direction(column);
  }

  &:not([disabled]):hover,
  &:focus {
    .article__grid-image-wrapper {
      @include overlay(1);
    }
  }

}

.article__link--fixed-overlay {
  &:not([disabled]):hover,
  &:focus {
    .article__grid-image-wrapper::before {
      bottom: auto;
    }
  }
}

 /* This should be the button I'm struggling with */
.article__meta-buttons {
  li {
    &:first-child {
      margin-right: 1.5rem;
    }
  }
}

.article__comment-count {
  border-color: transparent;
  border-bottom-color: currentColor;
  padding: 0 0 3px 0;

  &:not([disabled]):hover,
  &:focus {
    border-color: transparent;
    border-bottom-color: currentColor;
  }
}

.rte--article {
  margin-bottom: 20px;
}

.grid--blog {
  margin-bottom: -$section-spacing;
  overflow: auto;
    
    /**Major Properties**/
  overflow:hidden;
  line-height: 1.7rem;
  display: block;
  overflow: hidden !important;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

.article__grid-tag {
  margin-right: 10px;
}

.article__grid-meta {
  margin-bottom: $section-spacing;
}

@include media-query($small) {
  .article__grid-meta--has-image {
    float: left;
    padding-left: $gutter-site-mobile;
  }
}

.article__grid-excerpt {
  margin-bottom: $section-spacing-small / 2;
  
  /**Major Properties**/
  overflow:hidden;
  line-height: 1.7rem;
  max-height: 8rem;
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  overflow: hidden !important;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

.article__titles {
  margin-bottom: $section-spacing-small / 2;
  
  /**Major Properties**/
  overflow:hidden;
  line-height: 1.7rem;
  max-height: 8rem;
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  overflow: hidden !important;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}

.article-image-wrapper {
  &.article__grid-image-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}

.article__grid-image-wrapper {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.article__grid-image-wrapper--small {
  width: 50%;
}

.article__grid-image-container {
  display: block;
  clear: both;
  position: relative;

  margin: 0 auto $section-spacing / 2 0;
  min-height: 1px;
  width: 100%;
  height: 100%;

  @include media-query($small) {
    float: left;
    margin: 0 0 $section-spacing 0;
  }


  img {
    display: block;
  }
}

.article__grid-image {
  margin: 0 auto;
  width: 100%;

  .js & {
    position: absolute;
    top: 0;
  }
}

.article__list-image-container {
  display: block;
  clear: both;
  position: relative;
  min-height: 1px;
  width: 100%;
  height: 100%;
}

.article__list-image-wrapper {
  width: 100%;
  margin-bottom: 20px;
}

.article__list-image {
  margin: 0 auto;
  width: 100%;
  position: absolute;
  top: 0;
}
alignment css
1 Answers

You can use flex-box. When a container's direction is set to column by flex-direction: column; the last child can be align at the bottom by setting margin-top: auto;. In case where you want to align an item at the end of a row flex, you can use margin-left and set it to auto. Here is a small snippet for that:

.container {
    display: flex
}

.column {
    display: flex;
    flex-direction: column;
    width: 30vw;
    margin: 0 1vw
}

.button {
    margin-top: auto;
}

img {
    width: 100%;
}
h4, p {
    margin: 1vw 0
}
<div class="container">
    <div class="column">
        <div class="image"> <img src="https://placekitten.com/100/100" /> </div>
        <h4>
It is a long established fact that a reader will be
  </h4>
        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled </p>
        <div class="button">
            <button>Read More</button>
        </div>
    </div>
    <div class="column">
        <div class="image"> <img src="https://placekitten.com/200/200" /> </div>
        <h4>
  It is a long established 
  </h4>
        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's stand </p>
        <div class="button">
            <button>Read More</button>
        </div>
    </div>
    <div class="column">
        <div class="image"> <img src="https://placekitten.com/250/250" /> </div>
        <h4>
  It is a long established fact that a reader
  </h4>
        <p> Lorem Ipsum is simply dummy text of the printing </p>
        <div class="button">
            <button>Read More</button>
        </div>
    </div>
</div>

BehRouz0
Related