CSS Grid
TIL
589
CSS3
41
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 12 tháng trước
2 1
Bài viết liên quan
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
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 27 ngày trước
0 2
{{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á!