Chia sẻ code CSS grid card list dạng lưới chuẩn respondsive

Chào bạn! khá lâu rồi mình không post bài viết lên blog này, tiện thể hôm nay ra thấy code grid dạng lưới rất đẹp, và hôm nay VeoSpot.Com muốn Chia Sẻ với bạn Code Grid Dạng Lưới Chuẩn Respondsive, để bạn tham khảo thêm, hoặc bạn có thể áp dụng cho website blog của mình cho nó đẹp.

Chia sẻ CSS Grid Card List.

1. Code HTML

<h2>Card list with featured</h2>
<ul class="card-list">
  <li class="card">
    <figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
    <h3 class="card-title"><a href="" title="">Title of this card is much longer than the other one</a></h3>
    <div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
    <small class="card-author">Author Name</small>
    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="card-button"><button>&hearts;</button></div>
  </li>      
  <li class="card">
    <figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
    <h3 class="card-title"><a href="" title="">Title of this card</a></h3>
    <div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
    <small class="card-author">Author Name</small>
    <p class="card-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis <span class="fade-text">odit aut fugit.</span></p>
    <div class="card-button"><button>&hearts;</button></div>
  </li>     
  <li class="card">
    <figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
    <h3 class="card-title"><a href="" title="">Title of this card is much longer than the other one</a></h3>
    <div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
    <small class="card-author">Author Name</small>
    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="card-button"><button>&hearts;</button></div>
  </li>     
  <li class="card">
    <figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
    <h3 class="card-title"><a href="" title="">Title of this card</a></h3>
    <div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
    <small class="card-author">Author Name</small>
    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <span class="fade-text">dolore magna.</span></p>
    <div class="card-button"><button>&hearts;</button></div>
  </li>     
  <li class="card">
    <figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
    <h3 class="card-title"><a href="" title="">Title of this card is much longer than the other one, in fact it's super long</a></h3>
    <div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
    <small class="card-author">Author Name</small>
    <p class="card-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, <span class="fade-text">odit aut fugit.</span></p>
    <div class="card-button"><button>&hearts;</button></div>
  </li>
  <li class="card">
    <figure class="card-image"><a href="" title=""><img src="https://via.placeholder.com/800x400/ff66d6/ff66d6" alt=""></a></figure>
    <h3 class="card-title"><a href="" title="">Title of this card</a></h3>
    <div class="card-avatar"><img src="https://via.placeholder.com/64x64/ff66d6/ff66d6" alt=""></div>
    <small class="card-author">Author Name</small>
    <p class="card-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis <span class="fade-text">odit aut fugit.</span></p>
    <div class="card-button"><button>&hearts;</button></div>
  </li>
</ul>

2. Code CSS

$base-padding: 0.75rem;

* {
  box-sizing: border-box;
}

html, body {
  font-family: sans-serif;
  background: #eee;
}

figure {
  margin: 0;
}

.card-list {
  display: grid;
  grid-gap: $base-padding;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-flow: dense;
  list-style: none;
  padding: 0;
}

.card {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-auto-rows: 180px min-content min-content 1fr min-content;
  grid-template-areas:
    "card-image card-image"
    "card-title card-title"
    "card-avatar card-author"
    "card-description card-description"
    "card-button card-button";
  grid-gap: $base-padding;
  background: #fff;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  overflow: hidden;
  padding-bottom: $base-padding;
  
  a {
    color: inherit;
    text-decoration: none;
  }

  /* Uncomment to view grid */
  /*> * {
    box-shadow: inset 0 0 1px 0 red
  }*/
}

.card-image {
  grid-area: card-image;
  
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.card-title {
  grid-area: card-title;
  margin: 0;
}

.card-avatar {
  grid-area: card-avatar;
  padding-left: $base-padding;
  
  img {
    border-radius: 50%;
    width: 100%;
    min-width: 40px;
    height: 100%;
  }
} 

.card-author {
  grid-area: card-author;
  padding-right: $base-padding;
}

.card-author,
.card-avatar {
  display: flex;
  align-self: center;
}

.card-description {
  grid-area: card-description;
  margin: 0;
  line-height: 1.5;
}

.card-title,
.card-description {
  padding: 0 $base-padding;
}

.card-button {
  grid-area: card-button;
  text-align: right;
  padding-right: $base-padding;
}

@media (min-width: 480px) {
  .card-list .card:first-child {
    grid-area: 1 / 1 / 1 / span 2;
    grid-auto-rows: 250px min-content min-content 1fr min-content;
  }
}


/* Fade the last few words of description to indicate more content */
.fade-text {
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  
  &::after {
    content: '';
    height: 100%;
    width: 100%;
    background: linear-gradient(to left, #fff, rgba(255,255,255,0));
    position: absolute;
    bottom: 0;
    right: 0;
  }
}