CSS Grid Template Columns: Làm chủ việc Định nghĩa Cột Động

CSS Grid đã cách mạng hóa bố cục web, mang lại khả năng kiểm soát và linh hoạt chưa từng có. Một trong những tính năng cốt lõi của nó là thuộc tính grid-template-columns, cho phép bạn xác định cấu trúc các cột của lưới. Hiểu cách sử dụng thuộc tính này một cách hiệu quả là rất quan trọng để tạo ra các bố cục đáp ứng và năng động, thích ứng với các kích thước màn hình và yêu cầu nội dung khác nhau.

Tìm hiểu về grid-template-columns

Thuộc tính grid-template-columns chỉ định số lượng và chiều rộng của các cột trong một grid container. Bạn có thể định nghĩa kích thước cột bằng nhiều đơn vị khác nhau, bao gồm:

• Độ dài cố định: Pixels (px), points (pt), centimeters (cm), millimeters (mm), inches (in)
• Độ dài tương đối: Ems (em), rems (rem), viewport width (vw), viewport height (vh)
• Đơn vị phân số: fr (đại diện cho một phần không gian có sẵn trong grid container)
• Từ khóa: auto, min-content, max-content, minmax()

Hãy bắt đầu với một ví dụ cơ bản:

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

            

              
                Copy
              
            
          

Đoạn mã này tạo ra một lưới có ba cột. Cột đầu tiên và cột thứ ba mỗi cột chiếm 1/4 không gian có sẵn, trong khi cột thứ hai chiếm 2/4 (hoặc 1/2) không gian.

Đơn vị Cố định và Tương đối

Việc lựa chọn giữa các đơn vị cố định và tương đối phụ thuộc vào mục tiêu thiết kế của bạn. Các đơn vị cố định như pixel cung cấp khả năng kiểm soát chính xác chiều rộng cột, nhưng chúng có thể làm cho bố cục kém linh hoạt và đáp ứng. Ngược lại, các đơn vị tương đối cho phép các cột co giãn theo tỷ lệ với kích thước màn hình hoặc nội dung.

Đơn vị Cố định (Pixels): Sử dụng pixel khi bạn cần một phần tử có kích thước cụ thể, không thay đổi. Điều này ít phổ biến hơn đối với các cột trong bố cục lưới đáp ứng, nhưng có thể hữu ích cho các yếu tố có yêu cầu thương hiệu cụ thể. Ví dụ:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 150px 300px;
}

            

              
                Copy
              
            
          

Đơn vị Tương đối (Ems, Rems, Viewport Units): Các đơn vị này linh hoạt hơn. em và rem tương đối với kích thước phông chữ, cho phép các phần tử co giãn theo kích thước văn bản để cải thiện khả năng tiếp cận. vw và vh tương đối với kích thước của viewport, cho phép các bố cục thích ứng với các kích thước màn hình khác nhau. Ví dụ:

            .grid-container {
  display: grid;
  grid-template-columns: 10vw 20vw 70vw;
}

            

              
                Copy
              
            
          

Đơn vị Phân số (fr)

Đơn vị fr là một công cụ mạnh mẽ để tạo bố cục lưới linh hoạt. Nó đại diện cho một phần không gian có sẵn trong grid container sau khi tất cả các cột có kích thước cố định khác đã được tính toán. Điều này làm cho nó trở nên lý tưởng để phân phối không gian còn lại một cách cân đối.

Hãy xem xét ví dụ này:

            .grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}

            

              
                Copy
              
            
          

Ở đây, cột đầu tiên rộng 100 pixel. Không gian còn lại sau đó được chia cho cột thứ hai và thứ ba, với cột thứ hai chiếm 1/3 không gian còn lại và cột thứ ba chiếm 2/3.

Các từ khóa: auto, min-content, max-content

CSS Grid cung cấp một số từ khóa để định nghĩa chiều rộng cột:

• auto: Trình duyệt tự động tính toán chiều rộng cột dựa trên nội dung của nó.
• min-content: Chiều rộng cột được đặt thành kích thước tối thiểu cần thiết để chứa nội dung của nó mà không bị tràn. Điều này có thể có nghĩa là ngắt các từ dài.
• max-content: Chiều rộng cột được đặt thành kích thước tối đa cần thiết để chứa nội dung của nó mà không bị ngắt dòng. Điều này sẽ ngăn các từ bị ngắt xuống dòng mới nếu có thể.

Ví dụ sử dụng auto:

            .grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

            

              
                Copy
              
            
          

Trong trường hợp này, cột đầu tiên và cột thứ ba sẽ điều chỉnh chiều rộng của chúng để vừa với nội dung, trong khi cột thứ hai sẽ chiếm hết không gian còn lại.

Ví dụ sử dụng min-content và max-content:

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
}

            

              
                Copy
              
            
          

Cột đầu tiên sẽ chỉ rộng bằng phần nội dung nhỏ nhất của nó yêu cầu, trong khi cột thứ hai sẽ mở rộng để vừa với tất cả nội dung trên một dòng, nếu có thể.

Hàm minmax()

Hàm minmax() cho phép bạn chỉ định kích thước tối thiểu và tối đa cho một cột. Điều này đặc biệt hữu ích để tạo các cột có thể mở rộng để lấp đầy không gian có sẵn nhưng không thu nhỏ dưới một kích thước nhất định.

Cú pháp:

            minmax(min, max)

            

              
                Copy
              
            
          

Ví dụ:

            .grid-container {
  display: grid;
  grid-template-columns: 100px minmax(200px, 1fr) 100px;
}

            

              
                Copy
              
            
          

Trong ví dụ này, cột đầu tiên và cột thứ ba được cố định ở 100 pixel. Cột thứ hai có chiều rộng tối thiểu là 200 pixel và chiều rộng tối đa cho phép nó mở rộng và lấp đầy không gian còn lại. Nếu không gian còn lại nhỏ hơn 200px, cột thứ hai sẽ rộng 200px và lưới có thể bị tràn hoặc các cột có thể thu nhỏ tương ứng (tùy thuộc vào các ràng buộc tổng thể của lưới).

Lặp lại Định nghĩa Cột với repeat()

Hàm repeat() đơn giản hóa việc định nghĩa các mẫu cột lặp đi lặp lại. Nó nhận hai đối số: số lần lặp lại mẫu và chính mẫu đó.

Cú pháp:

            repeat(number, pattern)

            

              
                Copy
              
            
          

Ví dụ:

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

            

              
                Copy
              
            
          

Đoạn mã này tương đương với:

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

            

              
                Copy
              
            
          

Bạn cũng có thể kết hợp repeat() với các đơn vị và từ khóa khác:

            .grid-container {
  display: grid;
  grid-template-columns: 100px repeat(2, 1fr 200px) auto;
}

            

              
                Copy
              
            
          

Điều này tạo ra một lưới với cấu trúc cột sau: 100px, 1fr, 200px, 1fr, 200px, auto.

Sử dụng auto-fill và auto-fit với repeat()

Các từ khóa auto-fill và auto-fit được sử dụng với repeat() tạo ra các cột động tự động điều chỉnh theo không gian có sẵn. Chúng đặc biệt hữu ích để tạo các bộ sưu tập hoặc danh sách đáp ứng.

• auto-fill: Tạo ra càng nhiều cột càng tốt mà không làm tràn container, ngay cả khi một số cột trống.
• auto-fit: Tương tự như auto-fill, nhưng thu gọn các cột trống về chiều rộng 0, cho phép các cột khác mở rộng và lấp đầy không gian có sẵn.

Ví dụ sử dụng auto-fill:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

Điều này tạo ra càng nhiều cột càng tốt, mỗi cột có chiều rộng tối thiểu là 200 pixel và chiều rộng tối đa cho phép chúng lấp đầy không gian có sẵn. Nếu không có đủ nội dung để lấp đầy tất cả các cột, một số cột sẽ trống, nhưng chúng vẫn chiếm không gian.

Ví dụ sử dụng auto-fit:

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

            

              
                Copy
              
            
          

Điều này hoạt động tương tự như auto-fill, nhưng nếu có các cột trống, chúng sẽ thu gọn về chiều rộng 0, và các cột còn lại sẽ mở rộng để lấp đầy không gian. Đây thường là hành vi mong muốn cho các lưới đáp ứng.

Các Đường Lưới được Đặt tên

Bạn có thể gán tên cho các đường lưới, điều này có thể làm cho mã của bạn dễ đọc và dễ bảo trì hơn. Điều này được thực hiện bằng cách đặt tên trong dấu ngoặc vuông khi định nghĩa thuộc tính grid-template-columns (và grid-template-rows).

Ví dụ:

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-2] 2fr [col-end];
}

            

              
                Copy
              
            
          

Trong ví dụ này, chúng ta đã đặt tên cho đường lưới đầu tiên là col-start, đường lưới thứ hai là col-2, và đường lưới thứ ba là col-end. Sau đó, bạn có thể sử dụng những tên này khi đặt các mục lưới bằng cách sử dụng các thuộc tính grid-column-start, grid-column-end, grid-row-start, và grid-row-end.

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

            

              
                Copy
              
            
          

Điều này đặt mục lưới bắt đầu từ đường col-start và kết thúc ở đường col-2.

Ví dụ Thực tế và Các Trường hợp Sử dụng

Dưới đây là một số ví dụ thực tế về cách sử dụng grid-template-columns trong các tình huống thực tế:

1. Thanh Điều hướng Đáp ứng

Một thanh điều hướng thích ứng với các kích thước màn hình khác nhau:

            .navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px;
}

.logo {
  /* Styles for logo */
}

.nav-links {
  display: flex;
  justify-content: space-around;
}

.search-bar {
  /* Styles for search bar */
}

@media (max-width: 768px) {
  .navbar {
    grid-template-columns: 1fr;
  }
  .nav-links {
    flex-direction: column;
  }
}

            

              
                Copy
              
            
          

Trong ví dụ này, thanh điều hướng có ba cột: một cho logo (auto), một cho các liên kết điều hướng (1fr), và một cho thanh tìm kiếm (auto). Trên các màn hình nhỏ hơn, lưới thu gọn thành một cột duy nhất và các liên kết điều hướng xếp chồng lên nhau theo chiều dọc.

2. Bộ sưu tập Ảnh

Một bộ sưu tập ảnh đáp ứng với số lượng cột linh hoạt:

            .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.gallery-item {
  /* Styles for gallery items */
}

            

              
                Copy
              
            
          

Điều này tạo ra một bộ sưu tập ảnh với các cột rộng ít nhất 250 pixel và mở rộng để lấp đầy không gian có sẵn. Từ khóa auto-fit đảm bảo rằng các cột trống được thu gọn, và các hình ảnh lấp đầy container một cách gọn gàng.

3. Bố cục Hai Cột với Thanh bên

Một bố cục hai cột cổ điển với một thanh bên có chiều rộng cố định và một khu vực nội dung chính linh hoạt:

            .container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

.sidebar {
  /* Styles for sidebar */
}

.main-content {
  /* Styles for main content */
}

            

              
                Copy
              
            
          

Thanh bên có chiều rộng cố định là 250 pixel, trong khi khu vực nội dung chính chiếm hết không gian còn lại.

4. Bố cục Phức tạp với các Vùng Lưới được Đặt tên

Đối với các bố cục phức tạp hơn, bạn có thể kết hợp grid-template-columns với grid-template-areas để định nghĩa các vùng cụ thể của lưới của bạn.

            .container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  /* Styles for header */
}

.sidebar {
  grid-area: sidebar;
  /* Styles for sidebar */
}

.main {
  grid-area: main;
  /* Styles for main content */
}

.footer {
  grid-area: footer;
  /* Styles for footer */
}

            

              
                Copy
              
            
          

Ví dụ này định nghĩa một lưới với phần đầu trang, thanh bên, khu vực nội dung chính và chân trang. Thuộc tính grid-template-areas gán các vùng cụ thể cho các phần tử này. Các định nghĩa cột sử dụng các đường lưới được đặt tên để cải thiện khả năng đọc.

Các Lưu ý về Khả năng Tiếp cận

Khi sử dụng CSS Grid, việc xem xét khả năng tiếp cận là rất quan trọng. Đảm bảo rằng bố cục của bạn logic và có thể điều hướng được cho người dùng khuyết tật. Sử dụng các phần tử HTML ngữ nghĩa và cung cấp các thuộc tính ARIA thích hợp để tăng cường khả năng tiếp cận. Ví dụ, hãy lưu ý đến thứ tự tab và đảm bảo rằng nội dung được trình bày theo một thứ tự hợp lý ngay cả khi được sắp xếp lại trực quan bằng Grid.

Tối ưu hóa Hiệu suất

CSS Grid nhìn chung có hiệu suất tốt, nhưng có một số điều bạn có thể làm để tối ưu hóa hiệu suất:

• Tránh lồng ghép quá nhiều: Giữ cấu trúc lưới của bạn càng đơn giản càng tốt để giảm chi phí kết xuất.
• Sử dụng tăng tốc phần cứng: Tận dụng các thuộc tính CSS kích hoạt tăng tốc phần cứng (ví dụ: transform: translateZ(0)) để cải thiện hiệu suất kết xuất.
• Tối ưu hóa hình ảnh: Đảm bảo hình ảnh của bạn được tối ưu hóa đúng cách để giảm thời gian tải trang.
• Kiểm tra trên các thiết bị khác nhau: Kiểm tra kỹ lưỡng bố cục của bạn trên nhiều thiết bị và trình duyệt khác nhau để xác định và giải quyết mọi vấn đề về hiệu suất.

Gỡ lỗi Bố cục CSS Grid

Các trình duyệt hiện đại cung cấp các công cụ phát triển tuyệt vời để gỡ lỗi bố cục CSS Grid. Trong Chrome, Firefox và Edge, bạn có thể kiểm tra grid container và trực quan hóa các đường lưới, chiều rộng cột và chiều cao hàng. Những công cụ này có thể giúp bạn xác định và giải quyết các vấn đề về bố cục một cách nhanh chóng.

Các Phương pháp Tốt nhất khi Sử dụng grid-template-columns

• Lập kế hoạch cho bố cục của bạn: Trước khi bạn bắt đầu viết mã, hãy lên kế hoạch cẩn thận cho bố cục lưới của bạn và xác định các khu vực chính cũng như kích thước mong muốn của chúng.
• Sử dụng các đơn vị tương đối: Ưu tiên sử dụng các đơn vị tương đối như fr, em, và vw để tạo các bố cục đáp ứng.
• Sử dụng minmax(): Sử dụng hàm minmax() để định nghĩa kích thước cột linh hoạt thích ứng với nội dung và kích thước màn hình khác nhau.
• Sử dụng repeat(): Sử dụng hàm repeat() để đơn giản hóa các mẫu cột lặp đi lặp lại.
• Xem xét khả năng tiếp cận: Đảm bảo rằng bố cục của bạn có thể truy cập được cho tất cả người dùng.
• Kiểm tra kỹ lưỡng: Kiểm tra bố cục của bạn trên các thiết bị và trình duyệt khác nhau để đảm bảo chúng hoạt động như mong đợi.
• Viết mã sạch, dễ bảo trì: Sử dụng các đường lưới được đặt tên và nhận xét để làm cho mã của bạn dễ đọc và dễ bảo trì hơn.

Kết luận

Thuộc tính grid-template-columns là một công cụ mạnh mẽ để tạo các bố cục web linh hoạt, đáp ứng và năng động. Bằng cách làm chủ các đơn vị, từ khóa và hàm có sẵn, bạn có thể khai thác toàn bộ tiềm năng của CSS Grid và tạo ra các thiết kế web tuyệt đẹp thích ứng với mọi kích thước màn hình và yêu cầu nội dung. Hãy nhớ lên kế hoạch cẩn thận cho bố cục của bạn, sử dụng các đơn vị tương đối, xem xét khả năng tiếp cận và kiểm tra kỹ lưỡng để đảm bảo kết quả tối ưu. Bằng cách tuân theo các phương pháp tốt nhất này, bạn có thể tạo ra các trang web hiện đại, thân thiện với người dùng, mang lại trải nghiệm tuyệt vời cho tất cả người dùng.

Tài nguyên Tham khảo thêm

• MDN Web Docs: grid-template-columns
• CSS-Tricks: A Complete Guide to CSS Grid
• Grid by Example