Sử dụng grid css có tốt không?

Các bạn đọc like ủng hộ MUO nhé. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêm

Hiểu biết vững chắc về Flexbox và CSS Grid là cần thiết nếu bạn muốn xây dựng các trang web tuyệt đẹp, đáp ứng

Nếu bạn đã viết CSS trong một khoảng thời gian dài, rất có thể ít nhất bạn đã nghe nói về các thuật ngữ này. Bạn thậm chí có thể đã sử dụng một hoặc cả hai ở một mức độ nào đó. Cả hai đều là những phần mạnh mẽ của CSS, với các trường hợp sử dụng tương tự nhưng khác nhau một cách tinh tế

Flexbox là gì?

Flexbox là một phương pháp bố cục CSS một chiều đã xuất hiện được một thời gian. Bạn có thể coi Flexbox là một loạt các thuộc tính CSS có liên quan mà bạn có thể sử dụng để căn chỉnh các phần tử HTML trong một vùng chứa và quản lý khoảng cách giữa chúng

Trước Flexbox, kiểu bố cục này yêu cầu sử dụng các thuộc tính vị trí và float gây khó chịu và khó sử dụng

Nếu bạn lo lắng về hỗ trợ trình duyệt cho Flexbox, đừng. Theo caniuse. com, tất cả các trình duyệt hiện đại đều hỗ trợ Flexbox

Khái niệm cơ bản về Flexbox

Mặc dù Flexbox bao gồm nhiều thuộc tính CSS, nhưng những điều cơ bản lại khá đơn giản. Việc sử dụng Flexbox luôn bắt đầu bằng cách khai báo vùng chứa chính là vùng chứa flex bằng cách thêm hiển thị. linh hoạt theo quy tắc phong cách của nó. Làm điều này tự động làm cho tất cả các phần tử con của phần tử này flex-items

Sau đó, bạn có thể kiểm soát việc phân phối không gian trong flex-container bằng cách sử dụng thuộc tính justify-content. Bạn có thể kiểm soát việc căn chỉnh các mục linh hoạt bằng thuộc tính align-items

Đây là một ví dụ mã sử dụng Flexbox để trải đều không gian trong vùng chứa giữa các phần tử con của nó và căn chỉnh tất cả chúng ở giữa vùng chứa. Đây là HTML

 
class="container">
    <div>1div>
    <div>2div>
    <div>3div>
    <div>4div>
    <div>5div>
div>

Đây là CSS

 .container {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    border: 1px solid black;
    height: 200px;
}

.container > div {
    height: 100px;
    width: 100px;
    background-color: red;
    color: white;
    font-size: 5rem;
    text-align: center;
    border-radius: 5px;
}

Và đây là đầu ra

5 numbered boxes

Lưới CSS là gì?

CSS Grid là một hệ thống bố cục bổ sung cho Flexbox. Flexbox mạnh mẽ, nhưng không phù hợp lắm với một số loại bố cục nhất định. Cố gắng bố trí cấu trúc của toàn bộ trang bằng Flexbox cuối cùng sẽ trở thành một nhiệm vụ khó chịu liên quan đến đánh dấu xấu xí, phi ngữ nghĩa và CSS khó hiểu

CSS Grid không phải là sự thay thế Flexbox, mà là một hệ thống thay thế cho một số trường hợp

Hỗ trợ cho CSS Grid không rộng rãi như Flexbox, nhưng Grid được hỗ trợ khá tốt vào năm 2022

Khái niệm cơ bản về lưới CSS

Khái niệm về Grid rất đơn giản. Như tên gợi ý, CSS Grid cho phép bạn chia không gian trong vùng chứa chính thành lưới hàng và cột, với số lượng hàng/cột bất kỳ mà bạn muốn. Sau đó, bạn chỉ định vị trí của các mục con bằng cách tham chiếu các dòng của lưới cha

Bắt đầu bằng cách thêm màn hình. lưới vào vùng chứa chính. Sau đó, sử dụng các thuộc tính grid-template-row và grid-template-columns để chỉ định các hàng và cột bạn muốn chia lưới thành. Sau đó, bạn có thể sử dụng các thuộc tính grid-column và grid-row trên các phần tử con để cho chúng biết vị trí của chúng trong lưới. Hãy xem một ví dụ về Lưới sử dụng thiết lập năm phần tử từ trước, nhưng theo cách sắp xếp phức tạp hơn

Đây là HTML

 
class="container">
    <div>1div>
    
class="two">2</div>
    
class="three">3</div>
    
class="four">4</div>
    
class="five">5</div>
div>

Đây là CSS

 .container {
    display: grid;
    width: 100%;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    border: 1px solid black;
    height: 300px;
}

.container > div {
    background-color: red;
    color: white;
    font-size: 5rem;
    text-align: center;
    border-radius: 5px;
}

.container > .two {
   grid-row: 2;
   grid-column: 2;
}

Đây là đầu ra

5 boxes in a grid

CSS Grid cũng bao gồm rất nhiều thuộc tính khác mà bạn có thể sử dụng để xây dựng các bố cục phức tạp hơn

Bạn nên sử dụng cái nào?

Đầu tiên, điều quan trọng cần lưu ý là không có gì ngăn cản bạn sử dụng Flexbox và Grid cùng nhau và trong một số trường hợp, đó là lựa chọn tối ưu. Điều đó nói rằng, hãy trả lời câu hỏi bố cục nào của từng hệ thống này là phù hợp nhất để triển khai

Flexbox phù hợp nhất để xây dựng bố cục liên quan đến việc căn chỉnh và phân phối các phần tử trên một dòng. Ví dụ về loại bố cục này là sắp xếp các biểu tượng ở cuối phần hoặc sắp xếp các liên kết trong thanh điều hướng

Mặt khác, lưới tỏa sáng nhất khi bạn phải định vị chính xác các phần tử so với các phần tử khác (cả theo chiều ngang và chiều dọc) và bạn cần định vị này để dễ dàng thích ứng với các kích thước màn hình khác nhau

Để chứng minh, đây là mã bạn cần viết để tạo lại bố cục từ ví dụ Lưới với Flexbox

HTML

 
class="container">
    
class="sub one">
        <div>1div>
        <div>5div>
    div>
  
    
class="sub two">
        <div>2div>
    div>
  
    
class="sub three">
        <div>4div>
        <div>3div>
    div>
div>

CSS

 .container {
    border: 1px solid black;
    height: 300px;
}

.sub {
    display: flex;
    width: 100%;
}

.one, .three {
    justify-content: space-between
}

.two {
    justify-content: center;
}

.sub > div {
    height: 100px;
    width: 100px;
    background-color: red;
    color: white;
    font-size: 5rem;
    text-align: center;
    border-radius: 5px;
}

Và đây là đầu ra

a grid of 5 boxes

Điều chính cần lưu ý ở đây là mặc dù mã này tạo ra kết quả giống như ví dụ về Lưới, nhưng phần đánh dấu ở đây phức tạp hơn nhiều. Việc triển khai bố cục này yêu cầu các vùng chứa phụ và bạn phải đặt các div được đánh số không theo thứ tự trong phần đánh dấu

Hơn nữa, giả sử bạn cần chuyển bố cục này sang một vị trí khó xử. nói căn chỉnh div thứ 5 với div thứ 2. Nếu bạn đã sử dụng Flexbox cho việc này, bạn sẽ phải dùng đến vị trí. họ hàng hoặc một cái gì đó tương tự. Sử dụng Grid, tất cả những gì bạn cần là thay đổi thuộc tính grid-column

Nhưng ngược lại, việc thực hiện căn chỉnh một dòng đơn giản từ ví dụ Flexbox với Grid sẽ dẫn đến nhiều CSS hơn. Lưới rõ ràng là ít phù hợp với kiểu bố trí đó

Mặc dù Flexbox và Grid hầu hết có thể sao chép các hiệu ứng của nhau, nhưng vẫn có một số trường hợp ngoại lệ. Tạo các phần tử chồng lên nhau khá khó chỉ với Flexbox nhưng rất dễ dàng với Grid. Lưới cũng không cho phép các phần tử tự đẩy mình ra khỏi các phần tử khác bằng lề. tự động theo cách Flexbox thực hiện

Flexbox và Grid là những hệ thống bố cục mạnh mẽ

Flexbox và CSS Grid đều là những hệ thống thiết kế giúp việc bố trí nội dung trang web của bạn trở nên dễ dàng. Lưới là tốt nhất cho bố cục hai chiều với nhiều yếu tố cần được định vị chính xác so với nhau. Flexbox tốt hơn cho bố cục một chiều hoặc một dòng, nơi bạn chỉ cần sắp xếp một loạt các thành phần theo một cách nhất định

Bạn có nên sử dụng Lưới CSS không?

Lợi ích của CSS Grid . Nó giúp dễ dàng tạo bố cục hai chiều. CSS Grid cũng dễ sử dụng và được hầu hết các trình duyệt web hỗ trợ. Lưới CSS làm cho đánh dấu của bạn sạch hơn (trong mã HTML của bạn) và giúp bạn linh hoạt hơn rất nhiều. CSS Grid is very flexible and responsive. It makes it easy to create two-dimensional layouts. CSS Grid also easy to use and is supported by most web browsers. The CSS grid makes your mark-up cleaner (in your HTML code) and gives you a lot more flexibility.

Sử dụng lưới hay Flexbox tốt hơn?

Lưới là tốt nhất cho bố cục hai chiều với nhiều yếu tố cần được định vị chính xác so với nhau. Flexbox tốt hơn cho bố cục một chiều hoặc một dòng, nơi bạn chỉ cần sắp xếp một loạt các thành phần theo một cách nhất định

Là lưới tốt hơn so với bảng?

Việc tập trung vào tương tác người dùng có nghĩa là Lưới dữ liệu thường hỗ trợ nhiều tùy chọn lựa chọn hơn so với Bảng dữ liệu . Bảng dữ liệu có thể cho phép chọn hàng để sao chép và dán dữ liệu. Lưới dữ liệu thường cho phép lựa chọn hàng và ô không liền kề và lựa chọn phạm vi để cung cấp cho chức năng nâng cao hơn.

Sử dụng các khu vực mẫu lưới có tốt không?

Khu vực mẫu lưới CSS tạo biểu diễn trực quan của lưới bằng cả cột và hàng. Điều này giúp quá trình thiết kế nhanh hơn so với khi sử dụng vị trí dựa trên dòng hoặc giá trị lưới-cột và lưới-hàng .