Dự án bố cục trang thực chiến với thiết kế lưới (phần 4)

Thiết kế các cột lưới

Bạn đã học thiết kế các cột lưới ở học phần sau:

https://giaiphapwebtl.vn/thiet-ke-trang-voi-bo-cuc-luoi-phan-5/

Để làm trôi các cột lưới:
1. Bên trong phần Grid Columns Styles, điền quy tắc style sau:

div[class^=”col-”] {
float: left;
}

2. Lưu các thay đổi của bạn đối với file.
Để thiết lập width của các cột lưới:
1. Bên trong phần Grid Columns Styles, thêm các quy tắc sau:

div.col-1-1 {width: 100%;}
div.col-1-2 {width: 50%;}
div.col-1-3 {width: 33.33%;}
div.col-2-3 {width: 66.67%;}
div.col-1-4 {width: 25%;}
div.col-3-4 {width: 75%;}

2. Lưu các thay đổi của bạn đối với file.

Chia sẻ

Leave a Reply

Your email address will not be published. Required fields are marked *