Chia Sẻ Code CSS Grid Card List Dạng Lưới Chuẩn Respondsive

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..

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.
Card CSS Grid Card List

Chia sẻ CSS Grid Card List.

Để áp dụng code vào website blogger thì bạn chỉ cần thêm vào phần hiển thị ra ngoài 1 mực <li class="card">........</li>, còn phần CSS thì bạn áp dụng bình thường thôi, hoặc bạn đổi 1 số thông tin nếu bạn muốn...

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;
  }
}

* Trên đây là code hiển thị bài viết blog dưới dạng lưới rất đẹp, để bạn có thẻ tham khảo hoặc bạn có thể áp dụng vào blog của mình nhé, chúc bạn thành công!