Sign up
80
0
Web Development WordPress

Responsive Layout với Grid Css

Lamies
Lamies
01/05/2020 · 2 min read
80
Grid Image
Thời gian đọc: 2 phút

Chào các bạn, như các bạn đã biết website chúng ta thường có responsive để có thể sử dụng trên nhiều phương tiện internet như Desktop, Mobile, IPad. Do đó hôm nay mình sẽ hướng dẫn các bạn responsive với Grid.

Phần 1: Grid CSS với Full With Image

Trước hết các bạn cần phải tạo một list danh sách các bài post ( nhớ đặt ảnh đại diện nhé vì nếu không có thì không lấy ảnh được đâu)

all post image

Sau đó ta tiếp tục add thêm đoạn code sau vào file homepage của bạn ( có thể tùy ý bạn nếu ở page khác):

<section class="wrapper">
  <div class="wrapper__content container">
    <div class="wrapper__background">
      <ul class="wrapper__image--item">
        <?php getImagePost(); ?>
      </ul>
    </div>
  </div>
</section> Ở đoạn code trên ta có hàm getImagePost() hàm này chúng ta tự tạo nhằm có tác dụng lấy hình ảnh đại diện từ các bài post. Giờ chúng ta sẽ xây dựng hàm này ở file functions.php. (Các bạn có thể xem thêm các WP_Query tại đây)
function getImagePost()
    {
      $args=array(
        'post_type' => 'post',
        'posts_per_page'=> 12,
      );
      $the_query = new WP_Query($args);
      if($the_query->have_posts()){
        while($the_query->have_posts()){
          $the_query->the_post();
          ?>
            <li class="image-item"><?php echo get_the_post_thumbnail( get_the_ID(), 'medium', null ); ?></li>
          <?php
        }
      }
    } Bắt đầu tiến hành responsive, style image lại theo Grid
.wrapper__background .wrapper__image--item{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 240px));
  grid-template-rows: repeat(6, 200px);
  grid-gap: 1rem;
  grid-auto-flow: dense;
}

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-template-rows: thuộc tính dùng để định nghĩa số dòng 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.
  • grid-auto-flow: thuộc tính kiểm soát các item được add tự động vào grid. dense: lấp đầy các item vào các vị trị còn trống trên cùng 1 row.
  • 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 bạn có thể đọc ở đâ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.
.wrapper__background .wrapper__image--item .image-item:nth-child(4){
  grid-column: span 2; /* chiếm 1 cột */
  grid-row: span 2; /* chiếm 2 dòng */
}
.wrapper__background .wrapper__image--item .image-item img{
  width: 100%;
  height: 100%;
  object-fit: cover; /*ẩn đi phần ảnh bị tràn ra ngoài thẻ nếu ảnh quá lớn*/
} result after code img Các bạn thử kéo co - giản giao diện và thử xem kết quả responsive trên các kích thước desktop, mobile, ipad nhé.

 

0