CSS Grid
TIL
636
CSS3
53
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 hơn 1 năm trước
2 1
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 5 tháng trước
0 2
White
20 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 2 năm trước
20 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á!