Thuộc tính grid-template-areas

Thuộc tính grid-template-areas xác định cách bố trí các phần tử trong Grid. Đầu tiên, đặt tên cho mỗi phần tử con bằng cách sử dụng thuộc tính grid-area. Sau đó, trong phần tử cha, chúng ta chỉ định thuộc tính grid-template-areas, trong đó liệt kê tên của các phần tử con theo thứ tự chúng ta muốn sắp xếp chúng trong Grid.

Cú pháp

cssbộ chọn {
  grid-template-areas: tên các phần tử con;
}

Ví dụ

Hãy đặt vị trí cho các phần tử của chúng ta trong Grid:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#elem1 {
  grid-area: first;
}
#elem2 {
  grid-area: second;
}
#elem3 {
  grid-area: third;
}

#parent {
  display: grid;
  grid-template-areas: 'second first third';
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Ví dụ

Bây giờ, hãy thay thế tên của một số phần tử bằng dấu chấm '.'. Như có thể thấy từ kết quả của mã được thực thi trong trường hợp này, một khối trống sẽ được bố trí trong sơ đồ:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#elem1 {
  grid-area: first;
}
#elem2 {
  grid-area: second;
}
#elem3 {
  grid-area: third;
}
#parent {
  display: grid;
  grid-template-areas: 'first . second third';
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Xem thêm