为什么当网格容器包含对齐内容属性时css网格对齐自身不起作用？

Question

 *{
box-sizing: border-box;
margin:0;
padding:0;
}

div.grid-container {
  display: grid;
  grid-template-columns: repeat(2,1fr)  ;
  grid-gap: 1px;

  align-content: end;

  background-color: #059085;
  padding: 10px;
  color:#000;
  height:300px;
  width:300px;
  
}

div.grid-container  div.grid-item {
    min-width:100%;
    max-height: 25px;
    text-align: center;
    padding: 5px;
    margin: 3px;
    border: 2px solid white;
    color: white;
}

div.grid-container  div.grid-item:first-child {
    align-self: start;
}

#first-grid-item{
    align-self: start;
}
div.grid-container > #first-grid-item{
    align-self: start;
}

  <div class="grid-container">
      <div class="grid-item" id="first-grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
</div>

Answer 1

您必须在 grid-container 中将 align-content: end; 替换为 align-items: end; 才能实现此目的。

编辑：

align-content 属性用于垂直对齐容器内的整个网格。另一方面，grid items 只是网格容器内的框，它控制块轴上的对齐方式。因此，当使用align-items 时，我们控制项目在网格区域内的位置。因此，如果您只想将第一个 div 与顶部对齐，其余的与底部对齐，则使用 align-items: end; 而不是 align-content: end; 是要走的路。下面是一个例子。

这里有更多关于align-items vs align-content

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 150px auto;  /* added */
  grid-gap: 1px;
  align-items: end;  /* added */
  background-color: #059085;
  padding: 10px;
  color: #000;
  /* height: 300px; */  /*removed*/
  width: 300px;
}

div.grid-container div.grid-item {
  min-width: 100%;
  max-height: 25px;
  text-align: center;
  padding: 5px;
  margin: 3px;
  border: 2px solid white;
  color: white;
}

div.grid-container div:first-child {
  align-self: start;
}

<div class="grid-container">
      <div class="grid-item" id="first-grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
</div>