CSS Grid: Hợp lý và Căn chỉnh

Với bố cục lưới CSS, bản thân lưới bên trong containers của nó cũng như các mục lưới có thể được định vị bằng 6 thuộc tính sau: justify-items , align-items , justify-content , align-content , justify-self và align-self . Các thuộc tính này là một phần của mô-đun căn chỉnh hộp CSS và chúng xác định một cách tiêu chuẩn để định vị các phần tử bằng flexbox hoặc lưới CSS.

Hầu hết các thuộc tính căn chỉnh được áp dụng trên containers lưới, nhưng một số thuộc tính dành cho các mục lưới, khi bạn muốn chỉ định các giá trị chỉ áp dụng cho các mục lưới cụ thể. Hãy phân tích từng thuộc tính này và tác dụng của chúng.

Để có các ví dụ sau, ta đang sử dụng các luật đánh dấu và CSS sau cho lưới của ta :

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: grid;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 250px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  background: rgba(114, 186, 94, 0.05);
}
.item {
  width: 50%;
  height: 50%;
  background: rgba(255, 213, 70, 0.4);
  border: 2px dashed rgba(236, 198, 48, 0.5);
}

Và đây là cách lưới cơ sở của ta trông như thế nào:

Thuộc tính trên containers lưới

biện minh-mục

justify-items được sử dụng để căn chỉnh các mục lưới dọc theo trục hàng . Các giá trị có thể là bắt đầu , kết thúc , trung tâm và kéo dài . Dưới đây là các ví dụ với trung tâm và kết thúc :

.container {
  /* ... */
  justify-items: center;
}

.container {
  /* ... */
  justify-items: end;
}

căn chỉnh các mục

Tương tự như justify-items , nhưng căn chỉnh các mục lưới dọc theo trục cột :

.container {
  /* ... */
  align-items: center;
}

.container {
  /* ... */
  align-items: end;
}

Đối với các ví dụ về justify-content và align-content sau đây, các kiểu cơ sở của ta sẽ khác một chút để có thể thể hiện một lưới nhỏ hơn containers của nó:

.container {
  /* ... */
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 75px;
  height: 300px;
}
.item {
  width: 60px;
  height: 60px;
  /* ... */
}

biện minh cho nội dung

Khi toàn bộ lưới nhỏ hơn không gian cho containers lưới, hãy sử dụng justify-content để căn lề cho lưới dọc theo trục hàng . Bạn có thể sử dụng các giá trị sau: bắt đầu , kết thúc , chính giữa , kéo dài , khoảng trắng xung quanh , khoảng trắng giữa hoặc khoảng trắng đồng đều :

.container {
  /* ... */
  justify-content: end;
}

.container {
  /* ... */
  justify-content: space-evenly;
}

căn chỉnh nội dung

Tương tự như justify-content , nhưng align-content sẽ căn chỉnh lưới dọc theo trục cột :

.container {
  /* ... */
  align-content: end;
}

.container {
  /* ... */
  align-content: space-evenly;
}

Thuộc tính trên Mục lưới

Cả justify-self và align-self đều tương tự với các thuộc tính tương đương có sẵn trên containers ( justify-items và align-items ), nhưng chúng áp dụng trên các mục cụ thể cần được định vị khác với phần còn lại của các mục lưới.

justify-self (trục hàng)

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item" style="justify-self: end;"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

tự căn chỉnh (trục cột)

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item" style="align-self: end;"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Tags:

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03