Lưới CSS hoặc Flexbox: Cái nào tốt hơn để tạo cột?

.flex-container { 
  display: flex; 
} 

.flex-container { 
  display: flex; 
  flex-wrap: wrap; 
} 

sử dụng CSS này:

.grid-container { 
  display: grid; 
} 

Sẽ không có gì xảy ra chỉ với khai báo trên vì hành vi mặc định của Grid tạo ra các hàng xếp chồng lên nhau.

Để chuyển sang hiển thị theo cột, bạn cần thay đổi lưới-tự động-dòng tài sản (tức là hàng ngang theo mặc định):

.grid-container { 
  display: grid; 
  grid-auto-flow: column; 
} 

Bây giờ đây là kết quả:

Để chỉ định chính xác số cột bạn muốn trên mỗi dòng, hãy sử dụng lưới-mẫu-cột :

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
} 

Giá trị này tạo ra năm cột có chiều rộng bằng nhau. Để có được hành vi gói tương tự như Flexbox, bạn có thể sử dụng các thuộc tính phản hồi như tự động điều chỉnh Và nhỏ nhất lớn nhất :

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, min-max(300px, 1fr)); 
} 

Bạn sẽ thường nghe thấy Flexbox và Grid lần lượt được gọi là một chiều và hai chiều. Tuy nhiên, đó không phải là sự thật hoàn toàn vì cả Flexbox và Grid đều có thể tạo ra hệ thống bố trí hai chiều . Họ chỉ làm điều đó theo những cách khác nhau, với những ràng buộc khác nhau.

Điều quan trọng nhất là cách bạn có thể kiểm soát khía cạnh một chiều của bố cục. Hãy xem xét hình ảnh sau đây, ví dụ:

Quan sát mức độ nhất quán của cột Lưới và mức độ không đồng đều của mỗi cột trong Flexbox. Mỗi hàng/cột trong một thùng chứa linh hoạt độc lập với hàng/cột khác. Vì vậy, một số có thể lớn hơn những trang khác, tùy thuộc vào kích thước nội dung của chúng. Đây không giống như các cột mà giống các khối độc lập hơn.

pdf không được mở trong chrome

Lưới hoạt động khác bằng cách thiết lập lưới 2D với các cột bị khóa theo mặc định. Cột có văn bản ngắn sẽ có cùng kích thước với cột có văn bản dài hơn nhiều, như minh họa ở hình ảnh trên.

Tóm lại, CSS Grid có cấu trúc hơn một chút, trong khi Flexbox thì có cấu trúc hơn một chút. hệ thống bố trí linh hoạt và đáp ứng . Những hệ thống bố trí thay thế này được đặt tên rất hay!

Khi nào nên sử dụng Flexbox

Bạn có muốn dựa vào kích thước nội tại của từng cột/hàng như được xác định bởi nội dung của chúng không? Hay bạn muốn có quyền kiểm soát có cấu trúc từ quan điểm của phụ huynh? Nếu câu trả lời của bạn là câu trả lời đầu tiên thì Flexbox là giải pháp hoàn hảo cho bạn.

Để chứng minh điều này, hãy xem xét một menu điều hướng ngang. Thay thế đánh dấu trong gắn thẻ với điều này:

<h1>Flexbox vs. Grid</h1> 
 
<header class="flex"> 
  <h2>Flexbox</h2> 
 
  <nav> 
    <ul class="nav-list"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Service Information Goes Here</a></li> 
      <li><a href="">Blog Contact</a></li> 
      <li><a href=""></a></li> 
    </ul> 
  </nav> 
</header> 
 
<header class="grid"> 
  <h2>Grid</h2> 
 
  <nav> 
    <ul class="nav-list"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Service Information Goes Here</a></li> 
      <li><a href="">Blog Contact</a></li> 
      <li><a href=""></a></li> 
    </ul> 
  </nav> 
</header> 

Thay thế đánh dấu trong tệp CSS bằng:

.nav-list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 
 
header { 
  --border-width: 5px; 
  border: var(--border-width) solid black; 
  margin-bottom: 30px; 
} 
 
header > *:first-child { 
  border: var(--border-width) solid #FFC0CB; 
  margin: 0; 
} 
 
li { 
  border: var(--border-width) solid #90EE90; 
} 

Đây là kết quả:

Bây giờ, hãy chuyển đổi điều hướng đầu tiên thành bố cục linh hoạt và điều hướng thứ hai thành bố cục dạng lưới bằng cách thêm CSS sau:

.flex .nav-list { 
  display: flex; 
  gap: 1em; 
  flex-wrap: wrap; 
} 
 
.grid .nav-list { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
} 

So sánh kết quả xem cái nào phù hợp hơn:

Từ hình ảnh trên, bạn có thể thấy Flexbox là giải pháp hoàn hảo trong trường hợp này. Bạn có các mục mà bạn muốn đặt cạnh nhau và duy trì kích thước nội tại của chúng (lớn hay nhỏ tùy thuộc vào độ dài văn bản). Với Grid, mỗi ô có chiều rộng cố định và ít nhất nó trông không đẹp bằng với các liên kết văn bản thuần túy.

Khi nào nên sử dụng lưới CSS

Một điểm mà Grid thực sự vượt trội là khi bạn muốn tạo ra một hệ thống cứng nhắc từ hệ thống gốc. Một ví dụ là một tập hợp các thành phần thẻ phải có độ rộng bằng nhau, ngay cả khi chúng chứa lượng nội dung khác nhau.

Thay thế đánh dấu bên trong gắn thẻ với điều này:

<h1>Flexbox vs. Grids</h1> 
 
<section class="cards"> 
  <h2>Some cards</h2> 
 
  <div class="columns"> 
    <article class="card"> 
      <h3 class="card__title">Fun Stuff</h3> 
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
 
    <article class="card"> 
      <h3 class="card__title">Fun Stuff</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
 
    <article class="card"> 
      <h3 class="card__title">A Longer Title Than Others</h3> 
 
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere 
         excepturi sit ea dolores totam veniam qui voluptates commodi, 
         perferendis et!</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
  </div> 
</section> 

Thêm CSS này:

.columns { 
  display: flex; 
  gap: 1em; 
} 
 
article { 
  background-color: #90EE90; 
  color: black; 
  padding: 15px; 
} 
 
ul { 
  background-color: white; 
  padding: 2px; 
  list-style: none; 
} 

Bạn đang bắt đầu với màn hình Flexbox để xem nó trông như thế nào, từ đó bạn có thể so sánh nó với màn hình lưới. Đây là đầu ra:

Lưu ý rằng cột cuối cùng lớn hơn các cột khác do kích thước nội tại của nó, đây là điều mà Flexbox xử lý tốt. Nhưng để làm cho chúng có cùng chiều rộng bằng Flexbox, bạn sẽ phải đi ngược lại kích thước nội tại đó bằng cách thêm vào như sau:

.columns > * { 
  flex: 1; 
} 

Điều này thực hiện thủ thuật. Nhưng Grid phù hợp hơn với những trường hợp như thế này. Bạn chỉ cần chỉ định số lượng cột và thế là xong:

.columns { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 1em; 
} 

Đây là kết quả:

Một ưu điểm khác của việc sử dụng Grid là cha mẹ có thể kiểm soát cách bố trí của con cái. Vì vậy, bạn có thể thêm và xóa các phần tử con mà không lo làm hỏng bố cục.

Vậy khi nào bạn nên sử dụng Grid hoặc Flexbox?

Tóm lại, CSS Grid rất tuyệt vời khi bạn muốn có một điều khiển có cấu trúc từ góc nhìn của cha mẹ, với kích thước các cột bằng nhau bất kể kích thước của từng nội dung riêng lẻ.

Mặt khác, Flexbox lý tưởng khi bạn muốn có một hệ thống linh hoạt hơn dựa trên kích thước nội tại của các phần tử.

chế độ pin yếu làm gì