Làm cách nào để tạo lưới bố cục 3 cột bằng CSS? – lưới css 3 cột

Trong hướng dẫn này, chúng ta đã học cách tạo bố cục lưới ba cột bằng cách sử dụng các thuộc tính CSS. Nó đã được giải thích bằng các ví dụ.

Bạn đang xem : lưới css 3 cột

Làm cách nào để tạo lưới bố cục 3 cột bằng CSS?

Bố cục rất quan trọng trong khi thiết kế một trang web. Bố cục lưới CSS được sử dụng để thêm cột và hàng vào trang web. Chúng tôi có thể thêm bất kỳ số cột hoặc hàng nào vào trang web. Hãy cho chúng tôi biết cách chúng tôi có thể tạo bố cục 3 cột bằng CSS.

Sử dụng CSS flexbox

Chúng tôi có thể tạo lưới bố cục 3 cột bằng CSS flexbox. Thêm thuộc tính display: flex vào lớp vùng chứa. Đặt giá trị phần trăm linh hoạt cho mỗi cột. Ở đây cho ba lớp, chúng ta có thể đặt flex: 33,33%. Ngoài ra, hãy sử dụng các thuộc tính CSS khác để tùy chỉnh cột.

Ví dụ: Tạo lưới bố cục 3 cột bằng CSS

Đây là một chương trình để tạo bố cục 3 cột bằng cách sử dụng thuộc tính flexbox. Cả hai cột đều có chiều rộng bằng nhau.

 & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta name = "viewport" content = "width = device-width, initial-scale = 1" & gt;
& lt; title & gt; HTML & lt; / title & gt;
& lt; phong cách & gt;
.cột {
uốn cong: 33,33%;
chiều cao: 200px;
đệm: 10px;
lề: 5px;
màu nền: #cccccc;
text-align: center;
}
.thùng đựng hàng {
hiển thị: flex;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; h2 & gt; Bố cục lưới 3 cột & lt; / h2 & gt;
& lt; div class = "container" & gt;
& lt; div class = "column" & gt;
& lt; h2 & gt; Cột đầu tiên & lt; / h2 & gt;
& lt; p & gt; Đây là cột đầu tiên trong hệ thống lưới của chúng tôi & lt; / p & gt;
& lt; / div & gt;
& lt; div class = "column" & gt;
& lt; h2 & gt; cột thứ hai & lt; / h2 & gt;
& lt; p & gt; Đây là cột thứ hai trong hệ thống lưới của chúng tôi & lt; / p & gt;
& lt; / div & gt;
& lt; div class = "column" & gt;
& lt; h2 & gt; Cột thứ ba & lt; / h2 & gt;
& lt; p & gt; Đây là cột thứ ba trong hệ thống lưới của chúng tôi & lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra

Đây là kết quả của đoạn mã trên.

Xem Thêm  Mảng chuỗi trong C # - khai báo mảng chuỗi c #

Sử dụng thuộc tính lưới CSS

Thuộc tính lưới được sử dụng để bố trí các vùng trang chính hoặc giao diện người dùng nhỏ. Chúng tôi có thể tạo một lưới có kích thước đường ray cố định. Chúng ta có thể tạo cột bằng cách tạo vùng chứa lưới bằng cách sử dụng display: grid . Để thêm ba cột, hãy sử dụng lưới-mẫu-cột. Chỉ định chiều rộng của mỗi cột được phân tách bằng khoảng trắng. Vì vậy, chúng tôi có thể thêm bố cục có chiều rộng thay đổi bằng cách sử dụng thuộc tính lưới.

Kết luận

Trong hướng dẫn này, chúng ta đã học cách tạo bố cục lưới ba cột bằng cách sử dụng các thuộc tính CSS. Nó có thể được tạo bằng cách sử dụng thuộc tính flexbox hoặc thuộc tính lưới. Thuộc tính lưới có thể được sử dụng để tạo các cột có chiều rộng thay đổi.


Xem thêm những thông tin liên quan đến chủ đề lưới css 3 cột

CSS Grid Tutorial #3 – Rows

  • Tác giả: The Net Ninja
  • Ngày đăng: 2017-09-25
  • Đánh giá: 4 ⭐ ( 8174 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hey gang, in this CSS grid tutorial I’ll talk about grid rows.

    —– COURSE LINKS:
    + Atom editor – https://atom.io/a
    + GitHub Repo – https://github.com/iamshaunjp/css-grid-playlist

    ———————————————————————————————
    Other tutorials:

    —– HTML FOR BEGINNERS:
    https://www.youtube.com/watch?v=Y1BlT4_c_SU&list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

    —– CSS FOR BEGINNERS:
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

    —– NODE.JS TUTORIALS
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

    —– SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

    ============== The Net Ninja =====================

    For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

    ================== Social Links ==================

    Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

Chia lưới hiển thị hình ảnh dễ dàng với CSS Grid Layout – Init HTML

  • Tác giả: www.inithtml.com
  • Đánh giá: 3 ⭐ ( 6410 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mô-đun bố cục lưới CSS cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế các trang…

Mục lưới CSS

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 5 ⭐ ( 8930 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

Mô-đun bố cục lưới CSS

  • Tác giả: vi.w3hmong.com
  • Đánh giá: 4 ⭐ ( 4789 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

CSS Grid căn bản – Phần 1

  • Tác giả: ehkoo.com
  • Đánh giá: 3 ⭐ ( 4055 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn từng nghe về CSS Grid nhưng chưa có thời gian tìm hiểu cặn kẽ? Không sao, Ehkoo sẽ giúp bạn khám phá NGAY những tính năng vượt trội của CSS Grid trong việc xây dựng layout.

Tìm hiểu về Grid, bố cục xây dựng giao diện trang web trong CSS

  • Tác giả: www.dammio.com
  • Đánh giá: 3 ⭐ ( 3659 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phần 2 CSS3 – Hệ thống lưới của BootStrap

  • Tác giả: dotnet.edu.vn
  • Đánh giá: 4 ⭐ ( 1879 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một bộ các mixin để tạo ra nhiều bố cục theo ngữ nghĩa..

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Phông chữ HTML - Ví dụ về họ Phông chữ CSS (Ký tự Serif và Sans Serif) - phông chữ cho html css