Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

CSS Grid Layout và Truyện tranh (như giải thích bởi Mèo vằn)

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Nó cho thấy CSS Grid là khá tuyệt trong việc trình bày truyện tranh trực tuyến, đặc biệt là nếu bạn muốn truyện tranh của bạn phải linh động. Trong hướng dẫn này chúng tôi sẽ sử dụng những con mèo vằn để minh hoạ cách xây dựng một truyện tranh có tính đáp ứng cao.

Mèo vằn

Đối với hướng dẫn này, tôi đã mượn một số tác phẩm nghệ thuật từ GraphicRiver; Sleepy Fat Cat nó thật sự là một kiểu chữ, nhưng nó có đi kèm với một số con mèo đáng yêu ở dạng vector cho phần minh hoạ truyện tranh này!

Sleepy Fat Cat on GraphicRiver
Sleepy Fat Cat Typeface trên GraphicRive

Tăng tốc trình duyệt của bạn

Đừng quên, bạn sẽ cần các tính năng của trình duyệt edge để xem CSS Grid, vì vậy hãy đọc qua CSS Grid Layout: Một hướng dẫn nhanh nếu bạn đang sử dụng một trình duyệt không hỗ trợ. Dưới đây là những gì chúng ta hướng đến:

Kiểm tra bản demo đầy đủ trên CodePen để xem nó đáp ứng với kích cỡ màn hình khác nhau như thế nào.

1. Mã html

Hãy bắt đầu bằng cách sắp đặt một số mã HTML:

Ở đây chúng ta có một thẻ <section> đóng vai trò như là Grid của chúng ta, với một loạt các thẻ <div class="panel"> như là các phần tử trong Grid.

Một số panel có văn bản bên trong chúng, nhưng còn lại sẽ dành cho các hình truyện tranh. Chúng ta có hai tuỳ chọn ở đây: chúng ta hoặc có thể đặt những tấm hình của chúng ta trực tiếp bên trong các panel, hoặc thêm các tấm hình thông qua CSS. Tôi chọn cách thứ hai bởi vì nó dễ để kiểm soát việc sắp xếp và định kích thước của các hình, nhưng bạn cũng có thể cho rằng đặt các hình trực tiếp sẽ tăng khả năng truy xuất hơn. Tuỳ bạn chọn.

2. Các style cơ bản

Để có được quả bóng lăn tròn, hãy thêm một số style cho kiểu trình bày văn bản (typography) và màu sắc:

Tôi đã chọn Kalam như là phông chữ Google web font cho kiểu chữ viết tay của chúng ta, nó hoàn hảo cho các truyện tranh mà tôi đã coi. Bạn sẽ cần phải móc nối nó vào trong CSS của bạn thông qua một liên kết trong phần head của tài liệu:

Kalam
Kalam trên Google Fonts

3. Grid của chúng ta

Bắt đầu với mobile first (ưu tiên thiết bị mobile), chúng ta sẽ sắp xếp các thứ trong một cột với chỉ một panel trên mỗi dòng:

Xem lại các bài hướng dẫn về Grid của chúng tôi bạn sẽ nhớ lại grid-template-columns chỉ định bao nhiêu cột mà chúng ta sẽ có, và chúng sẽ rộng như thế nào. grid-template-rows hoạt động giống như các dòng; ở đây chúng ta đang định nghĩa mười một dòng. Những cái chứa các hình sẽ cao 200px, những cái nào có chứa văn bản sẽ có kích thước tự động tuỳ vào nội dung. Cuối cùng, grid-gap định nghĩa kích thước gutter của chúng ta.

Bây giờ hãy thêm một số style thông thường vào các panel của chúng ta:

Thuộc tính background vẫn chưa có bất kỳ tác dụng nào, nhưng chúng ta sẽ thêm các hình nền cho chúng sớm thôi. Và box-shadow đóng vai trò như là một border. Bạn cũng có thể sử dụng thuộc tính border ở đây nếu thích, nhưng box-shadow đôi khi tạo cho bạn sự linh hoạt.

Hãy xem những gì chúng ta đã có!

4. Các tấm hình của con mèo

Những gì mà internet đã làm cho chúng ta, đúng không? Tôi đã chuẩn bị một số hình SVG để thêm vào các panel, tôi sẽ làm với từng cái một:

Trông rất tuyệt!

Nhưng tôi không muốn các đường viền bao quanh tất cả các panel. Tôi sẽ xoá chúng (sử dụng box-shadow: none;) khỏi những cái có chứa văn bản, cùng với tấm hình đầu tiên, và tấm hình cuối cùng.

5. Các Media Query

Những hình này vẫn chưa hoàn hảo; con mèo già xấu xí bị cắt xén một cách nghiêm trọng. Đã đến lúc nhìn rộng hơn mobile và thay đổi Grid của chúng ta cho các viewport lớn hơn. Hãy thêm một số media query; một cái tại 400px và một cái tại 600px (tuỳ vào cách nhìn của bạn, sử dụng cái nào mà bạn muốn):

Chúng ta sẽ sử dụng chúng để thay đổi Grid Layout trong mỗi trường hợp.

Chúng ta sẽ có hai cột và tám dòng cho màn hình lớn hơn một chút, sau đó ba cột và năm dòng cho các màn hình lớn hơn.

Kéo dài

Bây giờ chúng ta đã thoát khỏi ràng buộc trong một cột, giờ chúng ta có thể sáng tạo hơn một chút rồi. Ví dụ, chúng ta cần tiêu đề của chúng ta chạy dài cùng với độ rông của toàn bộ truyện tranh. Tương tự đối với các panel chứa văn bản, và dòng chữ bản quyền. Ngay cả một số hình sẽ hiện thị tốt hơn trong các panel rộng. Vì thế chúng ta sẽ thêm các chi tiết đó vào cái media query đầu tiên của chúng chúng ta.

Tôi cũng đã thay đổi typography trong một số trường hợp, cuối cùng chúng ta có:

Hai cột layout của chúng ta trông rất tuyệt! Tuy nhiên, ba cột truyện tranh của chúng ta cần phải sửa lại.

Nó gần như xong...

6. Sửa lại layout ba cột của chúng ta

Vì chúng ta làm việc với mobile first, các luật mà chúng ta áp dụng vào media query đầu tiên vẫn còn hiệu lực trên các màn hình lớn. Chúng ta cần làm việc trên các panel và thiết lập lại một số style.

Bắt đầu bằng cách làm cho .panel-title chiếm đầy ba cột, thay vì chỉ hai. Sau đó .panel-3 (với văn bản) có thể được thiết lập trở lại grid-column: span 1; hoặc grid-column: auto;

Tương tự áp dụng với .panel-6. Với một số sự thay đổi bạn sẽ có được một vài thứ như thế này:

Một chút Flexbox

Tôi thích phần đầu tiên của khung được canh giữa một tí, vì thế hãy sử dụng flexbox để làm điều đó. Thêm những thứ sau đây vào media query thứ hai:

before flexbox after flexbox
Trước khi có flexbox, sau khi có flexbox

7. Các panel chồng lấp

Grid không giới hạn chúng ta canh đều các khối chạy ngang và dọc trên một trang, chúng ta cũng có thể sắp đặt một cách hợp lý các panel của chúng ta. Chúng ta sẽ làm cho một ít văn bản cuối cùng của chúng ta trông hấp dẫn hơn một chút bằng cách chỉ định nó nằm cùng vị trí với panel kế tiếp:

Ở đây, chúng ta đã định vị trí cả .panel-7 .panel-8 thành grid-column: 1;grid-column: 4; Điều này có nghĩa là cả hai cùng nằm ở một vị trí, với cái thứ hai nằm bên trên cái thứ nhất theo ngăn xếp của DOM.

Chúng ta có thể sử dụng z-index để thay đổi thứ tự, vì vậy hãy cho .panel-7 một z-index: 1; để mang nó lên trên:

Lưu ý: bây giờ chúng ta đã xoá một dòng một cách hiệu quả, bạn sẽ cần kiểm tra grid-template-rows là xong.

Hãy thêm một ít style vào "Naaah" của chúng ta. Một lần nữa, các phần từ của Grid không hạn chế như bạn nghĩ-chúng ta có thể kéo chúng với các margin âm và ngay cả biến đổi chúng mà không vấn đề gì. Tôi đã thêm một số style vào panel và đoạn văn để tạo ra điều này:

Tổng kết

Làm tốt lắm-dưới đây là những gì mà chúng ta đã làm!

Đó là một bài tập thú vị trong việc sử dụng CSS Grid, khi giới thiệu bạn một vài khái niệm Grid mới cùng với cách làm. Tôi hy vọng bạn sẽ thích nó-bây giờ nếu bạn không phiền tôi xin kết thúc tại đây.

Đọc thêm

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.