Question

Tách div thành 2 cột bằng css

Posted on by Themewp.vn

Phương pháp tách thẻ div thành 2 cột bằng css

Để tách một phần tử <div> thành hai cột bằng CSS, bạn có thể sử dụng thuộc tính display: flex; hoặc display: grid;. Dưới đây là cách bạn có thể thực hiện điều này bằng cả hai phương pháp:

Phương pháp tách thẻ div thành 2 cột bằng css

Sử dụng display: flex;:

HTML:

html
<div class="container">
<div class="column1">Nội dung cột 1</div>
<div class="column2">Nội dung cột 2</div>
</div>

CSS:

css
.container {
display: flex;
}.column1, .column2 {
flex: 1; /* Chia đều không gian giữa hai cột */
/* Hoặc sử dụng width để xác định kích thước cụ thể cho từng cột */
/* width: 50%; */
}

Sử dụng display: grid;:

HTML:

html
<div class="container">
<div class="column1">Nội dung cột 1</div>
<div class="column2">Nội dung cột 2</div>
</div>

CSS:

css
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* Chia container thành 2 cột có chiều rộng bằng nhau */
/* Hoặc có thể sử dụng grid-template-columns: 50% 50%; để xác định kích thước cụ thể */
}.column1, .column2 {
/* Nội dung cho mỗi cột */
}

Khi sử dụng display: flex;, chúng ta sử dụng flex: 1; để các cột chia đều không gian hoặc có thể sử dụng width để xác định kích thước cụ thể cho từng cột.

Khi sử dụng display: grid;, chúng ta xác định cột bằng cách sử dụng grid-template-columns, có thể sử dụng 1fr (tức là tỷ lệ 1:1 cho mỗi cột) hoặc cung cấp kích thước cụ thể cho mỗi cột.

Lựa chọn giữa display: flex; và display: grid; phụ thuộc vào nhu cầu cụ thể của bạn và hỗ trợ trình duyệt mong muốn.

Linh hoạt và tương thích giữa display: flex; và display: grid;

Độ linh hoạt của display: flex; và display: grid; đặt ra một sự lựa chọn quan trọng khi thực hiện việc tách một thẻ <div> thành hai cột.

Nếu bạn muốn một cách đơn giản và hiệu quả hơn để thực hiện hành động này với kích thước linh hoạt, Flex là lựa chọn lý tưởng. Nó được thiết kế để phù hợp với các bố cục đơn giản và tương thích tốt trên nhiều trình duyệt.

Ngược lại, nếu bạn đang tìm kiếm sự kiểm soát chặt chẽ hơn về vị trí và kích thước của từng cột, display: grid; là sự lựa chọn mạnh mẽ.

Nó cung cấp khả năng xác định chiều rộng cụ thể hoặc tỷ lệ giữa các cột, làm cho nó trở thành lựa chọn phù hợp cho các bố cục phức tạp.

Việc chọn giữa display: flex; và display: grid; phụ thuộc vào yêu cầu cụ thể của dự án và mức độ hỗ trợ trình duyệt mà bạn mong đợi.

Khi áp dụng một trong hai phương pháp, bạn có thể tiện dụng sự linh hoạt của CSS để tạo ra giao diện đa cột hấp dẫn và hiệu quả.

Tối ưu hóa hiệu suất giữa display: flex; và display: grid;

Trong quá trình xây dựng giao diện đa cột, tối ưu hóa hiệu suất trở thành một yếu tố quan trọng. Lựa chọn giữa display: flex; và display: grid; cũng ảnh hưởng đến khả năng tối ưu hóa hiệu suất của trang web.

Tối ưu hóa hiệu suất giữa display: flex; và display: grid;

  • Với display: flex;

Flexbox sẽ cho hiệu suất tốt trong trường hợp đơn giản, khi làm việc với bố cục đơn giản và ít cột, Flexbox thường mang lại hiệu suất tốt hơn.

Việc này đặc biệt quan trọng trên các thiết bị di động hoặc trình duyệt có tài nguyên hạn chế.

  • Với display: grid;

CSS Grid cho bố cục phức tạp và hiệu suất đồng đều trong những tình huống phức tạp với nhiều cột và hàng. Grid có thể đảm bảo hiệu suất đồng đều hơn, đặc biệt là khi bạn cần kiểm soát chặt chẽ vị trí và kích thước của mỗi phần tử.

Lựa chọn giữa display: flex; và display: grid; để tách div thành 2 cột nên được quyết định dựa trên yêu cầu về hiệu suất và độ phức tạp của dự án.

Bạn có thể lựa chọn sự linh hoạt của Flexbox cho những bố cục đơn giản hoặc sự quyền lực của CSS Grid để đối mặt với yêu cầu phức tạp, đồng thời duy trì hiệu suất tốt trên mọi loại thiết bị.