Hướng dẫn về Lưới CSS: Làm chủ bố cục với thuộc tính lưới

Việc định vị các phần tử trên trang web có thể rất phức tạp khi làm việc với các bố cục phức tạp. Đây là nơi lưới CSS có ích. Nó là một hệ thống bố cục được thiết kế để đơn giản hóa quá trình tạo bố cục phức tạp.

Việc sử dụng CSS Grid mang lại lợi thế độc đáo so với các kỹ thuật bố cục thông thường bằng cách cho phép sắp xếp các phần tử ở cả hàng và cột trong khung hai chiều. Sự sắp xếp linh hoạt này giúp nâng cao quá trình thiết kế so với các giải pháp thay thế hạn chế hơn vốn bị giới hạn ở một chiều duy nhất.

Lưới chứa và vật phẩm

Khi sử dụng CSS Grid, người ta có thể áp dụng các thuộc tính của nó cho các phần tử cha hoặc phần tử con. Bằng cách đặt thuộc tính display thành "lưới" trên phần tử cha, nó được chuyển đổi thành vùng chứa lưới, với mọi phần tử con tiếp theo sau đó sẽ trở thành các mục lưới và kế thừa các thuộc tính lưới đã chỉ định.

Đây là cách nó được thể hiện:

Một phần tử lưới có khả năng tự chuyển đổi thành một thùng chứa lưới. Cấu hình này được gọi là cấu trúc lưới lồng nhau, trong đó một lưới tồn tại trong một lưới khác. Trong trường hợp này, vùng chứa lưới chính được chỉ định là lưới bên ngoài, trong khi phần tử được chuyển đổi đảm nhận vai trò của lưới bên trong.

Các lưới riêng lẻ hoạt động độc lập với nhau; do đó, các thuộc tính được gán cho lưới bên trong không liên quan đến việc sắp xếp lưới bên ngoài và ngược lại.

Đây là những gì nó trông giống như:

Có được sự hiểu biết sâu sắc về sự tương tác giữa các thùng chứa lưới và nội dung của chúng là điều không thể thiếu khi nỗ lực xây dựng các sắp xếp hai chiều mạch lạc với độ chính xác.

Xin lưu ý rằng các vùng chứa lưới có tập thuộc tính riêng, trong khi các thuộc tính liên quan đến các mục lưới thì khác với chúng.

Đường lưới và đường ray

Trước khi đi sâu vào việc sử dụng CSS Grid, bắt buộc bạn phải hiểu biết toàn diện về hai khái niệm cơ bản:

Đường lưới biểu thị các đường ngang và dọc tạo cấu trúc bố cục lưới CSS bằng cách xác định điểm bắt đầu và điểm kết thúc của hàng và cột. Tương tự như các cạnh của hộp vật lý, những đường này có giá trị số để sắp xếp chính xác trong hệ thống lưới. Hình minh họa mô tả một đường đứt nét màu đỏ thể hiện sự hiện diện của các đường lưới.

⭐ Đường lưới: Chúng là những khoảng trống giữa các đường lưới xác định hàng và cột. Chúng giống như các khối xây dựng của bố cục lưới. Trong hình ảnh trên, vùng màu trong mỗi mục tượng trưng cho đường lưới.

Hãy coi các đường lưới và đường ray tương tự như các đường trên giấy biểu đồ, hoạt động như nền tảng cho bố cục lưới. Khi một đường lưới ngang xen kẽ với một đường lưới dọc, nó sẽ tạo thành một ô hình chữ nhật, đóng vai trò như một vùng bao quanh để định vị các phần tử lưới.

Thuộc tính vùng chứa lưới CSS

lưới", hơn nữa, còn tồn tại các thuộc tính CSS bổ sung có thể được sử dụng để đạt được sự phân bổ hài hòa giữa các thành phần hình ảnh và vị trí tương ứng của chúng trên trang web. Một số thuộc tính này bao gồm:

Mẫu lưới

Thuộc tính hiện tại quy định kích thước của hàng và cột, có thể được xác định theo pixel, phần trăm hoặc phân số. Ngoài ra, có nhiều từ khóa khác nhau như “auto”, “minmax”, “repeat” để tăng tính linh hoạt.

⭐grid-template-rows: Đặt chiều cao của hàng.

⭐grid-template-columns: Xác định độ rộng của cột.

Dưới đây là một số ví dụ:

Sử dụng Pixel:

 .grid-container {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-template-rows: 250px 250px;
} 

Sử dụng tỷ lệ phần trăm:

 .grid-container {
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 50% 50%;
} 

Sử dụng fr:

 .grid-container {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
}

Sử dụng từ khóa auto và minmax():

 .grid-container {
  grid-template-columns: auto minmax(150px, 1fr) auto;
  grid-template-rows: 100px auto;
}

Sử dụng lặp lại () để định cỡ nhất quán:

 .grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
}

Khu vực mẫu lưới và vị trí tự động

Vị trí Tự động cho phép quá trình sắp xếp mục tự động trong hệ thống lưới mà không cần người dùng cung cấp vị trí hoặc tổ chức cụ thể. Thay vào đó, lưới sẽ xác định theo thuật toán các vị trí tối ưu dựa trên thứ tự các mục được liệt kê trong mã nguồn. Tính năng này có thể đặc biệt hữu ích trong trường hợp nhiều thành phần cần được phân bố đồng đều trên một bố cục, cho phép sử dụng hiệu quả không gian có sẵn mà không cần can thiệp thủ công.

Các vùng mẫu lưới đóng vai trò là khung để tổ chức và cấu trúc nội dung trong vùng chứa lưới, bằng cách xác định các vùng hoặc “vùng” cụ thể được xác định bằng tên tương ứng của chúng. Các khu vực được đặt tên này hoạt động tương tự như nhãn phòng trong bản thiết kế tòa nhà, cho phép các nhà thiết kế chỉ định vị trí cho các thành phần lưới dựa trên tham chiếu vùng được chỉ định của chúng. Bằng cách sử dụng phương pháp này, các nhà phát triển có thể tạo các cấu trúc bố cục phức tạp và chính xác một cách dễ dàng và linh hoạt hơn.

 .grid-container {
  grid-template-areas:'header header header header'
    'sidebar main main right'
    'sidebar content content right'
    'footer footer footer footer';
}

Cấu hình hiện tại thể hiện một ma trận bao gồm ba cột và bốn hàng. Nó chứa hai hàng đóng vai trò là vùng nội dung chính. Các vùng được chỉ định bao gồm “tiêu đề”, “thanh bên”, “nội dung” và “chân trang”. Sau đó, chúng ta sẽ đi sâu vào sự phức tạp của việc sử dụng các ký hiệu khu vực này trong các thuộc tính của mọi thành phần lưới.

Căn chỉnh trong lưới CSS

Bạn có thể sử dụng các thuộc tính căn chỉnh để điều chỉnh vị trí của các thành phần lưới trong các ô lưới tương ứng của chúng. Những tài sản này bao gồm:

⭐ biện minh cho các mục: Kiểm soát việc căn chỉnh theo chiều ngang của các mục trong ô lưới của chúng.

Các giá trị quan tâm là điểm bắt đầu, điểm cuối, vị trí trung tâm và mức độ mở rộng được liên kết với tập dữ liệu này.

⭐ căn chỉnh các mục: Kiểm soát việc căn chỉnh các mục theo chiều dọc trong ô lưới của chúng.

Các giá trị quan tâm trong bối cảnh này là điểm bắt đầu, điểm cuối, vị trí trung tâm và mức độ co giãn liên quan đến các tham số này.

⭐just-content: Căn chỉnh toàn bộ lưới trong vùng chứa dọc theo trục ngang.

Các giá trị có thể được sử dụng để đặt khoảng cách giữa các phiên bản của cụm điểm đánh dấu bao gồm “bắt đầu”, “kết thúc”, “trung tâm”, “kéo dài”, “khoảng cách giữa”, “khoảng cách xung quanh” và “không gian đều ”.

⭐align-content: Căn chỉnh toàn bộ lưới trong vùng chứa dọc theo trục tung.

Các giá trị có sẵn để kiểm soát khoảng cách của các mục trong một thùng chứa linh hoạt bao gồm “bắt đầu”, “kết thúc”, “trung tâm”, “kéo dài”, “khoảng cách giữa”, “khoảng cách xung quanh” và “không gian đều”.

Đây là một ví dụ:

 .grid-container {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  align-content: center;
} 

Việc tập trung hóa đạt được bằng cách phân bổ không gian đồng đều giữa tất cả các cột của toàn bộ lưới, với mỗi mục được đặt ở giữa theo cả chiều ngang và chiều dọc trong ô tương ứng. Sự sắp xếp tổng hợp đảm bảo rằng lưới có bố cục cân bằng, với khoảng cách bằng nhau giữa các phần tử liền kề, trong khi vẫn duy trì hướng thẳng đứng thẳng hàng với trục thẳng đứng của vùng chứa chính.

Khoảng cách lưới

Khoảng cách lưới, còn được gọi là khoảng cách ô hoặc khoảng cách giữa các phần tử, liên quan đến vùng mở hiện diện giữa các hàng và cột của bố cục lưới. Khía cạnh thiết kế này giúp phân biệt trực quan các phần tử liền kề trong lưới và cung cấp một số khoảng trống cho từng mục riêng lẻ.

Thuộc tính grid-gap cho phép xác định khoảng cách giữa các phần tử lưới dọc theo cả trục hàng và cột, sử dụng một loạt đơn vị bao gồm pixel (px), phần trăm (%) và đơn vị em (em).

 .grid-container {
  grid-gap: 20px;
} 

Phiên bản hiện tại bao gồm một vùng chứa lưới có hai cột cách nhau một khoảng cách nhau 20 pixel. Sự sắp xếp như vậy giúp phân định các cột cả về mặt trực quan lẫn cách bố trí, từ đó nâng cao tính khác biệt của chúng.

Thuộc tính mục lưới CSS

Chắc chắn! Bài trình bày nêu ra một số đặc điểm quan trọng quy định việc thực hiện các mục riêng lẻ trong cách sắp xếp CSS Grid, kèm theo các ví dụ minh họa:

lưới-hàng-bắt đầu và lưới-hàng-cuối:

Chỉ số dòng bắt đầu và kết thúc của một phần tử nhất định được chỉ định bởi thuộc tính này.

Các giá trị cho span có thể bao gồm số dòng, chẳng hạn như “span n” hoặc chúng có thể được đặt để tự động điều chỉnh dựa trên kích thước của màn hình bằng cài đặt “tự động”.

 .grid-item-1 {
  grid-row-start: 2;
  grid-row-end: 4;
}

Mã đã cho định vị Mục lưới 1 trong một khoảng hàng, kéo dài từ căn chỉnh dọc của hàng thứ hai đến vị trí tương ứng của hàng thứ tư.

lưới-cột-bắt đầu và lưới-cột-cuối:

Hàm phạm vi được sử dụng để xác định số cột bắt đầu và kết thúc của một mục cụ thể trong bảng hoặc trang tính. Điều này cho phép bạn chỉ định phần dữ liệu nào sẽ được đưa vào khi tham chiếu nó, cho dù đó là mục đích hiển thị hay là một phần của phép tính công thức.

Các giá trị có thể có nhiều dạng khác nhau như số dòng, “span n” hoặc “auto”.

 .grid-item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Mã đã cho định vị Lưới Mục 2 theo cách nó trải dài trên ba cột, bắt đầu bằng dòng đầu tiên của cột đầu tiên và kết thúc ở dòng cuối cùng của cột thứ hai.

vùng lưới:

Thuộc tính CSS grid-template-areas cho phép chỉ định kích thước và vị trí của một phần tử trong vùng chứa lưới bằng cách tham chiếu đến các đường lưới cụ thể thông qua tên tương ứng của chúng.

Chắc chắn! Việc sử dụng các nhãn vùng được xác định trước hiện được tạo điều kiện thuận lợi thông qua việc triển khai thuộc tính grid-template-areas. Có thể xem minh họa về sự tích hợp của nó cùng với thuộc tính grid-area như sau:

 .header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.content {
  grid-area: content;
}
.right {
  grid-area: right;
}
.footer {
  grid-area: footer;
} 

Đây là kết quả:

tự biện minh:

Căn chỉnh theo chiều ngang của các mục riêng lẻ trong một ô được thực hiện bằng cách căn chỉnh chúng dọc theo trục ngang. Điều này có thể được thực hiện bằng cách sử dụng các tùy chọn định dạng khác nhau, chẳng hạn như căn chỉnh văn bản hoặc cài đặt thuộc tính bảng. Phương pháp cụ thể để đạt được điều này sẽ phụ thuộc vào bối cảnh và yêu cầu của ứng dụng cụ thể mà nó đang được sử dụng.

Các giá trị trong thiết kế đồ họa bao gồm nhiều khả năng, bao gồm việc nằm ở điểm bắt đầu hoặc kết thúc quỹ đạo của một phần tử, đóng vai trò là điểm trung tâm mà các phần tử khác xoay quanh hoặc mở rộng ra ngoài các ranh giới đã đặt để tạo ra độ co giãn. Những vị trí khác nhau này cho phép tạo ra những hiệu ứng hình ảnh đa dạng góp phần tạo nên bố cục tổng thể.

 .grid-item-5 {
  justify-self: center;
}

Mã đã cho căn chỉnh mục lưới thứ năm, Mục lưới 5, theo chiều ngang ở giữa ô tương ứng trong bố cục lưới.

căn chỉnh bản thân:

Thay đổi cách căn chỉnh của từng mục trong một cột để chúng được định vị theo chiều dọc trong các ô tương ứng.

Các giá trị có thể có nhiều dạng khác nhau như là điểm bắt đầu, điểm cuối, tham chiếu trung tâm hoặc phương tiện mở rộng ra ngoài phạm vi điển hình của nó.

 .grid-item-1 {
  align-self: end;
}

Đoạn mã cụ thể này định hướng và định vị “Mục lưới 1” sao cho nó nằm ở điểm thấp nhất trong ô lưới tương ứng.

Bạn được khuyến khích thực hiện kiểm soát sáng tạo đối với việc trình bày trực quan các mục lưới riêng lẻ bằng cách sử dụng kết hợp các đặc tính phong cách khác nhau, từ đó đạt được tính thẩm mỹ phù hợp với mục tiêu thiết kế mong muốn.

Tạo bố cục đáp ứng bằng lưới CSS

Việc sử dụng hệ thống lưới CSS là rất quan trọng trong việc tạo ra các thiết kế đáp ứng dễ dàng điều chỉnh theo các kích thước và tiện ích hiển thị đa dạng, đảm bảo trải nghiệm người dùng mượt mà trên các kích thước màn hình và thiết bị khác nhau. Có một số kỹ thuật bạn có thể sử dụng để đạt được mục tiêu này một cách hiệu quả.

Việc sử dụng truy vấn phương tiện kết hợp với Bố cục lưới CSS cho phép khả năng phản hồi thích ứng dựa trên kích thước màn hình. Điều này cho phép các nhà thiết kế và phát triển web tự động sửa đổi cách sắp xếp các thành phần lưới và điều chỉnh độ rộng cột theo các kích thước hiển thị khác nhau, từ đó đảm bảo trải nghiệm xem tối ưu trên nhiều thiết bị và độ phân giải khác nhau.

Sử dụng các thước đo linh hoạt như giá trị phần trăm và “fr” để cho phép điều chỉnh tỷ lệ các phần tử và cột lưới một cách linh hoạt, tỷ lệ thuận với không gian có sẵn.

Sử dụng hàm minmax() để thiết lập nhiều kích thước cho ô lưới, nâng cao khả năng đọc và khả năng tương thích trên nhiều độ phân giải màn hình khác nhau bằng cách ngăn nội dung trở nên quá nhỏ hoặc quá khổ.

Vui lòng sửa đổi văn bản được cung cấp để truyền tải cùng một thông điệp theo cách tinh tế hơn. Khi điều chỉnh kích thước của cột, khoảng cách giữa các thành phần lưới, kiểu chữ và khoảng trắng, điều quan trọng là phải duy trì tính nhất quán trong toàn bộ thiết kế của bạn để có chế độ xem tối ưu trên các nền tảng khác nhau.

Khám phá các khả năng của bố cục lưới CSS

Bằng cách tận dụng tính linh hoạt và sức mạnh của CSS Grid, người ta có thể tạo ra các bố cục liền mạch và đẹp mắt về mặt thẩm mỹ, đáp ứng cả sự hấp dẫn trực quan và các yêu cầu ngày càng phát triển của thiết kế web hiện đại. Do đó, hãy đi sâu vào lĩnh vực lưới, điều tra tiềm năng của chúng và nâng cao trình độ phát triển web của bạn.

Khi khám phá các kỹ thuật bố cục khác nhau, việc so sánh CSS Grid với các phương pháp thay thế như Flexbox thường có lợi. Mô-đun CSS Flexbox cung cấp phương tiện để người ta có thể đánh giá và xác định cách tiếp cận phù hợp nhất cho các yêu cầu thiết kế cụ thể của họ trong một dự án nhất định.