,

HƯỚNG DẪN CHIA BÀI ĐĂNG DẠNG LƯỚI CHO BLOGSPOT

css-grid

CSS Grid là 1 keyword quen thuộc khi bạn làm quen với css, viết bài này ra thực sự đúng là múa rìu qua mắt thợ, tuy nhiên nó lại rất cần thiết cho những bạn mới chân ướt chân ráo bước vào làm web/blog còn đang loay hoay về việc hiển thị bài viết theo dạng lưới.

Hiện nay để hiển thị dạng lưới có rất nhiều cách như sử dụng display:grid hoặc display:flex, ai muốn mì ăn liền thì có thể dùng bootstrap. Tuy nhiên hạn chế có thể thấy rõ là display:grid/flex không phải lúc nào cũng support 100% các trình duyệt, sử dụng bootstrap thì quá thụ động, kiến thức nền móng về css của bạn rồi cũng bị mai một vì vậy trong bài viết này tôi sẽ hướng dẫn bạn cách hiển thị bài đăng dưới dạng lưới sử dụng thuộc tính float:left

Xem demo (thay đổi kích thước trình duyệt để responsive)

DEMO

Yêu cầu cơ bản đầu tiên đó là bạn phải biết F12 kiểm tra phần tử. Với blogspot bài đăng luôn được nằm trong div có class là "widget Blog". Tôi sẽ xác định các div con trùng lặp bên trong nó

2018-08-29_215936

trong ví dụ này là .post-outer. Đây sẽ là div ta can thiệp chính vào việc tạo lưới, sử dụng float:left kết hợp với set width và height cho div được chỉ định.

Lời khuyên của tôi đó là bạn chỉ set height là giá trị tuyệt đối (đơn vị px), các giá trị như width thì bạn dùng hàm tính toán calc dưới dạng %, tương tự với margin và padding (set tương đối như vậy khi responsive sẽ nhàn hơn)

Trong ví dụ tôi chia mỗi hàng thành 4 cột. Code sẽ như sau 
.post-outer {
     float: left;
     width: calc(95% / 4);
     height: 200px;
     margin: 0 1.5% 20px 0 }
 Bây giờ ta sẽ bỏ đi margin-right cho các div con nằm ngoài cùng bên phải, khi tôi chia 1 hàng 4 cột thì số thứ tự của chúng là 4,8,12,... tương đương với 4n

.post-outer:nth-of-type(4n) {
   margin: 0 0 20px 0
}

float:left/right thì luôn phải có em clearfix đi kèm, clear fix cho div cha và các div 4n+1 (1 hàng 4 cột mà)

.post-outer:nth-of-type(4n+1) {
    clear: both;
}

.widget.Blog::before,
.widget.Blog::after {
    clear: both;
    content: '';
}

Cuối cùng là check break point và bỏ float:left cho giao diện mobile

@media screen and (max-width: 768px) {
    .post-outer {
        float: none;
        width: auto;
        margin: 0 0 20px;
    }
}

Đó, dễ như ăn kẹo vậy thôi, hi vọng qua bài viết này bạn có thể tự tin chỉnh sửa/thiết kế để blog hiển thị bài đăng dưới dạng lưới (có lẽ cũng đang là trend 😁 ).

Good Luck !
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: transinh085@gmail.com
• Facebook: Fb.com/TNS.CLONE1
Xin chân thành cảm ơn những đóng góp của bạn để chúng tôi ngày càng phát triển hơn nữa...

● Hãy là con người văn minh từ những câu nói

19 nhận xét:

  1. cmt đầu :v cơ mà breadcrumbs của em trên pc bị lỗi nha

    Trả lờiXóa
  2. VÀO ĐÂY TAO NÓI NÀY DUY

    "Bây h tao vào học r nên ko onl thường xuyên đc, tao giao chức quản trị lại cho mày, thay tao phát huy nhen. Cảm ơn mày

    À thông báo vs các blog liên kết hộ hộ tao với"

    Phúc said

    Trả lờiXóa
  3. buổi chìu vui vẻ
    tương tác tốt nha

    Trả lờiXóa
  4. A thấy như bt thôi chứ có gì khác đâu e?

    Trả lờiXóa
    Trả lời
    1. Temp dạng lưới nhìn ngầu với chuyên nghiệp hơn í a

      Xóa
    2. Chuyên nghiệp thì a ko rỏ nữa :), nhưng nó góp phần giúp tem load chậm k ta ;))

      Xóa
    3. Cái này là css mà a, load chậm hay ko là do số bài viết mình cho hiển thị ngoài trang chủ í a

      Xóa