Hướng dẫn what should you use css grid for? - bạn nên sử dụng lưới css để làm gì?

Cách bạn hiển thị nội dung của bạn có thể nói rất nhiều về bạn hoặc công ty của bạn. Có nội dung tốt và biết cách hiển thị nội dung của bạn một cách rõ ràng một cách sạch sẽ mà người dùng của bạn có thể hiểu là thực sự quan trọng.

Vậy làm thế nào để chúng tôi chọn cách chúng tôi sẽ thể hiện nội dung của mình? Trách nhiệm hiển thị nội dung của chúng tôi một cách đẹp và tốt là thông qua mã CSS của chúng tôi.

CSS luôn là một trong những phần quan trọng nhất của phát triển web, chúng tôi đã xây dựng và cải thiện những cách mới để làm việc với nó kể từ khi bắt đầu trình duyệt. Một vài năm trước, tạo bố cục trang web là một công việc rất khó khăn. Chúng tôi đã sử dụng một số thuộc tính CSS như float, định vị rất nhiều yếu tố với position và kiểu dáng khối nội tuyến.

Bây giờ, chúng tôi không phụ thuộc vào các thuộc tính đó nữa để tạo các trang web của chúng tôi, bây giờ nó sẽ dễ dàng hơn để tạo ra những trải nghiệm khác nhau trong các trang web của chúng tôi. Sự phát triển của web đã đi đến một điểm mà bây giờ chúng ta có hai hệ thống bố cục CSS mà chúng ta có thể làm việc cùng; Flexbox và CSS Grid.

Suy nghĩ về hệ thống bố cục nào là tốt nhất cho dự án của bạn sớm thực sự có thể giúp bạn đạt được kết quả tốt hơn và mã CSS được viết tốt. Trong bài đăng này, chúng tôi sẽ xem xét khi nào nên sử dụng Flexbox và khi nào nên sử dụng lưới CSS. Nó không phải là một câu hỏi rất khó để trả lời nhưng nó có thể giúp bạn tiết kiệm thời gian trong tương lai với việc bảo trì và tái cấu trúc.

Để bắt đầu, trước tiên chúng ta cần hiểu mục đích của họ và cách chúng hoạt động dưới mui xe, hãy để bắt đầu với Flexbox.

Flexbox

Flexbox được giới thiệu vào năm 2009 như một hệ thống bố cục mới, với mục tiêu giúp chúng tôi xây dựng các trang web đáp ứng và sắp xếp các yếu tố của chúng tôi một cách dễ dàng, và kể từ đó, nó đã nhận được nhiều sự chú ý hơn. Hóa ra nó hiện đang được sử dụng làm hệ thống bố cục chính cho các trang web hiện đại.

Flexbox là hệ thống bố cục một chiều mà chúng ta có thể sử dụng để tạo một bố cục trục hoặc một bố cục trục cột. Nó làm cho cuộc sống của chúng tôi dễ dàng hơn để thiết kế và xây dựng các trang web đáp ứng mà không phải sử dụng các bản hack khó khăn và nhiều thuộc tính float và vị trí trong mã CSS của chúng tôi.

Để bắt đầu sử dụng Flexbox, tất cả những gì bạn cần làm là tạo một thùng chứa flex bằng thuộc tính

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

Hướng chính mà các mục Flex của chúng tôi thực hiện trong thùng chứa flex của chúng tôi là một hàng.

Chúng tôi có thể thay đổi hướng của các vật phẩm flex trong thùng chứa flex của chúng tôi rất dễ dàng thành một cột, bằng cách chuyển một thuộc tính

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

Flexbox có rất nhiều thuộc tính khác mà chúng ta có thể sử dụng để tạo ra những điều tuyệt vời. Chúng ta có thể đặt hàng các yếu tố theo cách chúng ta muốn, chúng ta có thể đảo ngược thứ tự của các yếu tố, chúng ta có thể xác định xem các yếu tố của chúng ta có nên phát triển hay co lại, v.v.

Ví dụ, hãy để tưởng tượng rằng chúng ta có một phần tử

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

  
1
  
2
  
3

Trong CSS của chúng tôi, chúng tôi sử dụng Flexbox để đặt hàng và sắp xếp các yếu tố của chúng tôi:

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

Chúng ta có thể dễ dàng đảo ngược thứ tự của một phần tử bằng thuộc tính

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

#two {
  order: 3;
}

Bây giờ phần tử của chúng tôi là phần cuối cùng trong thùng chứa flex. Đây là một số tính năng mà Flexbox giới thiệu cho chúng tôi và chúng rất hữu ích cho phong cách và sự liên kết của các yếu tố.

Bây giờ chúng ta đã biết rằng Flexbox là hệ thống bố cục một chiều, hãy để hiểu ngắn gọn về cách thức hoạt động và sự khác biệt giữa các hệ thống bố cục này.

Lưới CSS

Nếu Flexbox là một hệ thống bố cục mạnh mẽ vì nó là một hệ thống một chiều (có nghĩa là chúng ta có thể làm việc với các hàng hoặc cột), thì CSS Grid hiện được coi là hệ thống bố cục mạnh mẽ nhất hiện có.

CSS Grid là một hệ thống bố cục hai chiều, chúng ta có thể làm việc với các hàng và cột với nhau, điều đó có nghĩa là nó mở ra rất nhiều khả năng khác nhau để xây dựng các hệ thống thiết kế phức tạp và có tổ chức hơn mà không phải quay trở lại một số cách hack của hack mà Chúng tôi đã sử dụng trong quá khứ.

Để xác định một thùng chứa lưới, tất cả những gì bạn cần làm là chuyển thuộc tính

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

Để tạo hàng, bạn sử dụng thuộc tính

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

grid-template-rows: 200px 200px;

Để tạo các cột, nó gần như giống nhau, chúng tôi sử dụng thuộc tính cột lưới bản tin:

grid-template-columns: 200px 200px;

Nhưng nếu bạn đã biết cách sử dụng cả hai hệ thống bố cục này, bạn có thể đã tự hỏi ‘tôi nên sử dụng cái nào ?, Chúng tôi sẽ xem xét điều này tiếp theo.

Bây giờ chúng ta đã thấy cách chúng hoạt động, chúng ta sẽ nhấn mạnh sự khác biệt và các trường hợp sử dụng tốt nhất cho từng trường hợp.

CSS Grid dành cho bố cục, flexbox dành cho căn chỉnh

Quay trở lại thời điểm Flexbox được phát hành, chúng tôi nghĩ rằng đó có thể là hệ thống bố cục tốt nhất để sử dụng để xây dựng các trang web của chúng tôi, nhưng nó không phải là.

Flexbox đã giúp các nhà phát triển bắt đầu tạo ra các ứng dụng web phản ứng nhanh và có thể bảo trì hơn, nhưng ý tưởng chính của hệ thống bố cục một chiều không có ý nghĩa khi bạn cần xây dựng một thiết kế bố cục phức tạp hơn.

CSS Grid thực sự đã đến để giúp chúng tôi xây dựng các thiết kế bố cục phức tạp hơn bằng cách sử dụng một cách hai chiều, sử dụng cả hàng và cột. Chúng ta nên nhằm mục đích sử dụng cả hai cùng nhau, nhưng cho các mục đích khác nhau. Đối với bố cục của bạn, hãy sử dụng CSS Grid, để căn chỉnh các yếu tố của bạn, sử dụng Flexbox.

Nhiều bài viết tuyệt vời hơn từ Logrocket:

• Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
• Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của nút
• Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
• Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
• So sánh NestJS so với Express.js

Để thành thạo và biết chính xác khi nào bạn sẽ cần và cách sử dụng CSS Grid, trước tiên bạn nên tìm hiểu những điều cơ bản và cách thức hoạt động của FlexBox, bởi vì khi bạn cần liên kết các yếu tố trong ứng dụng của mình, đó là Flexbox mà bạn sẽ sử dụng .

Bạn nên xem xét sử dụng FlexBox khi:

• Bạn có một thiết kế nhỏ để thực hiện: Flexbox là lý tưởng khi bạn có một thiết kế bố cục nhỏ để thực hiện, với một vài hàng hoặc một vài cột: Flexbox is ideal when you have a small layout design to implement, with a few rows or a few columns
• Bạn cần sắp xếp các yếu tố: FlexBox là hoàn hảo cho điều đó, điều duy nhất chúng tôi nên làm là tạo một thùng chứa flex bằng cách sử dụng ____10 và sau đó xác định hướng uốn mà chúng tôi muốn: Flexbox is perfect for that, the only thing we should do is create a flex container using

  #container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px;
  }
  
  #one,
  #two, 
  #three {
    width: 200px;
    height: 100%;
    background: red;
  }

  0 and then define the flex-direction that we want
• Bạn cần thiết kế đầu tiên nội dung: Flexbox là hệ thống bố cục lý tưởng để tạo các trang web nếu bạn không biết chính xác nội dung của bạn sẽ trông như thế nào, vì vậy nếu bạn muốn mọi thứ chỉ phù hợp, Flexbox là hoàn hảo cho điều đó: Flexbox is the ideal layout system to create web pages if you don’t know exactly how your content is going to look, so if you want everything just to fit in, flexbox is perfect for that

Tất nhiên, bạn có thể xây dựng toàn bộ ứng dụng của mình bằng Flexbox và nhận được kết quả tương tự như khi bạn đang xây dựng với CSS Grid, điều đó hoàn toàn ổn. Nhưng đối với cách tiếp cận CSS tốt hơn, để có một ứng dụng ngắn gọn hơn, được viết tốt và có thể bảo trì trong dài hạn, để tạo và phù hợp với bố cục của bạn một cách hoàn hảo, phương pháp lý tưởng là sử dụng CSS Grid.

CSS Grid tốt hơn khi:

• Bạn có một thiết kế phức tạp để thực hiện: Trong một số trường hợp sử dụng, chúng tôi có các thiết kế phức tạp để thực hiện và đó là khi phép thuật của CSS Grid thể hiện. Hệ thống bố cục hai chiều ở đây là hoàn hảo để tạo ra một thiết kế phức tạp, chúng ta có thể sử dụng nó có lợi cho chúng ta để tạo ra các trang web phức tạp và có thể bảo trì hơn: In some use cases, we have complex designs to implement, and that’s when the magic of CSS grid shows itself. The two-dimensional layout system here is perfect to create a complex design, we can use it in our favor to create more complex and maintainable web pages
• Bạn cần phải có một khoảng cách giữa các phần tử khối: Một điều khác mà rất hữu ích trong CSS Grid, mà chúng tôi không có trong Flexbox, là thuộc tính GAP. Chúng tôi có thể xác định khoảng cách giữa các hàng hoặc cột của chúng tôi rất dễ dàng mà không cần phải sử dụng thuộc tính lề, có thể gây ra một số tác dụng phụ đặc biệt nếu chúng tôi làm việc với nhiều điểm dừng: Another thing that’s very helpful in CSS grid, that we don’t have in Flexbox, is the gap property. We can define the gap between our rows or columns very easily, without having to use the margin property, which can cause some side effects especially if we’re working with many breakpoints
• Bạn cần phải chồng chéo các phần tử: Các yếu tố chồng chéo bằng cách sử dụng lưới CSS rất dễ dàng, bạn chỉ cần sử dụng các thuộc tính cột lưới và hàng lưới và bạn có thể có các yếu tố chồng chéo rất dễ dàng. Mặt khác, với Flexbox, chúng ta vẫn cần sử dụng một số hack như lề, biến đổi hoặc định vị tuyệt đối: Overlap elements using CSS grid is very easy, you just need to use the grid-column and grid-row properties and you can have overlapping elements very easily. On the other hand, with flexbox we still need to use some hacks such as margins, transforms, or absolute positioning
• Bạn cần một thiết kế đầu tiên bố cục: & nbsp; khi bạn đã có cấu trúc thiết kế bố cục của mình, sẽ dễ dàng hơn để xây dựng với CSS Grid và hệ thống bố cục hai chiều giúp chúng tôi rất nhiều khi chúng tôi có thể sử dụng các hàng và cột với nhau, và định vị các yếu tố theo cách chúng ta muốn: When you already have your layout design structure, it’s easier to build with CSS grid, and the two-dimensional layout system helps us a lot when we’re able to use rows and columns together, and position the elements the way we want

Trước khi bạn quyết định bạn nên sử dụng cái nào, đừng quên:

CSS Grid dành cho bố cục, flexbox dành cho căn chỉnh

Dưới đây, một ví dụ về việc sử dụng đúng lưới CSS, hãy để tưởng tượng rằng chúng tôi sẽ xây dựng một ứng dụng đơn giản và tiếng barebones của các ứng dụng của chúng tôi sẽ trông như thế này:

Chúng tôi có một tiêu đề, một menu sang một bên, nội dung khối chính và chân trang. Để tạo bố cục này bằng CSS Grid, chúng ta chỉ cần tạo các yếu tố của mình:

  
Header
  
  
Main
  

Và bây giờ tạo thùng chứa lưới của chúng tôi bằng cách sử dụng

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

#container {
  width: 100%;
  height: 100vh;
  background: yellow;
  display: grid;
  grid-template-rows: 80px 600px 80px;
  grid-template-columns: 0.5fr 1fr;
}

header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background: blue;
}

aside {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: green;
}

main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background: pink;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  background: yellow;
}

Đó là nó. Chỉ sử dụng 30 dòng CSS, chúng tôi tạo ra thiết kế của mình rất đơn giản, mà không phải sử dụng các bản hack như float hoặc định vị các yếu tố của chúng tôi và không phải tạo ra nhiều thùng chứa flex.

Quyết định tốt nhất mà bạn có thể thực hiện cho ứng dụng của mình để tạo ra một bố cục web rất tốt và được xây dựng tốt cho ứng dụng của bạn là sử dụng cả hai cùng nhau.

Hãy cùng lấy ví dụ của chúng tôi và sử dụng cả CSS Grid và Flexbox để hiển thị sức mạnh của cả hai hệ thống bố cục lại với nhau. Bên trong

#two {
  order: 3;
}

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

Để làm điều đó, tất cả những gì chúng ta cần làm là khai báo

#two {
  order: 3;
}

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

#two {
  order: 3;
}

header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background: blue;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

Một trang web mạnh mẽ, sử dụng CSS Grid để bố trí và Flexbox để căn chỉnh.

Đối với kiểu bố trí chính, bạn có thể sử dụng CSS Grid, vì nó là một hệ thống bố cục hai chiều, bạn có thể làm việc với cả hàng và cột rất dễ dàng. Và đối với kiểu bố trí đơn giản hơn, bạn có thể sử dụng Flexbox, một hệ thống một chiều, nó rất hữu ích để làm việc với các hàng.

Sự kết luận

Trong bài viết này, chúng tôi đã tìm hiểu về sự khác biệt giữa Flexbox và CSS Grid, cách chúng hoạt động trong các trình duyệt hiện đại và cách chúng tôi có thể sử dụng từng người trong số chúng để thực hiện các kết quả khác nhau trong CSS của chúng tôi.

Frontend của bạn có phải là CPU của người dùng của bạn không?

Khi các mặt tiền web ngày càng phức tạp, các tính năng tài nguyên-tài nguyên đòi hỏi ngày càng nhiều từ trình duyệt. Nếu bạn quan tâm đến việc theo dõi và theo dõi việc sử dụng CPU phía máy khách, sử dụng bộ nhớ và nhiều hơn nữa cho tất cả người dùng của bạn trong sản xuất, hãy thử logrocket.https: //logrocket.com/signup/

Logrocket giống như một DVR cho các ứng dụng web và di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán tại sao các vấn đề xảy ra, bạn có thể tổng hợp và báo cáo về các số liệu hiệu suất chính, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, yêu cầu mạng nhật ký và tự động bề mặt tất cả các lỗi.

Hiện đại hóa cách bạn gỡ lỗi các ứng dụng web và di động - bắt đầu giám sát miễn phí.