https://viblo.asia/p/hoc-css-grid-thong-qua-nhung-layout-phuc-tap-E375z0QdZGW
Last updated
Was this helpful?
Với sự ra đời của CSS Grid giúp chúng ta xây dựng layout đơn giản hơn rất nhiều so với float, flex. Với những layout phức tạp chỉ cần Grid là mọi việc sẽ trở nên vô cùng đơn giản hơn bao giờ hết. Hiện tại Grid chỉ đưa ra bản thử nghiệm nên sẽ còn rất nhiều hạn chế trên các version của trình duyệt. Hiện tại trình duyệt FireFox đang làm rất tốt trong việc hiển thị layout trong quá trình debug. Thì với bài viết này mình sẽ giới thiệu 10 layout sử dụng CSS Grid để xây dựng những layout có độ phức tạp khá cao. Qua những ví dụ này các bạn sẽ thấy được sức mạnh thật sự của Grid
Tài liệu tham khảo
Với layout Hexagonal (giống hình tổ ong), đây là một ví dụ khá đặc trưng của grid, chưa có sự xuất hiện của Gird đây là layout ác mộng đối với Front-end, Với Grid chúng ta thực hiện những mà quá khứ không làm được, xây dựng chúng nó vô cùng đơn giản chưa đến 150 dòng code. Layout được thực hiện bởi () Cool
Dựng lên một bảng tuần hoàn các nguyên tố hóa học không thể đơn giản hơn với Grid. Chỉ với vài dòng code chưa đến 150 line đã có được một bảng tuần hoàn. Tạo sao không? Layout được dựng bởi () cũng đã phản ánh được phần nào những khó khăn mà các deginer khác gấp phải
Với thuộc tính giúp chúng ta kiểm tra trình duyệt có hỗ trợ grid hay không, để cấu hình phù hợp nhất. Ví dụ
Với ví dụ về @support kết hợp với grid thì giúp ứng dụng web thích ứng với mọi trình duyệt cũng như là các version cũ. Đây là layout khá phổ biến và thông dụng nên sẽ rất hữu ích (y). Layout được thực hiện bởi ()
Wim Crouwel được biết đến là một Dutch graphic designer nổi tiếng trong việc sử dụng layout grid đầu những năm 1960. Những thiết kế của ông vẫn còn rất nhiều giá trị cho đến ngày nay, và truyền cảm hứng mạnh mẽ cho các designer khác. Đặt biệt thiết kế nỗi tiếng của ông là Calendar giờ đây đã được thực hiện hóa trên website bằng grid
Layout Magazine thì không cần phải nói về mức độ phổ biến của nó nữa. Trong thế giới web, sử dụng layout này khá nhiều, độ phức tạp cũng tương đối. Thì đây là ví dụ của đã làm khá tốt trong việc thiết lập layout về Magazine
Về layout Magazine thì phổ biến khá cao, nhưng layout Blog thì độ phổ biến của nó thì không hề thua kém. Với grid dựng layout cho những trang blog khá nhanh với vài dòng code ít ỏi . Ví dụ này được thực hiện bởi giúp các bạn hình dung rõ hơn
Việc kết hợp grid với CSS3 animations sẽ tạo ra layout phức tạp với animation uyển chuyển giúp người dùng trải nghiệm website vô cùng thú vị. Qua ví dụ dựng layout poster của chúng ta sẽ thấy sức mạnh thật sự của grid đáng sợ thế nào trong việc khẳng định là layout này chỉ có grid mới lại được tạo nên đặc trưng khá riêng.
Layout PILE mang đến cho chúng ta một cảm giác Holy Grail, với phong cách 2 column trái phải bằng nhau với không clearfixes. The future is now! =)). Layout pile được dựng nên layout không thể chê nào đâu được
Một phong cách truyện tranh được tái hiện trên grid. Bạn thấy sao . Với Grid thì mọi chuyện trở nên đơn giản hơn bao giờ hết. đã tái hiện nên câu chuyện tranh đầy thú vị. Mind officially blown =))
Xây dựng layout photo gallery thú vị với sự kết hợp giữa react và grid tạo nên những layout ưu việt, nhìn rất cool đã được tái hiện bởi
Một trong những thách thức lớn nhất của web developer là thực hiện những đoạn code sáng tạo để mang đến điều tốt đẹp nhất dành cho end-user. Có những ý tưởng sáng tạo mà designer thiết kế ra lại không tái hiện được trên trình duyệt. CSS Grid sinh ra để giải quyết những gánh nặng đó. CSS Grid giúp những biến những ý tưởng không thể thực hiện thành hiện thật mặc dù CSS Grid còn nhiều hạn chế. Mặc dù CSS Grid chỉ mới ra version thử nghiệm thôi mà đã tạo ra mindset khá lớn cho các developer đặc biệt trong dùng layout. CSS Grid rất đáng để trải nghiệm còn bạn thì sao ? Hãy comment những trải nghiệm thú vụ khi sử dụng Grid nhé
