Cascading Style Sheets [CSS] là ngôn ngữ biểu định kiểu được sử dụng để mô tả tài liệu được viết bằng ngôn ngữ đánh dấu như HTML. CSS là công nghệ nền tảng của World Wide Web, bên cạnh HTML và JavaScript. Trong hướng dẫn này, bạn sẽ hiểu cách sử dụng CSS Grid Layout và các thuộc tính khác nhau của nó
Khám phá thêm về Cascading Style Sheets Hướng dẫn CSS cơ bản cho người mới bắt đầu vào năm 2022 sẽ giúp bạn hiểu tổng thể
Bố cục lưới CSS là gì?
CSS Grid là một khung mang lại nhiều tự do hơn cho các nhà phát triển so với HTML. Nó cho phép các nhà phát triển xây dựng các lưới tùy chỉnh với tính linh hoạt và kiểm soát hơn bao giờ hết. Trái ngược với hệ thống khối, nó không có giới hạn về bố cục và cho phép một người chơi xung quanh với các thành phần giao diện người dùng theo ý thích của mình. Nó cũng có thể được sử dụng để định vị và kích thước từng phần tử bên trong lưới chỉ bằng CSS và không ảnh hưởng đến bất kỳ thay đổi HTML nào
Hình ảnh dưới đây cho thấy cách bố trí của mô hình lưới
Khóa học Full Stack Web Developer
Để trở thành chuyên gia về MEAN Stack Xem khóa họcthuật ngữ quan trọng
Mục lưới
Bộ chứa lưới chứa các mục lưới.
Đường lưới
Đường lưới là đường kẻ ô vuông dọc hoặc ngang tạo nên cấu trúc của ô lưới.
Ô lưới
Đơn vị nhỏ nhất trên lưới được gọi là ô Lưới. Đó là khoảng cách giữa hai hàng và cột liền kề
hàng
Hàng lưới là đường ngang của lưới
Cột
Cột lưới là đường chạy dọc của lưới
Mương nước
Máng xối là khoảng cách giữa các hàng và cột trong lưới
Hộp chứa lưới
Một Grid container là một thành phần trên đó màn hình. thuộc tính lưới được áp dụng. Nó là cha mẹ trực tiếp của tất cả các mục lưới. Các mục của vùng chứa lưới được đặt bên trong các hàng và cột
Hãy hiểu rõ hơn về grid container với sự trợ giúp của một ví dụ
- lưới-mẫu-cột. Nó được sử dụng để thiết lập kích thước của các cột
- lưới-mẫu-hàng. Nó được sử dụng để đặt kích thước của các hàng
- khoảng cách lưới. Thuộc tính grid-gap đặt khoảng cách giữa các hàng và cột
- Đơn vị fr được sử dụng để tạo các rãnh lưới linh hoạt. Nó đại diện cho một phần không gian có sẵn trong vùng chứa lưới
Lặp lại các bản nhạc lưới
Đường lưới lặp lại được chỉ định bằng hàm repeat[]. Chức năng này hữu ích khi bạn có các mục lưới có kích thước bằng nhau
Đối số đầu tiên biểu thị số lần bản nhạc sẽ lặp lại và mục thứ hai đề cập đến kích thước của bản nhạc
Nổi bật so với các đồng nghiệp của bạn trong mùa đánh giá này
Bắt đầu học với các khóa học MIỄN PHÍ của chúng tôi Đăng ký ngayThuộc tính Align-Content và Justify-Content
Nội dung căn chỉnh được sử dụng để căn chỉnh lưới dọc theo trục hàng và nội dung căn chỉnh được sử dụng để căn chỉnh lưới dọc theo trục cột
Hỗ trợ trình duyệt
Trình duyệt Chrome
firefox
Cuộc đi săn
Ô-pê-ra
57. 0
52. 0
10
44
Có kỹ năng về HTML5 và CSS3 với. Click để xem chi tiết chương trình.
Phần kết luận
Trong bài viết này, bạn đã xem qua cách lưới CSS cho phép bạn tạo thiết kế đáp ứng và bố cục hiện đại chỉ bằng CSS. Bạn cũng đã khám phá cách xác định bố cục bằng lưới CSS, đơn vị fr, hàm lặp lại và thuật ngữ quan trọng liên quan đến lưới.
Bây giờ là lúc để bạn tiến thêm một bước thông qua Chương trình Sau Đại học này trong khóa học Phát triển Web Full Stack với sự cộng tác của Caltech CTME. Khóa học này sẽ bắt đầu với kiến thức cơ bản về phát triển web và sẽ bao gồm các công nghệ như Hibernate, Spring Boot, MVP, v.v.
Bạn có bất kỳ câu hỏi hoặc phản hồi nào cho chúng tôi về hướng dẫn Bố cục lưới CSS này không? . Các chuyên gia của chúng tôi sẽ xem xét và phản hồi trong thời gian sớm nhất
Tìm Full Stack Developer của chúng tôi - MEAN Stack Bootcamp trực tuyến tại các thành phố hàng đầu
NameDatePlaceFull Stack Developer - MEAN StackCohort bắt đầu vào ngày 16 tháng 2 năm 2023,Đợt cuối tuầnChi tiết CityView của bạnKhóa học dành cho nhà phát triển ngăn xếp trung bình tại SingaporeCohort bắt đầu vào ngày 3 tháng 4 năm 2023,
Đợt cuối tuầnSingaporeXem chi tiếtNhà phát triển Full Stack - MEAN StackCohort bắt đầu vào ngày 19 tháng 4 năm 2023,
Lô hàng cuối tuầnChi tiết CityView của bạn
Thông tin về các Tác giả
Aryan là một người đam mê công nghệ, thích cập nhật các xu hướng công nghệ ngày nay. Anh ấy đam mê tất cả mọi thứ về công nghệ, một nhà nghiên cứu sắc sảo và viết để truyền cảm hứng. Bên cạnh công nghệ, anh ấy là một cầu thủ bóng đá tích cực và là một người đam mê trò chơi