CSS Grid
TIL
499
CSS3
24
White

Sơn Phạm viết ngày 26/01/2018

alt text

CSS grid

<div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

alt text

Giải thích

Dòng 2 dùng để cho trình duyệt biết là bạn sử dụng thuộc tình grid.
Dòng 3 dùng để chia cột cho grid ở đây mình chia làm 3 cột có kích cỡ tự động cân chỉnh chiều ngang cho bằng nhau.
Dòng 4 dùng để căn chỉnh chiều dài cho mỗi hàng, ở đây mình cho 2 hàng mỗi hàng 50px.
Dòng 5 dùng để căn khoảng cách giữa các cột và hàng, mình viết như trên là mình cho cột và hàng đều có giá trị bằng 10px.

More

Các bạn có thể đọc thêm về CSS Grid tại đây:
https://www.w3schools.com/css/css_grid.asp

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Sơn Phạm

2 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
2 1
Ví dụ về Spaceship () $a = 2; $b = 2; $compare = $a $b; / return 1 nếu $a < $b return 0 nếu $a = $b return 1 nếu $a $b /
Sơn Phạm viết 7 tháng trước
2 1
Bài viết liên quan
White
18 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết hơn 1 năm trước
18 1
White
1 1
Chào mọi người, hôm nay mình viết một bài TIL nhỏ về cách lấy độ phân giải của màn hình hiện tại đang sử dụng. xdpyinfo | grep dimensions Kết quả...
namtx viết 7 tháng trước
1 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!