CSS Grid
TIL
719
CSS3
49
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 2 năm trước
2 1
Bài viết liên quan
White
0 4
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 hơn 1 năm trước
0 4
White
2 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 8 tháng trước
2 0
{{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á!