网格：：右对齐网格项

Question

通过使用右边按钮的网格定位。谁能给我指明正确的方向？

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100px;
}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

​

在上面的场景中，如何将这两个按钮移到父div的末尾？

Answer 1

问题是..。您将网格宽度设置为100 to。

相反，在网格中设置列width:100px，因为网格是容器，也使用justify-content:end;将内容对齐到右侧。

​

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100%;
  grid-template-columns: 100px 100px;
  justify-content: end;
}
 button{display:inline-block;}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

​

参考资料：Layout

Answer 2

使用justify-content: end;和grid-template-columns: 100px 100px;

​

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100%;
  grid-template-columns: 100px 100px;
  justify-content: end;
}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

​

Answer 3

希望这对你有帮助！

​

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100px;
  margin: 0 0 0 auto; //added
}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

​