CSS Grid Starter Layouts - Thủ thuật CSS

Đây là một bộ sưu tập các mẫu khởi đầu cho các bố cục và mẫu sử dụng CSS Grid. Ý tưởng ở đây là thể hiện những gì kỹ thuật có khả năng thực hiện và cung cấp một điểm khởi đầu có thể được tái định hướng cho các dự án khác.

Hãy nhớ rằng hỗ trợ của trình duyệt cho Grid là tốt nhưng yêu cầu dự phòng cho các trình duyệt cũ. Điều đó có nghĩa là một bản sao và dán thẳng của chúng có thể không phù hợp cho một số trường hợp sử dụng.

Bố cục Chén Thánh

Bố cục ba cột cổ điển ol 'trong đó hai thanh bên và một vùng chứa chứa bản sao nội dung được kẹp giữa đầu trang và chân trang có chiều rộng đầy đủ.

Chén thánh linh hoạt

Mọi thứ vẫn nguyên vẹn khi chiều rộng khung nhìn thay đổi bằng cách sử dụng vùng chứa nội dung linh hoạt.

Xem Pen CSS Grid - Holy Grail 2 của Geoff Graham (@geoffgraham) trên CodePen.

Chén thánh phản hồi

Mọi thứ sẽ được xếp chồng lên nhau khi khung nhìn bị thu hẹp.

Xem Lưới CSS Pen: Bố cục Chén Thánh - Phản hồi bởi Geoff Graham (@geoffgraham) trên CodePen.

2-Cột với Đầu trang và Chân trang

Bố cục blog cổ điển trong đó một cột dành cho bài đăng và cột kia dành cho thanh bên.

2 cột linh hoạt

Bố cục trở nên chật chội khi khung nhìn trở nên hẹp nhưng bố cục vẫn ở đúng vị trí.

Xem Pen CSS Grid: Header, Footer with 2-Column (Linh hoạt) của Geoff Graham (@geoffgraham) trên CodePen.

2 cột đáp ứng

Mọi thứ được xếp chồng lên nhau trên các màn hình nhỏ hơn.

Xem Pen CSS Grid: Header, Footer with 2-Column (Responsive) của Geoff Graham (@geoffgraham) trên CodePen.

Phân phối đồng đều, phù hợp khi cần thiết

Các phần tử chảy vào bố cục và kết thúc khi không còn phần nào nữa.

Xem Lưới bút CSS được phân phối đồng đều, nhiều khi cần thiết của Geoff Graham (@geoffgraham) trên CodePen.

Bài báo có đột phá

Một mẹo nhỏ tuyệt vời của Tyler Sticka cho phép một phần tử thoát ra khỏi lưới. Rachel Andrew giải thích cặn kẽ về cách các đường lưới được đặt tên cho phép điều này hoạt động.

Xem Pen CSS Grid: Article with Breakout của Geoff Graham (@geoffgraham) trên CodePen.

Lịch cơ bản

Như bạn có thể mong đợi, CSS Grid hoạt động tốt cho lưới lịch.

Xem Pen CSS Grid: Calendar của Geoff Graham (@geoffgraham) trên CodePen.

Ban độc quyền

Một trò chơi giải trí đơn giản. Jen Simmons có một bản demo ngọt ngào hoàn chỉnh với phong cách Monpoly.

Xem Pen CSS Grid: Monopoly Board của Geoff Graham (@geoffgraham) trên CodePen.

Thạc sĩ Giao diện Người dùng Đối tác Học tập của chúng tôi

Cần đào tạo phát triển front-end?

Frontend Masters là nơi tốt nhất để có được nó. Họ có các khóa học về tất cả các công nghệ front-end quan trọng nhất, từ React đến CSS, từ Vue đến D3, và hơn thế nữa với Node.js và Full Stack.