Những bài học
Bắt đầu
Bắt đầu học
CodeGym /Các khóa học /Frontend SELF VI /Grid Areas

Grid Areas

Frontend SELF VI
Mức độ , Bài học
Có sẵn

9.1 Thuộc tính grid-template-areas

CSS Grid Layout cung cấp khả năng nghiêm túc cho việc tạo ra layout phức tạp thông qua các vùng được đặt tên (grid areas). Thuộc tính grid-template-areas cho phép thiết lập các vùng lưới mà có thể sử dụng để sắp xếp các phần tử dễ dàng hơn. Thuộc tính này giúp các developer tổ chức layout một cách trực quan và dễ dàng bảo trì.

Các khái niệm cơ bản của grid-template-areas

  1. Xác định các vùng:
    • Thuộc tính grid-template-areas cho phép bạn đặt tên cho các vùng khác nhau của lưới
    • Mỗi tên vùng đại diện cho một nhóm ô hình chữ nhật
  2. Sử dụng các vùng được đặt tên:
    • Các vùng đã xác định có thể được sử dụng để đặt các phần tử bằng cách thiết lập thuộc tính grid-area cho mỗi phần tử

Cú pháp của grid-template-areas:

    
      .container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer"
      }

Cú pháp cho các phần tử Grid:

    
      .header {
        grid-area: header;
      }

      .sidebar {
        grid-area: sidebar;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: footer;
      }

Giải thích:

  • Mỗi dòng trong giá trị grid-template-areas đại diện cho một hàng trong lưới
  • Mỗi từ trong dòng đại diện cho một ô hoặc nhóm ô
  • Các dấu chấm (.) có thể sử dụng cho các ô trống

9.2 Ví dụ sử dụng grid-template-areas

Ví dụ triển khai đầy đủ:

CSS 
    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .sidebar {
        grid-area: sidebar;
        background-color: #3498db;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }
HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ví dụ về Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="sidebar">Sidebar</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Giải thích mã:

  • .grid-container: xác định container Grid với display: grid và thiết lập bố cục lưới sử dụng grid-template-areas. Trong trường hợp này, bố cục bao gồm ba dòng: dòng đầu tiên là tiêu đề, dòng thứ hai bao gồm thanh bên và nội dung chính, dòng thứ ba là chân trang
  • .header, .sidebar, .main, .footer: xác định các kiểu cho từng khu vực lưới và liên kết các khu vực này với các tên trong grid-template-areas qua thuộc tính grid-area

9.3 Quản lý các vùng trống

Thuộc tính grid-template-areas cho phép để trống các vùng, sử dụng ký tự dấu chấm (.) để biểu thị không gian trống.

Ví dụ triển khai đầy đủ:

CSS 
    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          ". main ."
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }
HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Các vùng trống trong Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Giải thích mã:

  • .grid-container: tạo container Grid với ba vùng: tiêu đề, nội dung chính và chân trang. Dòng giữa chứa các vùng trống bên trái và bên phải của nội dung chính
  • .header, .main, .footer: xác định các kiểu cho các vùng và liên kết chúng với các tên vùng trong grid-template-areas
Bình luận
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION