Hướng Dẫn Chia Bài Đăng Dạng Lưới Cho Blogspot

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ó

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 !

Hưng1001