Responsive Grid With Post

Phần 2: Responsive With Content And List Post

Như các bạn đã biết, Css Grid không chỉ giúp cho chúng ta sắp xếp bố cục của một trang web mà nó còn giúp cho chúng ta tiện lợi hơn về việc sắp xếp các bài viết, ảnh,… khi ta responsive website.

Ở bài viết này mình sẽ hướng dẫn các bạn khai thác sức mạnh của Grid Css với các bài viết. Giờ đầu tiên chúng ta cần phải xây dựng bố cục website trước.
Các bạn đã biết, khi chúng ta responsive chúng ta thường sử dụng một số thuộc tính kèm theo @media(max-width:…). Nhưng với Grid bạn sẽ không cần phải đụng vô media và các thiết lập thuộc tính để responsive theo kích thước từng giao diện nữa.

Đầu tiên mình sẽ làm section đầu tiên với class=”hero”.

<section class="hero">
     <h1>You thirsty?</h1>
     <article>
       <p>Explore local breweries with just one click and stirred by starlight across the centuries light years great turbulent clouds circumnavigated paroxysm of global death.</p>
       <a href="#breweries">Browse Breweries</a>
     </article>
   </section>

Kế đến là Css cho section class”hero”:

.hero {
  background: url('https://images.unsplash.com/photo-1518176258769-f227c798150e') center;
  background-size: cover;
  padding: 4rem 2rem;

  /* Grid styles */
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Bây giờ thì chúng ta cùng thiết lập content của bài viết

<section class="breweries" id="breweries">
    <ul>
      <li>
        <figure>
          <!-- Photo by Quentin Dr on Unsplash -->
          <img src="https://images.unsplash.com/photo-1471421298428-1513ab720a8e" alt="Several hands holding beer glasses">
          <figcaption><h3>Billions upon billions</h3></figcaption>
        </figure>
        <p>
          Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li>
        <figure>
          <!-- Photo by Drew Farwell on Unsplash -->
          <img src="https://images.unsplash.com/photo-1513309914637-65c20a5962e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80" alt="Several friends doing a toast">
          <figcaption><h3>Drake Equation</h3></figcaption>
        </figure>
        <p>
          Another world citizens of distant epochs from which we spring descended from astronomers Orion's sword shores of the cosmic ocean.
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li>
        <figure>
          <!-- Photo by Rawpixel on Unsplash -->
          <img src="https://images.unsplash.com/photo-1535359056830-d4badde79747?ixlib=rb-1.2.1&auto=format&fit=crop&w=3402&q=80" alt="Three different glasses of beer">
          <figcaption><h3>Vast cosmic arena</h3></figcaption>
        </figure>
        <p>
          Galaxies the ash of stellar alchemy prime number science inconspicuous motes of rock and gas brain is the seed of intelligence.
        </p>
        <a href="#">Visit Website</a>
      </li>
    </ul>
  </section>

Kèm theo css của bài post:

.breweries > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

Cuối cùng thì mình style lại cho đẹp nhé:

.breweries > ul > li {
  border: 1px solid #E2E2E2;
  border-radius: .5rem;
}

.breweries > ul > li > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  position: relative;
}

.breweries > ul > li > figure > img {
  width: 100%;
}

.breweries > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.7);
  width: 100%;
}

.breweries > ul > li > figure > figcaption > h3 {
  color: white;
  padding: .75rem;
  font-size: 1.25rem;
}

.breweries > ul > li > p {
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem .75rem;
  color: #666666;
}

.breweries > ul > li > a {
  padding: .5rem 1rem;
  margin: .5rem;
}

Giờ Mình sẽ bắt đầu giải thích một số dòng trên:

• grid-template-colums: thuộc tính dùng để định nghĩa số cột có trên grid layout.
• grid-gap: thuộc tính dùng để xác định khoảng cách giữa các dòng, cột của các item.
• repeat(số cột, with): bạn có thể hiểu repeat giống như một vòng lặp vậy. Thông thường chúng ta sẽ tạo như sau grid-template-colums: 2px 2px 2px 2px. Tức tạo 4 cột với with là 2px / cột. Thì repeat có tác dụng làm ngắn gọn và dễ sử dụng hơn. Ngoài ra tại vị trí số cột ta có thể dùng auto-fill (như trong bài viết) hoặc auto-fit (chi tiết về 2 cái này các bạn có thể đọc tại đây).
• minmax(giá trị nhỏ nhất, giá trị lớn nhất): giới hạn phạm vi của thuộc tính with lại.

Giờ thì các bạn check lại kết quả thôi nhé: