Căn chỉnh theo trục dọc bên trong ô của CSS Grid

Để căn chỉnh các phần tử bên trong ô của grid theo trục dọc, chúng ta sử dụng thuộc tính align-items, thuộc tính này được đặt trong phần tử cha. Cách hoạt động của thuộc tính này có thể thấy khi xem grid trong công cụ developer của trình duyệt.

Theo điểm bắt đầu của trục

Hãy căn chỉnh các phần tử của chúng ta bên trong ô theo điểm bắt đầu của trục dọc:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Hãy xem grid của chúng ta trong công cụ developer của trình duyệt:

Theo trung tâm của trục

Và bây giờ hãy căn chỉnh các phần tử của chúng ta trong các ô theo trung tâm của trục dọc:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: center;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Hãy xem grid của chúng ta trong công cụ developer của trình duyệt:

Theo điểm kết thúc của trục

Một lần nữa thay đổi căn chỉnh của các phần tử, lần này theo điểm kết thúc của trục dọc:

html<div id="parent">
  <div id="elem1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  align-items: end;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  
}

Результат:

Hãy xem grid của chúng ta trong công cụ developer của trình duyệt:

Bài tập thực hành